refreshing grid on new search

This post has 7 Replies | 4 Followers

saevar
Points 300
Replied On: Thu, Sep 8 2011 10:27 AM

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


  • Post Points: 5
saevar
Points 300
Replied On: Fri, Sep 9 2011 1:35 AM

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

  • Post Points: 20
Alexander Todorov
Points 24,656
Infragistics Employee
Replied On: Fri, Sep 9 2011 4:09 AM

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

  • Post Points: 20
saevar
Points 300
Replied On: Fri, Sep 9 2011 8:41 AM

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

    }

  • Post Points: 20
Alexander Todorov
Points 24,656
Infragistics Employee
Replied On: Sat, Sep 10 2011 5:22 AM

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

  • Post Points: 20
saevar
Points 300
Replied On: Sun, Sep 11 2011 8:47 AM

Angel, that fixed my problem thank you.

Sy

  • Post Points: 20
triffle
Points 335
Replied On: Thu, Apr 26 2012 6:29 PM

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

  • Post Points: 20
Replied On: Thu, Apr 26 2012 7:00 PM

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 

  • Post Points: 5
Page 1 of 1 (8 items) | RSS