If my grid is already populated and i try to do another search i get an error. i have attached a screen shot of it. I am sure it is very simple to fix, but i couldn't find anything in the help forums about resetting the grid without refreshing the page.
Thanks,
Sy
Hi triffle,Correct me if I'm wrong, but I believe we're already discussing the same issue in another thread (How to bind igGrid to server side object.)If that is so, can you please keep all communication regarding this scenario in one thread?(it will be much better in terms of keeping track of how the discussion is processing and to assist you with the solution)Thank you,Borislav
I cannot refresh my grid no matter what I try. Here's my attempt:
function getData() { $.ajax({ type: 'POST', url: 'SearchService.asmx/SearchEntity', data: "{SearchCriteria: '" + $("#SearchText").val() + "'}", contentType: 'application/json; charset=utf-8', dataType: 'json', success: function (msg) { $("#SearchResults").igGrid({ autoGenerateColumns: false, columns: [ { headerText: "Id", key: "Id", width: "50px", dataType: "number" }, { headerText: "Name", key: "Name", width: "100px", dataType: "string" }, { headerText: "Age", key: "Age", width: "50px", dataType: "string" }, { headerText: "Address", key: "Address", width: "100px", dataType: "string" } ], dataSourceType: 'json', dataSource: msg, height: '300px' }); //var grid = $("#SearchResults").igGrid('dataBind')[0]; }, error: function (xhr, ajaxOptions, thrownError) { alert("Something bad happened. Code: " + xhr.status + ". Error: " + xhr.responseText); } });
Angel, that fixed my problem thank you.
Hey,
if your filtering is local, the end users can clear their previous search, and search again, all on the client. I am not sure why you need to rebind the whole grid, if all information about the orders is available on the client, and the end user just searches through the already fetched orders (that is, filtering is local).
But if you want to apply the above code, you can check if the widget already exists, and then just rebind the grid, without recreating it:
if ($("#ordersearch").data("igGrid")) {
// just rebind the grid with the new data, it's already created
$("#ordersearch").igGrid("dataSourceObject", data.json); // set the new data, this isn't necessary if you are binding to a remoteUrl
$("#ordersearch").igGrid("dataBind");
} else {
// your code to create the grid goes here
}
you can also always destroy the grid using $("ordersearch").igGrid("destroy") and create it again using your original code, but that wouldn't be necessary if you just want to rebind it.
Hope it helps. Let me know if it works, Thanks
Angel
1. Yes
2. doing through the UI.
3. this is where i am not doing it right i think.
All i want to do is to refresh the datasource of the grid if the user wants to do a different search. So user comes in and searches for an order and the grids gets populated. He then wants to look for another order without doing any post backs all in the UI. The second time he would do a search is where the error is occurring because the grid already exist.
Here is the code for the grid I am using. The data source comes from an ajax call that is made on the search. I hope this makes sense.
if (data.count > 0) {
$("#ordersearch").igGrid({
autoGenerateColumns: false,
columns: [
{ headerText: "Order #", key: "OrderNumber", dataType: "string" },
{ headerText: "Name", key: "CompanyName", dataType: "string" },
{ headerText: "Order Date", key: "OrderDate", dataType: "date" },
{ headerText: "Status", key: "OrderStatus", dataType: "string" },
{ headerText: "Total", key: "OrderTotal", dataType: "number", format: "currency" }
],
dataSourceType: 'json',
dataSource: data.json,
width: '100%',
height: '500px',
features: [
{
name: 'Paging',
type: 'local',
pageSize: 13
},
name: 'Sorting',
type: "local"
name: 'Selection',
mode: 'row',
rowSelectionChanging: function (ui, args) {
var cell = $("#ordersearch").igGrid('cellAt', 0, args.row.index);
console.log('rowSelectionChanging event fired. Row Index = ' + args.row.index + '-' + $(cell).text());
if (data.NewWindow == 'true') {
window.open(getURLFolder() + 'orderdetail.aspx?id=' + $(cell).text(), false);
window.open(getURLFolder() + 'orderdetail.aspx?id=' + $(cell).text(), '_self', false);
name: 'Filtering',
type: "local",
filterDropDownItemIcons: false,
filterDropDownWidth: 200
]
});
alert('No Records Found');