0

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");
    }
});
Supreeth
  • 9
  • 6
  • Please reread my answer on your [previous question](http://stackoverflow.com/a/40652291/315935). You should **now use** `$('.GetLink').click` because it register the link on **currently existing** `a.GetLink`. If the user navigates to second page or sort by some column, the grid body will be **recreated**. All previously created `a.GetLink` will be removed and new `a.GetLink` will have no event handler. You can fix the problem by moving `$('.GetLink').click` inside of `loadComplete`, but I would recommend you to use `beforeSelectRow` instead. – Oleg Nov 17 '16 at 14:27
  • @Oleg Can you please tell how to use $('.GetLink').click inside loadcomplete event or beforeSelectRow... I am not aware of these events.. – Supreeth Nov 17 '16 at 18:40
  • It would be better if you include more full code, which you use or if you create the demo in JSFiddle, for example, which demonstrates the problem and I would fix the code. – Oleg Nov 17 '16 at 19:36
  • I made the demo: https://jsfiddle.net/wugfty1o/3/ which demonstrats how one can implement "onClick" using the custom formatter and `beforeSelectRow`. – Oleg Nov 17 '16 at 19:55
  • @Oleg Please do find the code in JsFiddle [Demo](https://jsfiddle.net/21rva8fw/) – Supreeth Nov 18 '16 at 05:31
  • Your demo (https://jsfiddle.net/21rva8fw/) don't use any jqGrid, don't load any data and contains a tot of other values. Moreover you use **grouping** in the field where you use custom formatting. I have no idea, where you want to use custom formatting and where you need to implement custom onclick behavior. Do you seen the demo https://jsfiddle.net/wugfty1o/3/ which I created for you? – Oleg Nov 18 '16 at 06:27
  • @Oleg I have invoked the web Service method (EmployeeInsert.asmx/GetEmployees) which basically loads the data from Sql server... I used the click function inside beforeSelectRow as suggested by you and now it is working fine...Thanks But i don't understand the events....Can you explain beforeSelectRow If you have some study materials on jqGrid..I am new to to this...Send me some link.... Thank You – Supreeth Nov 18 '16 at 06:32

1 Answers1

0

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798