Get page number based on selected row

[Stefan]

Hi there,

I have a page with a grid, and on data bound, a specific item in the grid is set to selected via adding the k-state-selected class. Is there a way to determine on what page of the grid this item is? After ​adding the selected class, I'd like to set the grid to that page.

Thanks,
Stefan.

[Kiril Nikolov]

Hello Stefan,

 

How do you set the class on the item? Are you using the the select() method, as explained here:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-select

 

In general the Kendo UI Grid will load only a pageSize number of items, so getting an item that is not currently displayed will not be possible. So would you please send a isolated runnable example of what you are currently doing, so we can see what we might suggest.

 

Regards,
Kiril Nikolov
Telerik

[Stefan]

Hi Kiril,

Thanks for the reply. I use a different approach for selecting the row. On my page, there is a hidden element, SelectedRevisionID, that has the ​ID of the Revision that should be selected in the grid when the page loads. Here's my DataBound event for the grid that does that:

01.function dataBoundRevisionsGrid(e) {
02.        var revisionsGrid = $("#RevisionsGrid").data("kendoGrid");
03.
04.        @* Find the row with the same RevisionID as the SelectedRevisionID element and add the k-state-selected class *@
05.        $.each(revisionsGrid.tbody.find("tr"), function () {
06.            var model = revisionsGrid.dataItem(this);
07.
08.            if (model.RevisionID == $("#SelectedRevisionID").val()) {
09.                $("[data-uid=" + model.uid + "]").addClass("k-state-selected");
10.            }
11.        });
12.    }

I didn't think that the grid would be aware of a given item's page, but thought I'd ask. In the interim, I've disabled paging on the grid, so that when the item is selected on databound, the user simply has to scroll the grid to find the highlighted row. Ideally, I'd like to ​re-enable paging as I'm not sure how many rows a typical user will have in this grid, and I'd rather not have to deal with JSON maxlength issues later on, etc.

Thanks,
Stefan.

[Kiril Nikolov]

Hello Stefan,

 

Please check the following approach that searches for a dataItem in the dataSource and give the page number of the item. Here it is:

 

http://dojo.telerik.com/ePibI

 

Regards,
Kiril Nikolov
Telerik

[Stefan]

This was so close, so thank you for that Kiril, but unfortunately, when I look into the .data() on my grid, it only has the items from page 1 of my grid (data.length = 10). I suspect it is because of the way my data source is setup on my grid:

01.@(Html.Kendo().Grid<RevisionGridModel>()
02.        .Name("RevisionsGrid")
03.        .DataSource(ds => ds
04.            .Ajax()
05.            .Model(model =>
06.            {
07.                model.Id(m => m.RevisionID);
08.            })
09.            .Read(read => read.Action("SelectRevisions", "Revisions").Data("projectData"))
10.            .Update(upd => upd.Action("UpdateRevision", "Revisions"))
11.            .Events(events => events.Error("errorRevisionsGrid").RequestEnd("requestEndRevisionsGrid"))
12.        )
13.        .Columns(cols =>
14.        {
15.            cols.Bound(x => x.RevisionNumber).Width(65).EditorTemplateName("GridEditObject");
16.            cols.Bound(x => x.RevisionName).EditorTemplateName("GridEditObject");
17.            cols.Bound(x => x.IsActive).Width(84).EditorTemplateName("GridEditActive")
18.                .ClientTemplate("<span class=\"label label-#= (IsActive) ? 'success' : 'danger' #\">#= (IsActive) ? 'Active' : 'Inactive' #</span>");
19.
20.            cols.Command(cmd => cmd.Edit()).Title("Edit").Width(208);
21.        })
22.        .Sortable()
23.        .Scrollable(scroll => scroll.Height(300))
24.        .Filterable()
25.        .Resizable(resize => resize.Columns(true))
26.        .Pageable(page => page.Enabled(true))
27.        .Selectable(sel => sel.Mode(GridSelectionMode.Single).Enabled(true))
28.        .Events(ev => ev.Change("changeRevisionsGrid").DataBound("dataBoundRevisionsGrid"))
29.)

Is there another method for retrieving all of the data in a paged grid of this nature?

Thanks,
Stefan.

[Kiril Nikolov]

Hello Stefan,

 

By default the serverOperations are enabled with the MVC version of the Grid, so if you set serverOpertaions(false) all data will be fetch on the client.

 

 

Regards,
Kiril Nikolov
Telerik

[Stefan]

Well, that gets it working! Unfortunately, it also means that I have to once again worry about JSON maxlength since all of the data is being fetched. Additionally, I now see why you have a timeout around your function, as opposed to firing it in the DataBound event - there's a weird timing issue with the DataBound and the grid implementing the default paging parameters etc., so if I try to change the dataSource.page() in DataBound, the webpage just goes to hell due to a long running script. There needs to be another event that is fired after the grid is completely loaded, like a gridReady event.

Thanks for all of your help though!
Stefan.

[Kiril Nikolov]

Hello Stefan,

 

The data needs to be present in the DOM in order to make any operations with it, and I believe this is understandable, as you cannot select an item that is not available.

 

As for the page() method called in the dataBound - page() will fire dataBound, which means an endless loop will occur. 

 

If you want your code to be run just once, you can use the one() binder:

http://api.jquery.com/one/

 

Regards,
Kiril Nikolov
Telerik

[Stefan]

Yes, that is understandable. I'll perhaps look into indexing the DataSource so that I can do the math in the controller and pass the page number along in a session variable, or something of the sort.

Well, that explains a lot! And now that I think about it, it makes complete sense that dataBound would fire after altering the page. Nice idea with using one().

Thanks again!
Stefan.

[Kiril Nikolov]

Hello Stefan,

 

Happy to help.

 

In case you have any further questions, please do not hesitate to contact us.

 

Regards,
Kiril Nikolov
Telerik