0

I am using jqGrid form Edit with templating from the link in Here

But Whenever a user clicks Edit/View I don't want to rely on the data which is on the grid but I want to get a new fresh data from the server and populate the form.

So I have the following jquery function which gets fresh data on the row being Edited,

function GetItem(id) {
    $.ajax({
        url: '/Asset/GetSingleItem/'+id,
        type: 'GET',
        success: function (data) {
            //Data is the json that i want to show on my Edit form.
        }
    });
}

I guess the solution is to override the OnRowEdit/View of the jqgrid and do some trick.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Helen Araya
  • 1,886
  • 3
  • 28
  • 54

1 Answers1

1

You could start $.ajax request in the beforeShowForm callback of form editing for example (see the documentation). Inside of success handler you can compare the data returned from the server with the data in the edit form. You need just know that the id of every field of the form is the same as the value of the name property in the corresponding column of colModel. If the server response have more recent data you can set the properties in the from (using $.val) and to use setRowData to refresh the row data in the grid too. The hidden filed of the form with id="id_g" can be used to get the rowid of editing row ($("#id_g").val()).

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Oleg. Do you think there is a better way of doing this instead of replacing the form values. This sounds like inefficient creating the form with old values then replacing it. Like before Create Form instead of on before Show Form. – Helen Araya Dec 01 '15 at 21:19
  • @Amete: The Ajax call works **asynchronously**. Making synchronous call and blocking the page is not good. Thus I think that displaying old values and refreshing there (if anyone really changed) is the best for the user. Updating the field of the grid is very simple you need just make (in symplified form) `var prop, oldVal, $field; for (prop in data) { if (data.hasOwnProperty(prop)) { $field = $("#" + prop); oldVal = $field.val(); if (oldVal !== data[prop]) { $field.val(data[prop]); }} }`. The details depend on the format of data, the type of input data and some other details. – Oleg Dec 01 '15 at 21:41
  • I have to add this to the beforeShowForm function or somewhere else? – Helen Araya Dec 01 '15 at 21:53
  • @Amete: Yes, you should first place `$.ajax` call inside of `beforeShowForm` callback and then place the code like I posted inside of `success` handler of `$.ajax`. The `data` parameter of the `success` handler will be the data returned from the server. – Oleg Dec 01 '15 at 22:03
  • That's what I did and its working well. I just wanted to make sure. Thanks Oleg! – Helen Araya Dec 01 '15 at 22:05
  • I might be also worth to note that there is a beforeInitData: function (formid) { console.log("beforeInitData"); }); Which gets called before the beforeShowForm and the form fields are empty at that point. – Helen Araya Dec 02 '15 at 18:11
  • @Amete: The callback `beforeInitData` will be called *too early*, **before** any field of Edit form are filled. It was the reason, why I recommended you to use `beforeShowForm` instead. – Oleg Dec 02 '15 at 18:26
  • Can you check my Question in http://stackoverflow.com/questions/34025837/jqgrid-form-edit-view-cutomizing-the-template-form-data – Helen Araya Dec 03 '15 at 16:47
  • @Amete: I looked [the question](http://stackoverflow.com/q/34053638/315935). It seems that you use [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334), but I develop *alternative fork* [free jqGrid](https://github.com/free-jqgrid/jqGrid). I can't help you with Guriddo. Nevertheless I looked in the code of Guriddo. One can see the `template` parameter will be supported **only for Add/Edit form, but not in View form**. It's the reason why the code from your question not work and it can't work. – Oleg Dec 03 '15 at 23:22