Somebody please help me adding edit and delete icons exactly as shown in the below demo link. http://www.trirand.net/aspnetmvc/grid/EditRowInlineActionIcons
Below is my JQGrid. I tried adding formatter:'actions', formatoptions: {keys: true, editbutton:true,delbutton:true }
but no luck in displaying the icons for edit and delete. I think I need to pass the Image sources for edit and delete icons somewhere, which I don't know. And also need to write some code to handle the click events of the icons. Can anybody please give me a basic example for adding edit and delete icons in the "Actions" column for inline editing?
Just an FYI, This is not MVC app, its ASP.Net4.0. I am binding this grid to a table, all the code is in .js file for now.
_bindGridView: function (files) {
var lastsel;
jQuery("#gridJQ").jqGrid({
datatype: "local",
height: 250,
colNames: ['Document Name', 'Category', 'Name/Account No.', 'RepID', 'Description', 'ClientView', 'Document Date', 'Actions'],
colModel: [
{ name: 'documentName', index: 'documentName', width: 200, editable: false },
{ name: 'category', index: 'category', width: 100, editable: true, edittype: "select", editoptions: { value: "cl:Client;Ac:Account;Br:Branch"} },
{ name: 'nameAccount', index: 'nameAccount', width: 170, editable: true },
{ name: 'repId', index: 'repId', width: 70, editable: true, edittype: "select", editoptions: { value: "1:001A;2:001B;3:001C;4:001D"} },
{ name: 'description', index: 'description', width: 100, editable: true, edittype: "select", editoptions: { value: "item:Item one;item:Item Two;item:Item Three"} },
{ name: 'clientView', index: 'clientView', width: 90, editable: true, edittype: "checkbox", editoptions: { value: "Yes:No"} },
{ name: 'documentDate', index: 'documentDate', width: 150, editable: true, editoptions: { dataInit: function (el) {
setTimeout(function () {
$(el).datepicker({
autoPopUp: 'button',
showOn: "both",
buttonImage: "~/Images/myCal.jpg",
buttonImageOnly: true,
buttonText: 'Calendar'
});
}, 10);
}, size:10, maxlength:100
}
},
{ name: 'actions', index: 'actions', width: 70, formatter:'actions',
formatoptions: {keys: true, editbutton:true,delbutton:true } }
],
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#gridJQ').jqGrid('restoreRow', lastsel);
jQuery('#gridJQ').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl: "UploadDocument.aspx",
caption: "FileUpload Grid"
});