jqGrid : Image not changing in edit window when pr

Question

I have a jqGrid and in which there is a column which holds an image. When the user click on the edit icon from the page then in the edit window the photo is visible and that has been done by the following command in the edit section of the navGrid -

recreateForm: true,
beforeInitData: function () {
    var cm = jQuery("#list3").jqGrid('getColProp', 'img'),
    selRowId = jQuery("#list3").jqGrid('getGridParam', 'selrow');
    cm.editoptions.src = '/BDED_WEB/resources/images/user'+selRowId+'.jpg';
}                

But if I want to go back and forward to the data set by pressing the previous and next arrow in the edit window, then all the data changed but the image is not changing. That means the beforeInitData method is not getting called when the user is clicking on pData or nData button.

How can I change the image also in the edit window when the user press the next and previous arrow buttons?

Answer 1

It looks like you use the demo which I created for the answer.

To implement changing of the image on clicking on the "Next", "Prev" buttons of the edit form (marked yellow on the image below)

one can use afterclickPgButtons callback which set src attribute.

afterclickPgButtons: function () {
    var $self = $(this),
        selRowId = $self.jqGrid("getGridParam", "selrow");
    // "img" below is the column name which have edittype: "image"
    $("#img").attr("src", "/BDED_WEB/resources/images/user" + selRowId + ".jpg");
}

The demo demonstrates the modified version of the original demo.