jqgrid - extending addRowData

Question

Thanks to Oleg, I have the solution to adding a row anywhere in the grid. BUT I want this functionality

NOT when there is an "Add" link in the inlineNav
BUT when I click on the jqgrid caption - MY JQGRID

Is it possible?

HTML

<table id="myjqgrid"></table>
<div id="pager"></div>

JQGRID

$(document).ready(function () {
    var oldAddRowData = $.fn.jqGrid.addRowData;
    var mydata = [
        { id: "1",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
        { id: "2",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
        { id: "3",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
        { id: "4",  invdate: "2007-10-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
        { id: "5",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
        { id: "6",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
        { id: "7",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
        { id: "8",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
        { id: "9",  invdate: "2007-09-01", name: "test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
        { id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
        { id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
        { id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
    ]
    $.jgrid.extend({
        addRowData: function (rowid, rdata, pos, src) {
            if (pos === 'afterSelected' || pos === 'beforeSelected') {
                if (typeof src === 'undefined' && this[0].p.selrow !== null) {
                    src = this[0].p.selrow;
                    pos = (pos === "afterSelected") ? 'after' : 'before';
                } else {
                    pos = (pos === "afterSelected") ? 'last' : 'first';
                }
            }
            return oldAddRowData.call(this, rowid, rdata, pos, src);
        }
    });

    $("#myjqgrid").jqGrid({
        datatype: 'local',
        data: mydata,
        colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
        colModel: [
            {name: 'invdate', index: 'invdate', width: 80, align: 'center', editable: true},
            {name: 'name', index: 'name', editable: true, width: 65},
            {name: 'amount', index: 'amount', width: 75},
            {name: 'tax', index: 'tax', width: 52},
            {name: 'total', index: 'total', width: 60},
            {name: 'closed', index: 'closed', width: 70, align: 'center', editable: true},
            {name: 'ship_via', index: 'ship_via', width: 105, align: 'center', editable: true},
            {name: 'note', index: 'note', width: 60, sortable: false, editable: true}
        ],
        rowNum: 10,
        rowList: [5, 10, 20],
        pager: '#pager',
        gridview: true,
        rownumbers: true,
        width: 1020,
        sortable: true,
        sortname: 'invdate',
        viewrecords: true,
        sortorder: 'desc',
        height: '100%',
        caption: 'MY JQGRID',
        editurl: 'clientArray'
   });
   $("#myjqgrid").jqGrid('navGrid', '#pager');            
   $("#myjqgrid").jqGrid('inlineNav', '#pager', {
        edittext: "Edit",
        addtext: "Add",
        savetext: "Save",
        canceltext: "Cancel",
        addParams: { position: "afterSelected" }
   });
});

Sorry, but I don't understand what you want to implement. Could you reformulate your question and describe more clear what you want to have. Do you want to use `inlineNav`? If yon **NOT** want to us "afterSelected" on "Add" button added by `inlineNav` why you use the parameter? How I understand your current question you want create new row after the selected one if the user click on the caption (???) of jqGrid. Do you want to add some additional button n the capture? The capture (the title bar) are standard GUI element. Do you really want to use it as the "Add" button? — Oleg, Feb 11 '12 at 11:41
No, I don't want to use `inlineNav`. Yes, I want to create a new row if the user clicks on the caption...and the value of the `pos` can be any valid value, not necessarily `afterSelected`. — techlead, Feb 12 '12 at 23:05

score 0 · Answer 1 · edited May 23 '17 at 12:27

How you understand your question you want to bind event handler to the click on the caption of the grid. The structure of grid elements are described for example here. So you can just select the capture of the grid by the following selector

#gview_myjqgrid>div.ui-jqgrid-titlebar

and bind any event handler which you need. For example

$('#gview_' + $.jgrid.jqID($grid[0].id) + '>div.ui-jqgrid-titlebar').click(function () {
    alert("The caption (the titlebar) is clicked");
});

Nevertheless I would not recommend you implement adding new row on click on the capture header. The problem is that the power of many modern GUI used in operation system and different software is the standard user interface. So the user don't need to study every new program which the user need to use. It saves much money for the training and allows to use programs immediately after buying and downloading from the internet for example. So if you have such requirements from the customers you can discuss with the customer the requirements one more time and recommend to insert an add button directly in the capture. It will allow new users to guess the functionality with you implement without any training too.

my question was how to call `$.jgrid.extend({...})` from within the `click` event handler. — techlead, Feb 16 '12 at 16:35
@SK11: There are default implementation of the **global** defined function `$.fn.jqGrid.addRowData`. If you want to change the implementation to another one you should do this **once**. To overwrite `$.fn.jqGrid.addRowData` you should use `$.jgrid.extend({addRowData: ...});` you should do this *not* from within any event handler. Please reread what you wrote in the question. What you wrote in the question means that you want to be able *to add a row in the grid when you click on the caption of jqGrid*. If it is not what you really need you should change the text of your question. — Oleg, Feb 16 '12 at 17:46

jqgrid - extending addRowData

1 Answers1

Linked