Select Grid Row on Page N

[Joel]

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

[Petar]

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