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
Can someone please give some input on this. If I am not expaining well then let me know. We are planning on including the grid in our next product launch, but we need to get this working before we can release it.
thanks
sy
hi,
could you clarify a bit some things for me, so that it becomes more clear what your scenario is:
1) Are you using grid's filtering?
2) are you filtering through the UI, or using the API , that is , by calling filter() ?
3) are you rebinding the grid, and if so - how ? or you are recreating the whole widget instead ?
Also some code snippet would greatly help.
Let me know, and i'd be glad to resolve the issue for you. Thank you,
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);
} else {
window.open(getURLFolder() + 'orderdetail.aspx?id=' + $(cell).text(), '_self', false);
}
name: 'Filtering',
type: "local",
filterDropDownItemIcons: false,
filterDropDownWidth: 200
]
});
alert('No Records Found');
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");
// 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
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.