How to implement edit inline in jqgrid

Question

i starter in jqgrid, i want implement inline edit in jqgrid i have this grid

$(function () {
    var grid = $('#list');
    grid.jqGrid({
        url: 'jQGridHandler.ashx',
        postData: { ActionPage: 'ClearanceCost', Action: 'Fill' },
        ajaxGridOptions: { cache: false },
        loadonce: true,
        datatype: 'json',
        height: 490,
        colNames: ['REQUEST_ID','WAYBILL_NO', 'COST_ID', 'COST_NAME','COST_AMOUNT', 'CURRENCY_ID ', 'CURRENCY_NAME','REMARK'],
        colModel: [
            { name: 'REQUEST_ID', width: 100, sortable: true,hidden:true },
            { name: 'WAYBILL_NO', width: 100, sortable: true, hidden: true },
            { name: 'COST_ID', width: 200, sortable: true, hidden: true },
            { name: 'COST_NAME', width: 200, sortable: true },
            { name: 'COST_AMOUNT', width: 100, sortable: true },
            { name: 'CURRENCY_ID', width: 100, sortable: true, hidden: true },
            { name: 'CURRENCY_NAME', width: 200, sortable: true },
            { name: 'REMARK', width: 200, sortable: true }
        ],
        gridview: true,
        rowNum: 20,
        rowList: [20, 40, 60],
        pager: '#pager',
        sortname: 'REQUEST_ID',
        viewrecords: true,
        sortorder: 'ASC',
        rownumbers: true,
        editurl: 'jQGridHandler.ashx',
        onSelectRow: function (id) {
            if (id && id !== lastsel) {
                jQuery('#list').jqGrid('restoreRow', lastsel);
                jQuery('#list').jqGrid('editRow', id, true);
               lastsel = id;
            }
         }
        });
        grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true }, {}, {}, {},
            { multipleSearch: true, overlay: false, width: 460 });

i first fill all costType in jqgrid and i Want user Enter amount in Amount Cell and select currency unit in currency_unit cell, in this grid when user click in row , this row change editable, but i want when page is load all row is editable. thanks all.

i Change Code But i can't get data row for save in Database i write this code

$(function () {
    var lastSel;
    var grid = $('#list');
    calculateTotal = function () {
        var totalAmount = grid.jqGrid('getCol', 'COST_AMOUNT', false, 'd');
        var totalTax = grid.jqGrid('getCol', 'COST_NAME', false, 'd');
        alert(totalAmount.length);
        for (var i = 0; i <= totalAmount.length - 1; i++) {
            alert(totalTax[i] + "=" + totalAmount[i]);
        }
    };
    grid.jqGrid({
        url: 'jQGridHandler.ashx',
        postData: { ActionPage: 'ClearanceCost', Action: 'Fill' },
        ajaxGridOptions: { cache: false },
        loadonce: true,
        direction: "rtl",
        datatype: 'json',
        height: 490,
        colNames: ['REQUEST_ID','WAYBILL_NO', 'COST_ID', 'COST_NAME','COST_AMOUNT', 'CURRENCY_ID ', 'CURRENCY_NAME','REMARK'],
        colModel: [
            { name: 'REQUEST_ID', width: 100, sortable: true, hidden: true },
            { name: 'WAYBILL_NO', width: 100, sortable: true, hidden: true },
            { name: 'COST_ID', width: 200, sortable: true, hidden: true },
            { name: 'COST_NAME', width: 200, sortable: true },
            { name: 'COST_AMOUNT', width: 100, sortable: true, editable: true },
            { name: 'CURRENCY_ID', width: 100, sortable: true, hidden: true },
            { name: 'CURRENCY_NAME', width: 200, sortable: true, editable: true },
            { name: 'REMARK', width: 200, sortable: true, editable: true }
        ],
        gridview: true,
        rowNum: 30,
        rowList: [30, 60, 90],
        pager: '#pager',
        sortname: 'REQUEST_ID',
        viewrecords: true,
        sortorder: 'ASC',
        caption: 'درخواست ها......',
        rownumbers: true,
        loadComplete: function () {
            var $this = $(this), rows = this.rows, l = rows.length, i, row;
            for (i = 0; i < l; i++) {
                row = rows[i];
                if ($.inArray('jqgrow', row.className.split(' ')) >= 0) {
                    $this.jqGrid('editRow', row.id, true);
                }
            }
        }
    });
    grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true }, {}, {}, {},
        { multipleSearch: true, overlay: false, width: 460 });

    $("#btnsave").click(function () {
        calculateTotal();
    });
});

but this code no work, mr oleg thanks for help me.

EDIT02: I Create this

enter image description here

with this code. i want when user click save button all data all row send to server but not work

$(document).ready(function () {
    var mydata = [
            { COST_NAME: "A", COST_AMOUNT: "", CURRENCY_NAME: "" },
            { COST_NAME: "b", COST_AMOUNT: "", CURRENCY_NAME: "" },
            { COST_NAME: "c", COST_AMOUNT: "", CURRENCY_NAME: "" },
            { COST_NAME: "d", COST_AMOUNT: "", CURRENCY_NAME: "" },
            { COST_NAME: "e", COST_AMOUNT: "", CURRENCY_NAME: "" },
            { COST_NAME: "f", COST_AMOUNT: "", CURRENCY_NAME: "" },
            { COST_NAME: "g", COST_AMOUNT: "", CURRENCY_NAME: "" }
        ];
    var lastSel;
    var grid = $('#list');
    calculateTotal = function () {
        var totalAmount = grid.jqGrid('getCol', 'COST_AMOUNT', false, 'd');
        var totalTax = grid.jqGrid('getCol', 'COST_NAME', false, 'd');
        alert(totalAmount.length);
        for (var i = 0; i <= totalAmount.length - 1; i++) {
            alert(totalTax[i] + "=" + totalAmount[i]);
        }
    };
    grid.jqGrid({
        postData: { ActionPage: 'ClearanceCost', Action: 'Fill' },
        ajaxGridOptions: { cache: false },
        loadonce: true,
        datatype: "local",
        data: mydata,
        mtype: 'POST', 
        height: 'auto',
        colNames: [ 'COST_NAME', 'COST_AMOUNT', 'CURRENCY_NAME'],
        colModel: [
            { name: 'COST_NAME', width: 200, sortable: true },
            { name: 'COST_AMOUNT', width: 100, sortable: true, editable: true },
            { name: 'CURRENCY_NAME', width: 200, sortable: true, editable: true }
        ],
        gridview: true,
        rowNum: 30,
        rowList: [30, 60, 90],
        pager: '#pager',
        viewrecords: true,
        sortorder: 'ASC',
        rownumbers: true,
        loadComplete: function () {
            var $this = $(this), rows = this.rows, l = rows.length, i, row;
            for (i = 0; i < l; i++) {
                row = rows[i];
                if ($.inArray('jqgrow', row.className.split(' ')) >= 0) {
                    $this.jqGrid('editRow', row.id, true);
                }
            }
        }
    });
    grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true }, {}, {}, {},
        { multipleSearch: true, overlay: false, width: 460 });

    $("#btnsave").click(function () {
        calculateTotal();
    });
});

and body

<table id="list"></table>
<input type="button" value="Save" id="btnsave"/>

thanks all

NEW EDIT: i for this problem write this code

grid.jqGrid({
    url: 'jQGridHandler.ashx',
    postData: { ActionPage: 'ClearanceCost', Action: 'Fill' },
    ajaxGridOptions: { cache: false },
    loadonce: true,
    direction: "rtl",
    pgtext: "صفحه {0} از {1}",
    datatype: 'json',
    height: 490,
    colNames: ['شماره درخواست', 'شماره بارنامه', 'شماره هزینه', 'نام هزینه', 'مبلغ', 'کد واحدهزینه ', 'توضیحات'],
    colModel: [
        { name: 'REQUEST_ID', width: 100, sortable: true, hidden: true },
        { name: 'WAYBILL_NO', width: 100, sortable: true, hidden: true },
        { name: 'COST_ID', width: 200, sortable: true, hidden: true },
        { name: 'COST_NAME', width: 200, sortable: true },
        { name: 'COST_AMOUNT', width: 100, sortable: true, editable: true },
        { name: 'CURRENCY_ID', width: 100, sortable: true, editable: true, edittype: 'select', editoptions: {
                url: "JQGridHandler.ashx?ActionPage=CurrencyUnit&Action=FillDrop",
                dataInit: function (data) {
                    var response = jQuery.parseJSON(data.responseText);
                    var s = '<select>';
                    s += '<option value="0">انتخاب کنید</option>';
                    if (response && response.length) {
                        for (var i = 0, l = response.length; i < l; i++) {
                            var ri = response[i];
                            s += '<option value="' + ri.CURRENCY_ID + '">' + ri.CURRENCY_NAME + '</option>';
                        }
                    }
                    return s + "</select>";

                }
            }
        },
        { name: 'REMARK', width: 200, sortable: true, editable: true }
    ],
    gridview: true,
    rowNum: 30,
    rowList: [30, 60, 90],
    pager: '#pager',
    sortname: 'REQUEST_ID',
    viewrecords: true,
    sortorder: 'ASC',
    caption: 'درخواست ها......',
    rownumbers: true,
    loadComplete: function () {
        var strOption = "";
        $.ajax({
            url: 'JQGridHandler.ashx',
            contentType: 'application/json; charset=utf-8',
            data: { ActionPage: 'CurrencyUnit', Action: 'FillDrop' },
            success: function (data) {
                var rows = data.rows;
                strOption = '<option value=0>انتخاب کنید</option>';
                if (data.rows.length > 0) {
                    for (var i = 0, l = rows.length; i < l; i++) {
                        var ri = rows[i];
                        strOption += '<option value="' + ri.cell[0] + '">' + ri.cell[1] + '</option>';
                    }
                }
            },
            dataType: 'json'
        });

        var $this = $(this);
        rows = this.rows;
        var l = rows.length, i, row;

        for (i = 0; i < l; i++) {
            row = rows[i];

//              var $t = grid.jqGrid('getCell', row.id, 'CURRENCY_ID');
//              var $id = $($t).attr("id");

//              $("#" + $id).val(strOption);
                    // console.log(row.id);

            var selRowId = grid.jqGrid('getGridParam', row.id);
               console.log(selRowId);
               console.log(grid.jqGrid('getCell', row.id, 'CURRENCY_ID'));

            if ($.inArray('jqgrow', row.className.split(' ')) >= 0) {
                $this.jqGrid('editRow', row.id, true);
            }

        }
    },
    editurl: "jQGridHandler.ashx"
});
grid.jqGrid('navGrid', '#pager', { add: true, edit: true, del: true }, {}, {}, {},
    { multipleSearch: true, overlay: false, width: 460 });

first question: this code is true? and i now i can't fill dropdownlist . please help me mr.Oleg. thanks

score 1 · Accepted Answer · edited May 23 '17 at 10:32

1

You can enumerate all rows in the grid and call editRow inside of loadComplete (see here for the code example). You should understand some disadvantages of the approach:

setting a line of grid in inline editing mode in the loop can work slowly in case of large number of rows. So you should carefully choose rowNum in the case. The reason of the slow performance is simple: every change of one element on the page follow to recalculation of positions of all other elements on the page or at least to reflow. editRow method change one cell in the row, then change another one and so on. Applying of editRow in the loop for all rows follows to reflow of the whole page after every cell modifications. In case of large grid you will have a lot of reflows.
If you will need to read information from editing rows you will need to do some tricks because getRowData and getCol will not work in the case. In the answer you can find the corresponding solution. If if would be enough for you to get last saved data you can use getLocalRow method.

UPDATED: The keyboard navigation between editable rows is in reality absolutely another question. Nevertheless you can bind keydownevent on the grid for example and change focus on the another cell if it's needed. For example the next demo shows for how Up and Down arrow keys can be used together with the standard Tab and Shift+Tab keys:

$('#list').keydown(function (e) {
    var $td = $(e.target).closest("td"),
        $tr = $td.closest("tr.jqgrow"),
        ci, ri, rows = this.rows;
    if ($td.length === 0 || $tr.length === 0) {
        return;
    }
    ci = $.jgrid.getCellIndex($td[0]);
    ri = $tr[0].rowIndex;
    if (e.keyCode === $.ui.keyCode.UP) { // 38
        if (ri > 0) {
            $(rows[ri-1].cells[ci]).find("input,select").focus();
        }
    }
    if (e.keyCode === $.ui.keyCode.DOWN) { // 40
        if (ri + 1 < rows.length) {
            $(rows[ri+1].cells[ci]).find("input,select").focus();
        }
    }
});

edited May 23 '17 at 10:32

Community

1
1

answered Jun 15 '12 at 11:25

Oleg

220,925
34
403
798

@ oleg: very thanks, but if i want when user prese down arrow key in keyboad focus go to next row, please help me. thanks. – Pouya Jun 15 '12 at 12:00
@MohsenBahrzadeh: I modified my answer to include additional keyboard navigation. You last question with modified code I can't understand. You use `editurl: 'jQGridHandler.ashx'` so the data will be *automatically* send to the server on saving. So you can call `saveRow` in the same loop as you call `editRow`. Every such call will send the current data from the row to the server. Your current code which use `calculateTotal` is unclear for me. – Oleg Jun 15 '12 at 13:37
@MohsenBahrzadeh: Sorry, but I explained you before that you have to call `saveRow` for all rows of the grid inside of `$("#btnsave").click(...)` to send the modified data to the server. Instead of that you call `calculateTotal` which do nothing important. Moreover the function `calculateTotal` use `getCol` which can't be used in editing mode (see my answer). Either you have to get data from `` elements of jqGrid manually (like I described in **UPDATED** part of [the answer](http://stackoverflow.com/a/5129908/315935)) or you have to stop editing by calling of `saveRow`. – Oleg Jun 15 '12 at 17:26
Mr Oleg I edit Question, please help me. this problem is very important. thanks. – Pouya Jun 25 '12 at 17:38
@MohsenBahrzadeh: You code have some problems. You use `url` and `dataInit` properties of [editoptions](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editoptions) instead of usage `dataUrl` and `buildSelect` (see [here](http://stackoverflow.com/a/4102155/315935) and [here](http://stackoverflow.com/a/7836314/315935)). Moreover I don't understand what do `$.ajax` inside of `loadComplete`. I suppose that it's your some old code which are not used now. – Oleg Jun 25 '12 at 19:48
@ Oleg: please check this page and help me. thanks. http://stackoverflow.com/questions/12242987/how-to-implement-inline-editining-in-jqgrid – Pouya Sep 03 '12 at 07:02

How to implement edit inline in jqgrid

1 Answers1