Get page number based on selected row

10 posts, 1 answers
  1. Stefan
    Stefan avatar
    8 posts
    Member since:
    Aug 2011

    Posted 15 Oct 2015 Link to this post

    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.

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 19 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Stefan
    Stefan avatar
    8 posts
    Member since:
    Aug 2011

    Posted 19 Oct 2015 in reply to Kiril Nikolov Link to this post

    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.

  5. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 21 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Stefan
    Stefan avatar
    8 posts
    Member since:
    Aug 2011

    Posted 21 Oct 2015 in reply to Kiril Nikolov Link to this post

    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.

  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 23 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Stefan
    Stefan avatar
    8 posts
    Member since:
    Aug 2011

    Posted 23 Oct 2015 in reply to Kiril Nikolov Link to this post

    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.

  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 27 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Stefan
    Stefan avatar
    8 posts
    Member since:
    Aug 2011

    Posted 27 Oct 2015 in reply to Kiril Nikolov Link to this post

    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.

  11. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 29 Oct 2015 Link to this post

    Hello Stefan,

     

    Happy to help.

     

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

     

    Regards,
    Kiril Nikolov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready