jsgrid multiple custom control buttons?
I was able to figure this out:
Code:
<script>
$( document ).ready(function() {
$("#jsGrid").jsGrid({
height: "auto",
width: "100%",
sorting: true,
paging: true,
autoload: true,
pageSize: 10,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete your job listing?",
controller: {
loadData: function(filter) {
return $.ajax({
type: "GET",
url: "<?php echo site_url('/job/getjobs/'.$this->session->employer_id); ?>",
data: filter
});
},
},
fields: [
{ name: "id", title: "id", type: "text", visible: false, width: 100 },
{ name: "title", title: "Title", type: "text", width: 100 },
{ name: "created_on", title: "Created On", type: "text", width: 100 },
{ name: "salary", title: "Salary", type: "text", width: 100 },
{ name: "is_active", type: "text", title: "Is Active", width: 100 },
{ type: "control", width: 100, editButton: false, deleteButton: false,
itemTemplate: function(value, item) {
var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);
var $customEditButton = $("<button>").attr({class: "customGridEditbutton jsgrid-button jsgrid-edit-button"})
.click(function(e) {
alert("ID: " + item.id);
e.stopPropagation();
});
var $customDeleteButton = $("<button>").attr({class: "customGridDeletebutton jsgrid-button jsgrid-delete-button"})
.click(function(e) {
alert("Title: " + item.title);
e.stopPropagation();
});
return $("<div>").append($customEditButton).append($customDeleteButton);
//return $result.add($customButton);
},
}
]
});
});
</script>