This is a migrated thread and some comments may be shown as answers.
Robust way to select first row
3 Answers 3 Views
This is a migrated thread and some comments may be shown as answers.
Fredrik
Top achievements
Rank 1
Fredrik asked on 03 Feb 2021, 03:07 PM

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?

 

3 Answers, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 05 Feb 2021, 10:38 AM

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:

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Fredrik
Top achievements
Rank 1
answered on 11 Feb 2021, 08:10 AM

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?

 

 

 

0
Anton Mironov
Telerik team
answered on 12 Feb 2021, 11:45 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Fredrik
Top achievements
Rank 1
Answers by
Anton Mironov
Telerik team
Fredrik
Top achievements
Rank 1
Share this question
or