How to add Edit and Delete Icons in jQGrid Actions

Question

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"

            });

Answer 1

You need to add the option in the column options like

colModel: [{
    name: 'documentName',
    index: 'documentName',
    width: 200,
    editable: false,

    //add the following in one of the colModel config
    formatter: 'actions',
    formatoptions: {
        keys: true,
        editformbutton: true
    }
}

Demo