1

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?

Oleg
  • 220,925
  • 34
  • 403
  • 798
ifti24
  • 191
  • 1
  • 5
  • 22

1 Answers1

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)

enter image description here

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • So kind of you. And yes you are right. I have checked your old demo and started to adding images in dataGrid. I have another question. If you don't mind I want to ask that question here, as they are related. In this Edit record window, I want to give a file button for changing the Flag. And when the user will submit the edit form(means, press the submit button), the changed value of the file input type and country will be submitted. I hope you understood my question. – ifti24 Sep 18 '14 at 16:58
  • Here in your demo, you have used row id as a part of the image name. but suppose I have created the image name by the primary key of the record. Like {recordPrimarykey}_flag.gif . the primary key is hidden:true and not visible in the grid row. Now how can I get the primary key value of the selected row inside afterclickPgButtons method? – ifti24 Sep 18 '14 at 17:02
  • @ifti24: You are welcome! Sorry, but I never used `file` button. I recommend you to ask new question where you describe the problem. Probably something else will help you. You can try to use more tags as `jqgrid` because the problem is mostly HTML/jQuery problem. – Oleg Sep 18 '14 at 17:03
  • Thank you so much for your quick reply. I will always remember you. – ifti24 Sep 18 '14 at 17:08
  • @ifti24: If you use primary key then you should typically fill `id` attribute of input data or use `jsonReader: {id: "recordPrimarykeyPropertyName"}`. No hidden column is required and jqGrid will use the value from input data as the rowid. If you do need to have hidden column because of some other reasons you can add `key: true` property in the column definition. It will make the value of `id` attribut of every row (rowid) the same as the value in the column. The last case: if you know rowid you can use `$(this).jGrid("getCell", rowid, "colName")` to get the value of the hidden column. – Oleg Sep 18 '14 at 17:09
  • @ifti24: You are welcome! I'm glad to know that I could help you. – Oleg Sep 18 '14 at 17:09