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

Kendo UI Grid Vue- scroll to selected row

3 Answers 298 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jaydeep
Top achievements
Rank 1
Jaydeep asked on 01 Jun 2020, 08:25 AM

Hi,
I am having two grid's in my page and I want to scroll to a particular row when the page gets loaded.

Each rows are having unique years and I want to scroll to the current year row once the page is loaded, with the class selector and the year value inside <td> i can identify the row into which I have to scroll.

I have done the similar functionality in another project but there we are using kendo UI for jquery version and https://docs.telerik.com/kendo-ui/knowledge-base/grid-scroll-selected-row link I had followed to achieve the same. As my current requirement is for Kendo UI Grid for Vue , I am looking forward to the correct solution or an approach for achieving the same..

Thank you for your help in advance.
Best regards
Jaydeep

3 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 03 Jun 2020, 07:46 AM

Hello Jaydeep,

I have prepared a small Stackblitz example to demonstrate the approach from the How-To article to scroll to a selected row. 

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Chen Yap
Top achievements
Rank 1
commented on 09 Sep 2022, 09:29 AM

Im using Vue3, I not able to compile the small Stackblitz example. I try to copy those code but its not working. Any idea?
Petar
Telerik team
commented on 09 Sep 2022, 09:53 AM

Hi, Chen Yap. 

Can you please give us more details about the functionality that you want to implement? The above example is 2 years old and uses the Wrapper Grid so there could be issues with it. 

If you give us details about the targeted functionality, we can help you achieve it.

0
Nelson
Top achievements
Rank 1
answered on 15 Jan 2021, 01:10 PM
How can this be achieved in the native vue grid?
0
Petar
Telerik team
answered on 19 Jan 2021, 07:41 AM

Hello Nelson,

Check this StackBlitz example that demonstrates how we can define a row for selection and how we can scroll to this row. 

The scrolling to the selected element is done using the following code where this.selectedItem holds the definition of the item that we want to scroll to and the number in yellow is the height of Grid's row. 

  mounted() {
    const a = this.$refs.grid.vs;
    a.container.scrollTop = (this.selectedItem.ProductID-1)*36;
  }

More information about the rows' selection in the Native Grid can be found in this Selection article

I hope the linked example demonstrates what you want to implement.

Regards,
Petar
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
Jaydeep
Top achievements
Rank 1
Answers by
Martin
Telerik team
Nelson
Top achievements
Rank 1
Petar
Telerik team
Share this question
or