Hi,
I have an igGrid which gets loaded with data from a sql table. I have a button which does an ajax call to a controller method which inturn runs some processes and ends up making updates to the data at the backend. I'm trying to refresh the grid data on the success of thart ajax call. I'm using $("<gridID>").igGrid("dataBind") in the success section,but, I don't see anything happening. Does dataBind automatically makes a call to sql backend to get data and then bind it? Or will I have to get the updated data manually and then bind it to the grid.
Regards,
Guru
Hello Guru,
Thank you for posting in our forum.
The igGrid’s “dataBind” method rebinds the igGrid to the local or remote data source and re-renders it, but it doesn’t make any changes to your SQL backend.
In case you are using a local data source, what you could do is the following:
Your code may look something like this: $.ajax({
url: 'theUrlToYourBackend',
data: {
format: 'json'
},
success: function (data) {
$("#grid").igGrid("option", "dataSource", data);
type: 'GET'
});
If you need any additional assistance, feel free to contact me.
Best Regards,
Vasil Pavlov
Associate Software Developer
Infragistics, Inc.
Hi Vasil,
Thanks for replying :) I'm not updating the sql table using the data in grid. The data in the sql table is already updated. I'm trying to refresh the igGrid to show updated data. The code is something like below:
$.ajax({ type: "POST", contentType: "application/json; charset=utf-8;",
//This updates the sql table (the same one which feeds the igGrid) at the back end using some other process (The data to be updated is NOT coming from the grid) url: "/Home/ProcessRequests/UpdateData",
dataType: 'json', success: function (resp) { if (resp.success) { //If the call was successful, I'm trying to refresh the grid to show updated data. $("#invGrid").igGrid("dataBind"); } else { //Show Error on a div.'resultsView' is a div id. $("#resultsView").text(resp.error); } }, error: function (jqXHR, status, error) { var errormsg = ''; errormsg += ('Message:' + error + '<br />'); if (jqXHR != null) { errormsg += ('Status Text:' + jqXHR.statusText + '<br />'); errormsg += ('Response Text:' + jqXHR.responseText); } $("#resultsView").html(errormsg); },});
Thank you for the clarification and the snippet.
As I don’t have your backend code, if your controller sends the new data to the grid in the ajax response as JSON, then you could modify your success callback with the code I showed you and it should work fine.
In my case, I have been updating data upon row edit end. I successfully refresh the updated data but I lost row focus.
So every time when i change data, it goes to the first row of the grid.
How can I keep the focus on next row after editing?
Hello Khuram,
A possible approach would be to get the rowID (this is the primaryKey) of the currently edited row in the rowEditEnded event handler. It could be used afterwards in order to find the ID of the next row, which in turn could be used as a parameter for the startEdit method from the igGridUpdating API.
Do you use numeric primary keys, or some string values instead? If you are using numbers you could just increment the number and it would give you the next rowID, otherwise the rowID from the rowEditEnded handler could be used to call the rowAt method and get the last edited row's index. Finding the row with an index bigger by 1 and getting its rowID would allow the startEdit method to be called.