Select Grid Row on Page N

2 posts, 0 answers
  1. Joel
    Joel avatar
    206 posts
    Member since:
    Jun 2018

    Posted 29 Sep 2020 Link to this post

    I have the following Grid.  I need the record/row to be selected on the Grid by default when I go onto this View.  On the Databound Event, I have javascript that works against a Grid assuming I have 1 page.  But, how do I do this when I have multiple pages and the row I want is on Page N?

     

     

    @(Html.Kendo().Grid<Person>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Command(command => command
                .Custom("Select")
                .Click("goDetail"))
                .Width(Glossary.Portal.ButtonWidth);
            columns.Bound(p => p.FirstName)
                .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                    .ShowOperators(false)
                    .SuggestionOperator(FilterType.Contains)));
            columns.Bound(p => p.LastName)
                .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                    .ShowOperators(false)
                    .SuggestionOperator(FilterType.Contains)));
        })
        .Pageable()
        .Selectable(s => s.Mode(GridSelectionMode.Single))
        .Sortable()
        .Scrollable()
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .HtmlAttributes(new { style = "height:550px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("IndexJson", "Patients").Data("getData"))
            .Model(m => m.Id(p => p.Id))
        ).Events(e =>
        {
            e.DataBound("onGridDataBound");
            e.Change("goGridSelect");
        }))

     

    ...

        function onGridDataBound(e) {
            // Handle the dataBound event.
            var grid = e.sender;
            //alert(grid == null);

            var personId = $("#personId").val();
            //alert(personId);

            if (grid != null) {
                var dataItem = grid.dataSource.get(personId);
                //alert(dataItem == null);

                if (dataItem != null) {
                    var row = $("tr[data-uid='" + dataItem.uid + "']");
                    //alert(row == null);

                    if (row != null) {
                        grid.select(row);
                        row[0].scrollIntoView();
                    }
                }
            }
        }

  2. Petar
    Admin
    Petar avatar
    462 posts

    Posted 02 Oct 2020 Link to this post

    Hi Joel,

    The approach I can suggest you use to select a row in a different page is demonstrated in this Dojo example

    The shared project uses the page event of the Grid. Once the event is triggered, the following code is executed:

              var grid = $("#grid").data("kendoGrid");
              var item = grid.dataSource.get(3);
              setTimeout(function(){
                if(notSelected) {
                  var tr = $("#grid > .k-grid-content > table > tbody > tr[data-uid='" + item.uid + "']");
                  grid.select(tr)
                  notSelected = false; 
                  }
              })

    The above code selects the row with id 3, as the schema.model for the dataSource is set as follows.

    schema: {
       model: { id: "id" }
    }

    The code executed on page event checks if an element with UID corresponding to the row that we want to select is available on the current Grid page. If the row is presented, when we select it. 

    I hope the provided example and the above description will help you implement the targeted functionality.

    Regards,
    Petar
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top