Questions on KendoReact Forum

1 answer

32 views

The filter pop up of grid move along with the horizontal scroll bar

Hi All,

I used grid with filter, and found that the filter pop up of grid move along with the horizontal scroll bar, This seems a bit strange, can't the filter panel automatically collapse when scrolling?

Hxukcv (forked) - StackBlitz

Filter

General Discussions

Grid

answered on 18 Jun 2024

1 answer

38 views

ThemeBuilder - Setup the theme for the "base" button

Hello,

Using the ThemeBuilder, we would like to change the default theme for all the buttons in the application.

There is a way to setup the buttons for the "Secondary" and "Primary" theme.

And it seems that some components use the "Secondary" theme, instead of the "Primary" theme. Like here, with the ListBox:

How can we setup our buttons in the ThemeBuilder, so that the default theme used by the components is the "Primary" theme?

Button

Typography

answered on 17 Jun 2024

1 answer

32 views

Virtualisation of Data Grid with pagination.

Hello,

In our project, we use DataGrid from the Kendo React library, but we are experiencing performance issues in one case.
Basically, we have a DataGrid that gets a dataset of 2000 items max as input. Each item can have ~100 columns.
One of the design choices was to introduce classic pagination of the client side, which works fine, and for the dataset with items that have 10-20 columns, the performance is sufficient. Unfortunately, for ~100 columns, not.

Because of that, I wanted to ask if it's possible to introduce the virtualization of rows and columns for a data grid that uses client-side pagination?

Grid

answered on 17 Jun 2024

1 answer

275 views

How to update DatePicker values with key events from the React testing library

Because our DatePicker implementations need custom logic for keyUp and keyDown events, it's critical that our unit tests simulate key presses instead of just populating entire preset values. We are currently unable to update any DatePicker's value with the react testing library fireEvents (@testing-library/react). We're aware that React also has Keyboard events available in the user-event library, but the installation conflicts with our kendo library dependencies. How do we get fireEvent keyUp/Down events to change a DatePicker's value, or is this not possible in KendoReact?

test("update datepicker value with key events", () => {
    render(
      <DatePicker id="testDatePicker" defaultValue={new Date("10/11/2024")} />,
    );
    const dateInput = screen.getByRole("combobox");
    act(() => {
      fireEvent.keyDown(dateInput, { key: "2", code: "Digit2" });
      fireEvent.keyUp(dateInput, { key: "2", code: "Digit2" });
    });
    expect(dateInput).toHaveDisplayValue(["02/11/2024"]);
  });

DatePicker

answered on 13 Jun 2024

1 answer

51 views

Check for duplicates in the grid when data is updated in the grid through incell & highlight the duplicate rows with red color in ke

I have a requirement for my project like, when i do incell editing in the grid, i have to check for duplicate rows in the grid & highlight the entire row with red color. & after resolving the duplicate issues by changing any of the cell value, the highlight should go off. i am already using custom components for combox & numeric textboxes.

ComboBox

Grid

NumericTextBox

answered on 12 Jun 2024

1 answer

27 views

Dynamically load TreeList sub-items

I would like to dynamically load the sub-items of a TreeList whenever the triangle infront of an element is clicked to open the sub-item and then fetch the sub-items from an API. I guess I need to use the onExpandChange event for this, correct? Do you have an example on how I would have to extend the original tree when the sub-items have loaded?

Any hints would be greatly appreciated.

Thanks,

Bernd

TreeList

answered on 12 Jun 2024

1 answer

30 views

After Form Submit multiselect dropdown items are getting Change

I am using 2 multi select dropdowns in form components. For example country & state. When i select a country in the first dropdown the corresponding state names will be populated in the 2nd dropdown. But when i click on search & select the 2nd dropdown again, it will display all the state names in the list instead of previously populated state.

DropDownList

Form

MultiSelect