Kendo UI Grid Vue- scroll to selected row

[Jaydeep]

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

[Martin]

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

[Chen Yap]

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]

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.

[Nelson]

How can this be achieved in the native vue grid?

[Petar]

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