Issues with Add/Edit/Delete on jqGrid

Question

I am able to successfully bind the JSON data to jqGrid, however when i try to perform form edit/update data, the pop up is displayed without any field with only Submit and Cancel button.

Details below:

JSON data:

[{"Id":1,"BankId":2,"BankName":"State bank","EmployeeId":2539,"EmployeeName":"John C.","JoiningDate":"2005-07-05T00:00:00","SalaryAmount":50000.0,"Comments":""},
{"Id":2,"BankId":2,"BankName":"State bank","EmployeeId":2232,"EmployeeName":"xxx","JoiningDate":"2001-12-23T00:00:00","SalaryAmount":30000.0,"Comments":"test"},
{"Id":3,"BankId":4,"BankName":"National bank","EmployeeId":2322,"EmployeeName":"yyyy","JoiningDate":"2002-09-23T00:00:00","SalaryAmount":90000.0,"Comments":""},
{"Id":4,"BankId":3,"BankName":"Punjab bank","EmployeeId":2432,"EmployeeName":"ppp","JoiningDate":"2003-01-31T00:00:00","SalaryAmount":60000.0,"Comments":" "},
{"Id":5,"BankId":1,"BankName":"Bank of Maharashtra","EmployeeId":2892,"EmployeeName":"zzz y.","JoiningDate":"2000-10-11T00:00:00","SalaryAmount":80000.0,"Comments":"test 2"}
]

Javascript for jqGrid:

    jQuery(document).ready(function () {
        jQuery("#employeeSalarysGrid").jqGrid({
            height: 250,
            url: 'http://localhost:50570/api/Test/GetEmployeeSalaries',
            mtype: "GET",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            serializeGridData: function (postData) {
                return JSON.stringify(postData);
            },
            jsonReader: {
                root: function (obj) { return obj; },
                page: function (obj) { return 1; },
                total: function (obj) { return 1; },
                records: function (obj) { return obj.length; },
                id: "0",
                cell: "",
                repeatitems: false
            },
            datatype: "json",
            colNames: ['Bank Name', 'Employee name', 'Joining date', 'Salary amount', 'Comments'],
            colModel: [

            { name: 'BankName', align: "center" },
            { name: 'EmployeeName', align: "center" },
            { name: 'JoiningDate', align: "center" },
            { name: 'SalaryAmount', align: "center" },
            { name: 'Comments ', align: "center" }
            ],
            gridview: true,
            autoencode: true,
            ignorecase: true,
            loadonce: true,
            sortname: "InstallmentDate",
            sortorder: "asc",
            viewrecords: true,
            rowNum: 10,
            rowList: [10, 15, 20],
            pager: '#employeeSalarysPager',
            caption: "Employee Salary list"
        });

        $('#employeeSalarysGrid').jqGrid('navGrid', '#employeeSalarysPager',
        {
            edit: true,
            add: true,
            del: true,
            search: true,
            searchtext: "Search",
            addtext: "Add",
            edittext: "Edit",
            deltext: "Delete"
        },
        {//EDIT EVENTS AND PROPERTIES GOES HERE 
        },
        {//ADD EVENTS AND PROPERTIES GOES HERE
        },
        {//DELETE EVENTS AND PROPERTIES GOES HERE
        },
        {//SEARCH EVENTS AND PROPERTIES GOES HERE
        }
        );
    });

Looking forward for some guidance.

Many thanks,

Abhilash

Answer 1

You should add "editable:true" to colModel which you want to edit, i.e.

{ name: 'BankName', align: "center", editable: true}