Robust way to select first row

[Mikael]

There are a few different ways described to select the first row in a grid programmatically, but they all seem to rely on the markup of the grid, and not the data in the grid.

For instance, one way is this:

kendoGrid.select("tr:eq(1)");

However, that only works if there is no filtering. If filtering is enabled (Mode = "Row"), than the code needs to be

kendoGrid.select("tr:eq(2)");

Of course, we could check if filtering is enabled (this is dynamic in our case), and adjust the code accordingly. Still, it doesn't feel robust, instead it would be better to select referencing the data, something like:

kendoGrid.selectAt(0);

The selectAt method doesn't exist, but are there other ways?

 

[Anton Mironov]

Hello Fredrik,

Thank you for the code snippets and details provided.

In order to achieve the desired behavior, I would recommend using the "dataBound" Event of the Kendo UI Grid. In the Event handler, get the first dataItem from the current view in the dataSource of the grid. Use its "uid" to find the needed row and apply the "k-state-selected" class to it. 
Here is an example:

        dataBound: function(){
          var currentFirstRow = this.dataSource.view()[0];
          $('[data-uid='+$(currentFirstRow)[0].uid+']').addClass('k-state-selected');
        }

The complete implementation could be found in the following dojo example, that I prepared for the case:

• https://dojo.telerik.com/@anton.mironov/ETiDEdAJ

Give the approach above a try and let me know if this is the expected behavior, or further assistance is needed.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Mikael]

Thanks! I prefer the way to find the current first row over querying the HTML markup.

The second step, selecting the row, again uses the markup instead of working with the data state of the grid.

An alternative, I guess, would be to do 

this.select($('[data-uid='+$(currentFirstRow)[0].uid+']'));

I prefer this way, since it doesn't use hard-coded CSS class-names, etc but are the two methods completely equivalent?

 

 

 

[Anton Mironov]

Hello Fredrik,

Thank you for sharing your approach with the community.

In this case, both approaches are working equivalently. The reason is that the "k-state-selected" class is not a custom hardcoded one. It is part of the Kendo UI. When your approach is using the "this.select(row)" it is actually adding the pointed class to the row parameter.

I hope this information helps. If further assistance is needed, do not hesitate to contact me and the team.

 

Best Regards,
Anton Mironov
Progress Telerik