Supreeth Supreeth - 18 days ago 6
jQuery Question

Enabling editGridRow method for all the pages of jqGrid

The problem is I am able to get the edit dialog on click of a link for the current Page having 10 records.But when i navigate to second page, I am not getting the edit dialog. Please help
Thanks in advance

colModel:{ name: "FirstName", index: "FirstName", width: 100, sortable: true, editable: true, formatter: GetRow, unformat: GetCellValue },

function GetRow(cellvalue, options, rowObject) {
return "<a href='#' class='GetLink'>" + cellvalue + "</a>";
}

$('.GetLink').click(function () {
var row = $('#grid').jqGrid('getGridParam', 'selrow');
if (row) {
$('#grid').jqGrid('editGridRow', row, { recreateForm: true, closeAfterEdit: true, closeOnEscape: true, reloadAfterSubmit: false,});
}
else {
alert("Select the row you want to edit");
}
});

Answer

Please reread my answer on your previous question. You should not use $('.GetLink').click because it registers the link on currently existing a.GetLink. To be exactly $('.GetLink') search for currently existing elements, which have the class GetLink and return array of the DOM elements as jQuery wrapper. By .click you register separate click handles on every of the element. If the user navigates to second page, sort by some column or makes many other action, the grid body will be recreated. All previously created a.GetLink elements will be removed and new rows (<tr> elements) with new a.GetLink will be inserted in the grid body. The elements will have no event handler of cause. You can fix the problem by moving $('.GetLink').click inside of loadComplete callback, but I would recommend you to use beforeSelectRow instead.

I wrote you about beforeSelectRow already. I explain more detailed here how it works. All elements of HTML page are supports DOM interface, which includes the methods like onclick. It's important to understand that event processing (event flow) supports event bubbling, which means upward propagation will continue on parent elements up to the Document (see here). Any event handler may call the stopPropagation method of the Event interface to prevent further event propagation.

Thus if the user click on internal elements of the table cells then the click event handlers will be fired not only bound to the elements, but the event handler bound to the parent objects. If you have grid on table#grid then you can register click handler on the whole grid by usage

jQuery("#grid").click(function (e) {
    // e.target represent the DOM element INSIDE of the table
    // which was clicked
}); 

and the event handler will be called on click on any internal element of the grid (for example on <span class="myLink">some text</span>). The e.target gives us full information about the clicked element. We can use var $td = $(e.target).closest("td") or better var $td = $(e.target).closest("tr.jqgrow>td") to go on top of the DOM hierarchy till the cell of grid. The returned value will be jQuery wrapper to the DOM element, which represent <td> element. I start the name of the corresponding JavaSvript variable with $ to make the code more readable and to stress that it's jQuery wrapper. Thus $td[0] will be the DOM element. Every td DOM element supports cellIndex property (see here and here). Thus $td[0].cellIndex is the index of the column clicked and colModel[$td[0].cellIndex].name is the name of the column, which is clicked (where var colModel = $(this).jqGrid("getGridParam", "colModel")). If you need to get the rowid (the value of id attribute of the row <tr>) then you can use $td.closest("tr.jqgrow").attr("id").

The existing code of jqGrid contains the code like

...
var ts = this; // the DOM of the grid
...
$(ts).click(function (e) {
    ...
    var rowid = $(e.target)("tr.jqgrow").attr("id");
    ...
    if ($.isFunction(p.beforeSelectRow)) {
        var isAllowSelection = p.beforeSelectRow.call(ts, rowid, e);
        if (isAllowSelection) {
            ...
        }
    }

})

Thus one don't need to register additional click handler. One can use beforeSelectRow callback instead. One should just don't forget to return true to allows selection of the row.

The demo https://jsfiddle.net/wugfty1o/3/ demonstrates the usage of beforeSelectRow.