How to add Edit and Delete button for Jq grid for every row

Question

I want to display edit and delete button for every row on jq grid, code as below:

   $(document).ready(function () {
    jQuery("#jQGridDemo").jqGrid({
        url: 'http://localhost:52618/Sample/GetEmployeeDetails',
        datatype: "json",
        mtype: "POST",
        colNames: ['Eno', 'Ename', 'City', 'Salary'],
        colModel: [
         { name: 'Eno', index: 'Eno', width: 120, stype: 'text', height: 90, editable: true },
         { name: 'Ename', index: 'Ename', width: 150, editable: true },
         { name: 'City', index: 'City', width: 150, editable: true },
            { name: 'Salary', index: 'Salary', width: 100, height: 120, editable: true },

        ],
        rowNum: 10,
        mtype: 'Get',
        loadonce: true,
        pager: '#jQGridDemoPager',

        viewrecords: true,

        caption: "List Employee Details",
        height: "230px",
        search: true,
        editable: true
    });

To display data I have used Json.

I am struggling from two days, can anyone help me.

Answer 1

Mention editLink and deleteLink in colModel name of edit and delete for display Edit and Delete button in jqgrid for each row.

Code:

$(document).ready(function(){
            //jqGrid
            $("#usersList").jqGrid({
                url:'<%=request.getContextPath() %>/Admin/getAllUsersList',
                datatype: "json",               
                colNames:['Edit', 'Delete','Primary Email','Active','First Name','Middle Name','LastName','Mobile Number'],
                colModel:[
                    {name:'edit',search:false,index:'userId',width:30,sortable: false,formatter: editLink},
                    {name:'delete',search:false,index:'userId',width:35,sortable: false,formatter: deleteLink},                     
                    {name:'email',index:'user.primaryEmail',width:150},
                    {name:'isActive',index:'user.isActive',width:80},
                    {name:'firstName',index:'firstName', width:100},
                    {name:'middleName',index:'middleName', width:100},
                    {name:'lastName',index:'lastName', width:100},
                    {name:'mobileNo',index:'user.mobileNo', width:100},
                    ],
                    rowNum:20,
                    rowList:[10,20,30,40,50],
                    rownumbers: true,  
                    pager: '#pagerDiv',
                    sortname: 'user.primaryEmail',  
                    viewrecords: true,  
                    sortorder: "asc",

            });
            $('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
            $('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65);
            $('#load_usersList').width("130");
            $("#usersList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true});
            $(".inline").colorbox({inline:true, width:"20%"});

        });

        function editLink(cellValue, options, rowdata, action)
        {
            return "<a href='<%=request.getContextPath()%>/Admin/editUser/" + rowdata.userId + "' class='ui-icon ui-icon-pencil' ></a>";
        }
        function deleteLink(cellValue, options, rowdata, action)  {
            return "<a href='javascript:deleteRecord(" + rowdata.userId + ")' class='ui-icon ui-icon-closethick'></a>";
        }
        function deleteRecord(id){
            var result = confirm("Are you sure you Want to delete?");
            if (result==true) {
                window.location.href="<%=request.getContextPath()%>/Admin/deleteUser/"+id;
            }
        }

Answer 2

I got it, Just take additional column, and add formaater actions as model class. That's it.

  <script >
  $(document).ready(function () {
  jQuery("#jQGridDemo").jqGrid({
  url: 'http://localhost:52618/Sample/GetEmployeeDetails',
  datatype: "json",
  mtype: "POST",
  colNames: ['Eno', 'Ename', 'City', 'Salary','Actions'],
  colModel: [
         { name: 'Eno', index: 'Eno', width: 120, stype: 'text', height: 90, editable: true },
         { name: 'Ename', index: 'Ename', width: 150, editable: true },
         { name: 'City', index: 'City', width: 150, editable: true },
         { name: 'Salary', index: 'Salary', width: 100, height: 120, editable: true },
         {
           name: 'Actions', index: 'Actions', width: 100, height: 120, editable: true, forma  ter: 'actions',
           formatoptions: {
                            keys: true,
                            editformbutton: true
                          }
         }
        ],
        rowNum: 10,
        mtype: 'Get',
        loadonce: true,
        pager: '#jQGridDemoPager',
        viewrecords: true,
        caption: "List Employee Details",
        height: "230px"  
    });
});

Answer 3

Try this for delete

$(document).ready(function () {
        jQuery("#jQGridDemo").jqGrid({
            url: "your get URL",
            datatype: "json",
            mtype: "POST",
            colNames: ['Eno', 'Ename', 'City', 'Salary'],
            colModel: [
             { name: 'Eno', index: 'Eno', width: 120, stype: 'text', height: 90, editable: true },
             { name: 'Ename', index: 'Ename', width: 150, editable: true },
             { name: 'City', index: 'City', width: 150, editable: true },
                { name: 'Salary', index: 'Salary', width: 100, height: 120, editable: true },
             { name: '', index: '', sortable: false, formatter: Remove, align: "center" },
        ],
        rowNum: 10,
        mtype: 'Get',
        loadonce: true,
        pager: '#jQGridDemoPager',

        viewrecords: true,

        caption: "List Employee Details",
        height: "230px",
        search: true,
        editable: true
    });

    $(".memberAction").click(function () {

        var mopId = $(this).attr("id");
        var ref=$(this).attr("name");
        //do remove ajax call with mopId
    });

    function Remove(cellvalue, options, rowObject) {

        var id = rowObject.id;
        var refNo = rowObject.Reference;
        var html = '';
            html = "<a id='" + id + "'  class='memberAction' name='" + refNo + "' style='color:blue;cursor:pointer;' type='button' title='" + remove + "'>" + remove + "</a>";

        return html;
    }