This is a migrated thread and some comments may be shown as answers.

Select Grid Row on Page N

1 Answer 7 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 29 Sep 2020, 06:56 PM

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

1 Answer, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 02 Oct 2020, 01:34 PM

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).

Tags
Grid
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Petar
Telerik team
Share this question
or