jquery - Enabling editGridRow method for all the pages of jqGrid -

the problem able edit dialog on click of link current page having 10 records.but when navigate second page, not getting edit dialog. please 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 row want edit");     } }); 

please reread my answer on previous question. should not use $('.getlink').click because registers link on currently existing a.getlink. $('.getlink') search existing elements, have class getlink , return array of dom elements jquery wrapper. .click register separate click handles on every of element. if user navigates second page, sort column or makes many other action, grid body recreated. created a.getlink elements removed , new rows (<tr> elements) new a.getlink inserted in grid body. elements have no event handler of cause. can fix problem moving $('.getlink').click inside of loadcomplete callback, recommend use beforeselectrow instead.

i wrote beforeselectrow already. explain more detailed here how works. elements of html page supports dom interface, includes methods onclick. it's important understand event processing (event flow) supports event bubbling, means upward propagation continue on parent elements document (see here). event handler may call stoppropagation method of event interface prevent further event propagation.

thus if user click on internal elements of table cells click event handlers fired not bound elements, event handler bound parent objects. if have grid on table#grid can register click handler on whole grid usage

jquery("#grid").click(function (e) {     // e.target represent dom element inside of table     // clicked });  

and event handler called on click on internal element of grid (for example on <span class="mylink">some text</span>). e.target gives full information clicked element. can use var $td = $(e.target).closest("td") or better var $td = $(e.target).closest("tr.jqgrow>td") go on top of dom hierarchy till cell of grid. returned value jquery wrapper dom element, represent <td> element. start name of corresponding javasvript variable $ make code more readable , stress it's jquery wrapper. $td[0] dom element. every td dom element supports cellindex property (see here , here). $td[0].cellindex index of column clicked , colmodel[$td[0].cellindex].name name of column, clicked (where var colmodel = $(this).jqgrid("getgridparam", "colmodel")). if need rowid (the value of id attribute of row <tr>) can use $td.closest("tr.jqgrow").attr("id").

the existing code of jqgrid contains code like

... var ts = this; // dom of 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 1 don't need register additional click handler. 1 can use beforeselectrow callback instead. 1 should don't forget return true allows selection of row.

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