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

            }

        ]

        });

    } else {

        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");

} 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

Angel, that fixed my problem thank you.

Sy

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);
                }
            });