jqgrid custom edit issue

Question

http://www.trirand.com/blog/jqgrid/jqgrid.html

I have a jqgrid with 5 columns, with first column as Actions, in the first column I have 3 buttons as edit, save, cancel. When I'm binding the data list to the jqgrid, I have 2 issues... first the data in the columns in getting misplaced, as the first column has 3 buttons, the data from the column of the list is binding ti the first column of the grid which has actions as column name and all the other column data are getting misplaced

When I click the edit button in the actions column, all the rows in the grid are supporting the inline edit functionality including the actions column, thereby there is no option for clicking save.

My jQuery code:

        <script type="text/javascript">
        $(function () {
        var lastsel;

        jQuery("#list").jqGrid({
            url: '/Home/GetStudents/',
            datatype: 'json',

            mtype: 'POST',
            colNames: ['Actions', 'StudentID', 'FirstName', 'LastName', 'Email'],
            colModel: [
      { name: 'act', index: 'act', width: 75, sortable: false },
      { name: 'StudentID', sortable: false, key: true },
      { name: 'FirstName', key: true },
      { name: 'LastName', sortable: false, key: true },
      { name: 'Email', width: 200, sortable: false, key: true}],
            cmTemplate: { align: 'center', editable: true },
            pager: '#pager',
            width: 750,
            rowNum: 15,
            rowList: [5, 10, 20, 50],
            sortname: 'StudentID',
            sortorder: "asc",
            viewrecords: true,
            caption: ' My First JQgrid',

            gridComplete: function () {
                var ids = jQuery("#list").jqGrid('getDataIDs');

                for (var i = 0; i < ids.length; i++) {
                    var cl = ids[i];
                    be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#list').editRow('" + cl + "');\"  />";
                    se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#list').saveRow('" + cl + "');\"  />";
                    ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#list').restoreRow('" + cl + "');\" />";
                    jQuery("#list").jqGrid('setRowData', ids[i], { act: be + se + ce });
                }
            },

            editurl: '/Home/About/',
            //                data: { get_param: selectedDescription },
            caption: "jQgrid Sample"

        });

        jQuery("#list").jqGrid('navGrid', "#prowed2", { edit: false, add: false, del: false });
    });

</script>

It's difficult to understand what "misplacing" you have. A picture would be helpful. The code of the demo is from *very old* version of jqGrid. Is it not better to use `formatter: "actions"`? Starting with jqGrid 3.8.2 you can use the formatter (see [here](http://stackoverflow.com/a/5204793/315935)). You should additionally * always* use `gridview: true` to improve performance of the grid (see [here](http://stackoverflow.com/a/12519858/315935) for details). — Oleg, Dec 05 '12 at 06:22
i added the image, i mean the name is displayed in id column, lastname in firstname column etcc... — colors bright, Dec 05 '12 at 06:40

score 0 · Accepted Answer · answered Dec 05 '12 at 07:14

You use cmTemplate: { editable: true }, so you should add editable: true property in the definition of act' column. Additionally you have to adjust position of elements in the JSON returned from the server if you add new column at the beginning of colModel. Moreover it can be only one column with key: true property. It mean that the value of id attribute of the row (id of <tr>) will be get from the column. If you use the property, id property from the JSON input will be ignored. You can use key: true only from the columns which contains unique values.

jqgrid custom edit issue

1 Answers1