How to set native scrolling for all components

Olaf

created 4 years ago (modified 4 years ago)

Hi,

I want to use native scrolling for all scrollviews.

Therefore I place this in my main.js:

JavaScript
import DxScrollView from "devextreme/ui/scroll_view";
DxScrollView.defaultOptions({
  options: {
    useNative: true,
  },
});

But this is only effective on the scrollview component itself.
In the dxDatagrid In need this <DxScrolling mode="virtual" useNative="true" />

I also want to have this default in a treeview.
Therefore I found this topic: https://supportcenter.devexpress.com/ticket/details/t478191
But this generates an error: e.element.find is not a function. How can I deal with this?

I don't like to set it in all components either. Is there a better way?

Thanks.

Answers approved by DevExpress Support

DevExpress Support Team

created 4 years ago

Hello Olaf,

The Scrollable component is used in the DataGrid and TreeView components, so your code may look as follows:

JavaScript
import Scrollable from 'devextreme/ui/scroll_view/ui.scrollable';

Scrollable.defaultOptions({
  options: {
    useNative: true,
  },
});

But this generates an error: e.element.find is not a function. How can I deal with this?

In Vue, the "element" field is a native HTMLElement element. Thus, you need to replace all jQuery selectors with standard JavaScript equivalents. For instance, you can use the "querySelector" method instead of "find". Please check the Replacing jQuery with native Javascript in our projects help section for more information. Then, you can use the static getInstance method to obtain a component instance.

P.S. Would you mind if I mark this ticket public so that other customer can find the solution above?

Regards,
Romeo

Comments (3)

Olaf 4 years ago

Hi Romeo,

Thanks, setting the default options this way works perfect.

Of course you can set this ticket to public.

Olaf 3 years ago

Hi Romeo,

This code comes with a deprecated warning now.
If I remove this code, our DxDropDownBox popup with a datagrid does not have the native scrollbar. So I still need it.
Is this code still valid?

DevExpress Support Team 3 years ago

Hi,

In v.21.1.3 we made our TypeScript definitions stricter and deprecated all internal types that we plan to remove in the future.

Please refer to this BC for more information: DevExtreme TypeScript declarations become stricter.

We will add the information about new types to the deprecation message in our next releases so that you can migrate to the correct types. Currently, you can ignore this message.

dxScrollable is in our to-do list. Please feel free to share your usage scenario on that BC page and we'll discuss it.

How to set native scrolling for all components

Answers approved by DevExpress Support

Recently viewed tickets