How to read the JQgrid row values

Question

I am working on Jqgrid trying to get the rows values on Context menu click event but i am not able to get it ..Here is the code that i am trying to use to get the row values but not succeeding ..

loadComplete: function () {
 $("tr", this).contextMenu('myMenu1', {
 bindings: {
 'Reservation': function (trigger) {   
  var rowData = $(this).jqGrid('getRowData', trigger.id);
  var coldata = rowData.RoomNo;
  alert(coldata);
  addTab('Reservation', '');
 }

Please help me to correct the error..Thanks ..

And here is my HTML..

<div class="contextMenu" id="myMenu1" style="display:none; width:auto;">
    <ul style="width: 200px;">
     <li id="Reservation">
            <span class="ui-icon ui-icon-pencil" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Reservation</span>
        </li>
</ul>
</div>

@GusDB I have updated my post with Context Menu HTML ..PLease see it..Sorry as it is using JQgrid so i dont know how to create fiddle for it.. — Hansal Mehta, Oct 31 '14 at 10:41
@A.Wolff MY `alert(coldata);` is not alerting me any thing .alert is not getting fired — Hansal Mehta, Oct 31 '14 at 10:43
@A.Wolff I am getting error as `this.grid is undefined` in error console of browser — Hansal Mehta, Oct 31 '14 at 10:52
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/64002/discussion-between-hansal-mehta-and-a-wolff). — Hansal Mehta, Oct 31 '14 at 10:58
@A.Wolff How to fix it sir ..Please help me ..I am new bie for jquery and jqgrid — Hansal Mehta, Oct 31 '14 at 11:00
@HansalMehta please learn how to debug javascript, i'm sorry but looks like taking really too much time to fix your issue if you don't show any effort to resolve it by your self so... http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code — A. Wolff, Oct 31 '14 at 11:03

Oleg · Accepted Answer · 2014-10-31T12:10:53.800

It seems to me that the main problem is the usage of $(this). You should save the value of $(this) in a variable inside of loadComplete and then use it inside of Reservation callback. The code could be like the following

loadComplete: function () {
    var $self = $(this); // save `this`

    $self.find(">tbody>tr.jqgrow").contextMenu("myMenu1", {
        bindings: {
           Reservation: function (trigger) {
               var rowData = $self.jqGrid("getRowData", trigger.id);
               var coldata = rowData.RoomNo;
               alert(coldata);
           }
        }
    });
}

UPDATED: To set width: 200px for the context menu one should use menuStyle: {width: "200px"} option of contextMenu plugin:

$(function () {
    "use strict";
    var mydata = [
            { id: "10",  invdate: "2007-10-01", name: "test1",  note: "note1",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
            { id: "20",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
            { id: "30",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
            { id: "40",  invdate: "2007-10-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
            { id: "50",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
            { id: "60",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
            { id: "70",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
            { id: "80",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
            { id: "90",  invdate: "2007-09-01", name: "test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
            { id: "100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
            { id: "110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
            { id: "120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
        ],
        $grid = $("#list"),
        initDateEdit = function (elem) {
            $(elem).datepicker({
                dateFormat: "dd-M-yy",
                autoSize: true,
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                showWeek: true
            });
        },
        initDateSearch = function (elem) {
            var $self = $(this);
            setTimeout(function () {
                $(elem).datepicker({
                    dateFormat: "dd-M-yy",
                    autoSize: true,
                    changeYear: true,
                    changeMonth: true,
                    showWeek: true,
                    showButtonPanel: true,
                    onSelect: function () {
                        if (this.id.substr(0, 3) === "gs_") {
                            // call triggerToolbar only in case of searching toolbar
                            setTimeout(function () {
                                $self[0].triggerToolbar();
                            }, 100);
                        }
                    }
                });
            }, 100);
        },
        numberTemplate = {formatter: "number", align: "right", sorttype: "number",
            editrules: {number: true, required: true},
            searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }};

    $grid.jqGrid({
        datatype: "local",
        data: mydata,
        colNames: ["Client", "Date", "Closed", "Shipped via", "Notes", "Tax", "Amount", "Total"],
        colModel: [
            { name: "name", align: "center", editable: true, width: 65, editrules: {required: true} },
            { name: "invdate", width: 80, align: "center", sorttype: "date",
                formatter: "date", formatoptions: { newformat: "d-M-Y" }, editable: true, datefmt: "d-M-Y",
                editoptions: { dataInit: initDateEdit },
                searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
            { name: "closed", width: 70, align: "center", editable: true, formatter: "checkbox",
                edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
                stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
            { name: "ship_via", width: 105, align: "center", editable: true, formatter: "select",
                edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
                stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
            { name: "note", width: 60, sortable: false, editable: true, edittype: "textarea" },
            { name: "tax", width: 52, editable: true, template: numberTemplate, hidden: true  },
            { name: "amount", width: 75, editable: true, template: numberTemplate },
            { name: "total", width: 60, template: numberTemplate }
        ],
        rowNum: 10,
        rowList: [5, 10, 20],
        pager: "#pager",
        gridview: true,
        autoencode: true,
        ignoreCase: true,
        sortname: "name",
        viewrecords: true,
        sortorder: "desc",
        rownumbers: true,
        shrinkToFit: false,
        height: "auto",
        beforeSelectRow: function (rowid, e) {
            var $self = $(this), selectedRowid = $self.jqGrid("getGridParam", "selrow");

            if (selectedRowid === rowid) {
                $self.jqGrid("resetSelection");
            } else {
                $self.jqGrid("setSelection", rowid, true, e);
            }

            return false; // don't process the standard selection
        },
        loadComplete: function () {
            var $self = $(this);
            $self.find(">tbody>tr.jqgrow").contextMenu("myMenu1", {
                bindings: {
                   Reservation: function (trigger) {
                       var rowData = $self.jqGrid("getRowData", trigger.id);
                       var coldata = rowData.name;
                       alert(coldata);
                   }
                },
                menuStyle: {
                    width: "200px"
                }
            });
        }
    });
    $grid.jqGrid("navGrid", "#pager");
});

.ui-jqgrid-hdiv { overflow-y: hidden; }

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/jquery.contextmenu.js"></script>
<table id="list"><tr><td></td></tr></table>
    <div id="pager"></div>
    <div class="contextMenu" id="myMenu1" style="display:none;">
    <ul>
     <li id="Reservation">
            <span class="ui-icon ui-icon-pencil" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Reservation</span>
        </li>
    </ul>
    </div>

Sir if i have to increase the width of `ConetxtMenu` .How can i do it here ..For Context Menu HTML ..Please see my above post ..Context menu HTML is there — Hansal Mehta, Oct 31 '14 at 11:29
@HansalMehta: `
` should be replaced to `
`, but you can use `menuStyle` option of `contextMenu`: `.contextMenu("myMenu1", { bindings: {...}, menuStyle: { width: "200px"} });`. I think one can use `menuStyle: { width: "auto" }` too. — Oleg, Oct 31 '14 at 11:46
OK ..Thanks for your suggestion..If you can see the HTML code for context menu in my post there i have used `width:auto` only but it is not working ..MY options are coming in two lines ..Also ,So please help me as how can i use the context menu style option in my code.Thanks — Hansal Mehta, Oct 31 '14 at 11:57
@HansalMehta: Do you tried to add `menuStyle: { width: "200px"}` option of `contextMenu` method? It works in my tests. — Oleg, Oct 31 '14 at 12:05
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/64018/discussion-between-hansal-mehta-and-oleg). — Hansal Mehta, Oct 31 '14 at 12:09
I have to go away for 30 min. See **UPDATED** part with the demo — Oleg, Oct 31 '14 at 12:11
Once again thank you very much sir ...It worked as always..Thanks — Hansal Mehta, Oct 31 '14 at 12:17
Dear Sir I am getting one more issue in Jqgrid and that is if i am trying to add more data to what it has been there in the local data variable then it is not getting displayed in Jqgrid..I am not getting Why ...Will you please see it ..I have updated the post with Full code for JQgrid..Thanks — Hansal Mehta, Oct 31 '14 at 13:00
Hello Sir ..Are you helping me on this ...Please help me sir ..I need to add multiple rows data in the JQgrid — Hansal Mehta, Oct 31 '14 at 13:07
Can you please see my code and tell me the possible reason of the issue..Please sir this is my last seeking help for this post — Hansal Mehta, Oct 31 '14 at 13:19
@HansalMehta: It's very simple. jqGrid uses paging. The default value of `rowNum` is 20 (see [the documentation](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options)). So you should either add `rowNum: 10000` for example in the grid or add the pager wither by `toppager: true` or by usage of `pager` parameter. I recommend you additionally to add `gridview: true, autoencode: true` option to the grid. You can replace the current `colModel` to `colModel: [{name: 'RoomNo'},{name: 'Category'},{name: 'Status'}], cmTemplate: {width: 100, align: 'center'}` — Oleg, Oct 31 '14 at 13:21

How to read the JQgrid row values

1 Answers1