CODEWITHSUNDEEP
jqueryjqgrid
Hansal Mehta
Hansal Mehta

Reputation: 195

How to read the JQgrid row values

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>

Upvotes: 0

Views: 563

Answers (1)

Oleg
Oleg

Reputation: 222017

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>

Upvotes: 1

Related Questions