Add custom butttons in jgGrid

How to add custom button is jqGrid....

To add custom button in jqGrid there are two ways either you use gridcomplete event or use formatter.

Here we will see formatter...

Iike any grid where we add one column to perform some action like view ,edit ,delete we can also add custom button in jqGrid and call some javascript function on click on that custom button.

In this example I will use same code and database  to populate grid i.e blog JqGrid .Letus assume we have populated our grid.

Our output will be : 

Now to add cusotm button we need to add formatter for each column as below :

    $.ajax({

                type: "POST",

                contentType: "application/json",

                data: "{}",

                url: "jqgridexample.aspx/getEmployee",

                dataType: "json",

                success: function (data) {

                    data = data.d;

                    $("#list").jqGrid({

                        datatype: "local",

                        colNames: ['Employee Id', 'Name', 'Email', 'Phone', 'Password', 'Nationality', 'Date of Birth','Action'],

                        colModel: [

                              { name: 'employeeId', index: 'employeeId', width: 55, stype: 'text',searchoptions: { sopt: ['eq', 'ne', 'cn']}, sortable: true, editable: true, formoptions: { rowpos: 1, colpos: 1 }, editrules: { integer: true} },

                              { name: 'name', index: 'name', width: 90, stype: 'text', sortable: true,searchoptions: { sopt: ['eq', 'ne', 'cn']}, editable: true, editrules: { required: true }, formoptions: { rowpos: 2, colpos: 1} },

                              { name: 'email', index: 'email', width: 100, stype: 'text', sortable: true, searchoptions: { sopt: ['eq', 'ne', 'cn']},editable: true, editrules: { email: true, required: true }, formoptions: { rowpos: 2, colpos: 2} },

                              { name: 'phone', index: 'phone', width: 80, align: "right", stype: 'text', searchoptions: { sopt: ['eq', 'ne', 'cn']},sortable: true, editable: true, formoptions: { rowpos: 3, colpos: 1} },

                              { name: 'pwd', index: 'pwd', width: 80, align: "right", stype: 'text', edittype: 'password', sortable: true, editable: true, formoptions: { rowpos: 3, colpos: 2} },

                         { name: 'nationalId', index: 'nationalId', width: 80, align: "right", formatter: 'select',stype: 'select',

                             editable: true, edittype: "select", editoptions: { value: getCountry() }, formoptions: { rowpos: 4, colpos: 1 }

                         },

                          { name: 'dateOfBirth', index: 'dateOfBirth', width: 80, align: "right",

                              edittype: 'text', editable: true,

                              editoptions: { dataInit: function (el)

                               { $(el).datepicker({

                                      dateFormat: "dd/mm/yy",

                                      changeMonth: true,

                                      changeYear: true, }); } },

                              formoptions: { rowpos: 4, colpos: 2 }

                          },

                            {name:'employeeId', index:'price', width:60, align:"center", editable: true, formatter:customFormatter}

//Added formatter and called javascript function for the column employeeId

                       ],

//below function will be called by formatter and return image button with click event for each row of that column

 function customFormatter(cellvalue, options, rowObject)

{

   

    var imageHtml = '<a href ="#" onclick="showclickValue(\'' + rowObject['employeeId'] + '\', \'' + rowObject['name'] + '\')"><img src="edit.png"  /></a>';

    return imageHtml;

}

//below function will be called on click on image button..

function showclickValue(empid,name)

{

alert(empid);

alert(name);

}

And now we have added custom button in our grid.............................

happy coding....

For any confusion or need complete running code just leave your email Id in comment...