Adding a command column to jqGrid in Asp.Net MVC

Question

I hope you are good morning.

I would like to use jqGrid in my Asp.Net application. So far, I have created the html table and converted it to a grid, but I would like to try a more efficient approach: loading data through an AJAX call, as expected with the grid. I learned how to retrieve data, but I would like to have Modify and Delete columns in addition to the data columns. How do I achieve this?

I would prefer not to create html for the buttons in my controller. The ideal solution would be to send only the data and add the necessary columns to jqGrid based on some client templates and id values. I cannot do this manually, since I cannot add columns to an existing grid. So what should I do?

Update . I don’t just need to push for editing / deleting. I need to add an HTML column based on some template and id value, for example<a href="MoreDetails/{id}">[More details]</a>

Answer 1

Sending clean data from the server is the right way if you are using jqGrid.

, jqGrid Demo " ", "Custom Edit" ". " "( " " " " ). , (. jqGrid - ). , " "" ". , Navigator navGrid , . , "Live Data Manipulation ", " ".

. jqGrid Demo . " ", " " setRowData gridComplete loadComplete HTML . ? showlink, custom formatter custom unformatter HTML- jqGrid.

Answer 2

, , , , . Action , , javascript.

$(document).ready(function () {
        $("#all-errors-list").jqGrid({
            url: '/Error/AllErrors/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Id', 'Error','Actions'],
            colModel: [
            { name: 'Id', index: 'Id', width: 100, align: 'left', editable: true},
            { name: 'ErrorDetails', index: 'ErrorDetails', width: 350, align: 'left' },
            { name: 'ActionId', width:400, formatter: actionFormatter}
                      ],
            pager: '#all-errors-pager',
            rowNum: 10,
            rowList: [10, 20, 50],
            sortname: 'Id',
            sortorder: 'asc',
            viewrecords: true,
            imgpath: '<%=Html.ImagePath()%>',
            caption: 'Open Errors',
            height: "100%",
            width: "100%",
            gridComplete: function () { $("button").button(); }
        })

    function actionFormatter(cellvalue, options, rowObject) {
        return "<button onclick=\"alert('" + cellvalue + "')\">Details</button>" ;
    }

, .