Navigating to Particular Page in kendo Grid

[SAJID]

Hi,

I have grid and need to search a record(By matching) and navigate the default page to  matching record's page on page load. E.g. I have a record called "Item 20" which is in Page 10. I need to pass "Item 20" and navigate the grid to page 10 on load by default.

Any help on this will be great support.

Thanks,

[Kiril Nikolov]

Hello Sajid,

You can use the built-in page() method for the Kendo UI Grid DataSource in order to go directly to a certain page when the grid is loaded. For your convenience I prepared a small sample.

If you want to read more about the paging functionality of the DataSource please check the corresponding documentation:

http://docs.kendoui.com/api/framework/datasource#methods-page

Regards,
Kiril Nikolov
Telerik

[SAJID]

Hi Kiril,

Thanks for the reply. But in the example you know the page number and so directly to entered it. But,  my case i need to  identify the page number dynamically for particular record and navigate to that page.

Thanks,

[Kiril Nikolov]

Hello Sajid,

 
You can use the dataSource indexOf() method to get the index of your item. After that based on your page size you can calculate where the element you are looking  for will be displayed.

Here is how you can do it:

var index = dataSource.indexOf(dataItem);


Regards,
Kiril Nikolov
Telerik

[SAJID]

Hi Kiril,

Below is the code i use.

var grid = $('#girdName').data('kendoGrid');
            var index = "";
            var SearchString = "MM";
            dataSource = grid.dataSource;

            grid.bind('dataBound', function (e) {

                $.each(grid.tbody.find('tr'), function () {
                    var model = grid.dataItem(this);
                    if (model.SupplierName == SearchString) {
                        $('[data-uid=' + model.uid + ']').addClass('k-state-selected');
                        index = dataSource.indexOf(model); 
                        alert("index:" + index);
                    }
                });

But the above code loops only to  the current page records (my page size is 10). When i click the 2nd page it loops from 11-20. But my case the record is in 4 page.Please help.

Thanks,

[Kiril Nikolov]

Hello Sajid,

At the moment you are looping only through the current page of the grid, and this is why you cannot see the item if, for example, it is part of page 4.
I would suggest to loop through your DataSource in order to find the item that you are looking for, and not through the Grid itself. Then you can pass the page index of the item and load directly to that page.


Regards,
Kiril Nikolov
Telerik

[SAJID]

Hi Kiril,

Can you please provide an example? It will be helpful. Thanks

[SAJID]

Hi Kiril,

Found the answer below is the code.

 grid.bind('dataBound', function (e) {
                $.each(grid.dataSource.data(), function (idx, elem) {
                    if (elem.SubSupplierName == SearchString) {
                        $('[data-uid=' + elem.uid + ']').addClass('k-state-selected');
                        index = Math.floor(idx / grid.dataSource.pageSize() + 1);
                    }
                });
                
            });

Thanks for your support.