I have added a button in the Grid's toolbar to clear all filters. However, when the button is clicked, the filter object is set to null, but the filter values in the UI are not reset. This creates a discrepancy between the displayed filter values and the actual filtered data.

Steps to Reproduce:

Add a button in the Grid's toolbar to clear all filters.

Apply some filters to the grid.

Click the clear filter button.

Observe that the filter values in the UI do not reset, even though the filter object is set to null.

Expected Result:
Clicking the clear filter button should reset both the filter object and the displayed filter values in the UI.

Actual Result:
The filter object is set to null, but the displayed filter values in the UI remain unchanged.

Solution Attempted:
I have placed a Button component within the GridToolbar and set the filter object of the DataState stored in the state to null within its click event. However, this does not reset the UI filter values.

Demo code: https://stackblitz.com/edit/react-e4qxtaef?file=app%2Fapp.jsx

Document reference: https://www.telerik.com/kendo-react-ui/components/knowledge-base/grid-add-clear-filters-button

Additional Information:

The issue persists regardless of the theme used.

No error messages are displayed in the console.

Request:
Please investigate and provide a solution to ensure that the clear filter button resets both the filter object and the displayed filter values in the UI.

Hello!

I am working with two separate components. The first component displays data in a Kendo Grid, and the second component displays the same data in a Kendo Chart.

I have implemented a function that saves the index of the row when it is clicked (currentDatasetRow). The goal is to display the tooltip for that index in the chart whenever the index changes, and also to deactivate the tooltip when clicking the same row again.

I have tried a few things using the chartInstance from the ref, but I am a bit lost in how to get it to work correctly. I would really appreciate any guidance on how to implement this.

This is my component: 

import {
  Chart,
  ChartCategoryAxis,
  ChartCategoryAxisItem,
  ChartLegend,
  ChartSeries,
  ChartSeriesItem
} from '@progress/kendo-react-charts'
import 'hammerjs'
import React, { useEffect, useRef, useState } from 'react'
import { format } from 'date-fns'
import { useSelector } from 'react-redux'
function ChartComponent ({ dataProps }) {
  const currentDatasetRow = useSelector(state => state.monitorMenu.currentDatasetRow)
  const chartRef = useRef(null)
  const [tooltipIndex, setTooltipIndex] = useState(null)

  useEffect(() => {
    setTooltipIndex(currentDatasetRow)
  }, [currentDatasetRow])

  const lineTooltipRender = (props) => {
    const value = props.point.value
    const formattedValue = value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 4 })
    const formattedDate = format(new Date(props.point.category), 'yyyy-MM-dd HH:mm:ss')

    return (
      <div>
        Date: {formattedDate}
        <br />
        Value: {formattedValue}
      </div>
    )
  }

  return (
    <div style={{ height: '50vh', width: '100%', position: 'relative' }}>
      {(dataProps && dataProps.length > 0)
        ? (
        <Chart
          ref={chartRef}
          style={{ height: '100%', width: '100%' }}
          pannable={true}
          zoomable={true}
          transitions={false}
          className='custom-chart'
        >
          <ChartLegend position="top" />
          <ChartCategoryAxis>
            <ChartCategoryAxisItem maxDivisions={10} visible={false} axisCrossingValue={-1000} />
            <ChartCategoryAxisItem maxDivisions={10} />
          </ChartCategoryAxis>
          <ChartSeries>
             {dataProps.map((item, index) => {
               const parameter = item[0].parameter

               return (
                <ChartSeriesItem
                  key={index}
                  type="line"
                  data={item}
                  field="value"
                  categoryField="category"
                  name={parameter}
                  style="smooth"
                  width={parameter.includes('Anom.') ? 0 : 2}
                  tooltip={{ visible: true, render: lineTooltipRender }}
                  visible={true}
                />
               )
             })}
          </ChartSeries>
        </Chart>
          )
        : (
        <div style={{ height: '50vh', width: '100%' }}></div>
          )}
    </div>
  )
}

const MemoizedChartComponent = React.memo(ChartComponent)
export default MemoizedChartComponent

Hello,

I am using the latest version of Kendo React Grid with multi-row selection and checkboxes. However, I encountered an issue where clicking on a cell (e.g., in the Product Name column) resets the previously selected checkboxes.

Steps to Reproduce:

1. Click on multiple checkboxes to select rows.
2. Click on a cell in the Product Name column.
3. The previous checkbox selections are reset.

Expected Behavior:

• I only want the checkboxes to control row selection.
• Clicking on other cells (e.g., Product Name) should not affect the selected checkboxes.

Current Behavior:

• Clicking a non-checkbox cell resets the checkbox selection.

Demo & Documentation:

• Docs: https://www.telerik.com/kendo-react-ui/components/grid/selection/multi-row-selection#multiple-checkbox-selection
• Demo: https://stackblitz.com/edit/react-57qvzmvb?file=app%2Fapp.jsx

<Grid data={products} style={{
      height: '400px'
    }} dataItemKey={DATA_ITEM_KEY} selectable={{
      enabled: true,
      drag: false,
      cell: false,
      mode: 'multiple'
    }} select={select} onSelectionChange={onSelectionChange} onHeaderSelectionChange={onHeaderSelectionChange}>
                <Column columnType="checkbox" />
                <Column field="ProductName" title="Product Name" width="300px" />
                <Column field="UnitsInStock" title="Units In Stock" />
                <Column field="UnitsOnOrder" title="Units On Order" />
                <Column field="ReorderLevel" title="Reorder Level" />
            </Grid>

Question:

How can I prevent clicking on other cells from affecting the checkbox selection? I want rows to be selected only via checkboxes, not by clicking other cells.

Thanks in advance!

Best regards,
Trustin

Hi Team,

I am writing to inquire about modifying the default behaviour of the Kendo UI Menu component. The sub-menu items are displayed when hovering over the parent menu item. However, I require the sub-menu items to be visible only when the parent menu item is clicked.

Desired Behavior:

• Sub-menu items should remain hidden by default.
• Clicking on the parent menu item should expand the sub-menu and display the child items.
• Clicking on another parent menu item should collapse the previously expanded sub-menu and expand the new one.

Implementation Challenges:

I have explored the Kendo UI documentation and API, but I am unable to find a direct configuration option to achieve this desired behaviour.

Could you please provide guidance on how to modify the Kendo UI Menu component to display sub-menu items only on click of the parent menu item?

Please let me know if you require any further information or if there are any examples available that demonstrate this functionality.

Reference URL - https://stackblitz.com/edit/react-zugkrezk?file=app%2Fapp.jsx,app%2Fapp.css

Thank you for your time and assistance.
Mahesh

Description: When using MUI Autocomplete inside the KendoReact GridColumnMenuFilter, clicking on the autocomplete input triggers the Popper component outside the GridColumnMenuFilter wrapper. However, when selecting an option from the Popper, the outside click event of the GridColumnMenuFilter is triggered, causing the filter menu to close unexpectedly.

Steps to Reproduce:

1. Open the provided demo link.

2. Click on the MUI Autocomplete input inside the GridColumnMenuFilter.

3. Observe that the Popper appears outside the filter menu.

4. Click on an option in the Popper.

5. Notice that the GridColumnMenuFilter closes immediately after selecting an option.

Expected Behavior: Selecting an option from the MUI Autocomplete Popper should not trigger the outside click event of the GridColumnMenuFilter, preventing it from closing unintentionally.

Actual Behavior: The GridColumnMenuFilter closes when selecting an option from the Popper.

import * as React from 'react';
import { AutoComplete } from '@progress/kendo-react-dropdowns';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

const data = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
  { title: 'The Dark Knight', year: 2008 },
  { title: '12 Angry Men', year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: 'Pulp Fiction', year: 1994 },
  { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
  { title: 'The Good, the Bad and the Ugly', year: 1966 },
  { title: 'Fight Club', year: 1999 },
];

export const CustomFilterUI = (props) => {
  const onChange = (event) => {
    const value = event.value === 'null' ? null : event.value === 'true';
    const { firstFilterProps } = props;
    firstFilterProps.onChange({
      value,
      operator: 'eq',
      syntheticEvent: event.syntheticEvent,
    });
  };

  const { firstFilterProps } = props;
  const value = firstFilterProps.value;

  return (
    <div>
      <h3>MUI Autocomplete</h3>
      <Autocomplete
        id="combo-box-demo"
        options={data}
        getOptionLabel={(option) => option.title}
        style={{ width: 300 }}
        renderInput={(params) => (
          <TextField {...params} label="Combo box" variant="outlined" />
        )}
        onChange={onChange}
        disablePortal
      />
      <h3>Kendo Autocomplete</h3>
      <AutoComplete data={data} textField="title" onChange={onChange} />
    </div>
  );
};

Demo Link: StackBlitz Demo

Additional Notes:

• The issue might be due to event propagation from the MUI Popper component.

• A potential fix could involve preventing the GridColumnMenuFilter from closing when clicking inside the Popper.

• Seeking guidance on how to prevent this behavior while maintaining correct filtering functionality.

Looking forward to your support and suggestions. Thank you!

We have a grid that has expand collapse functionality on the first column of the grid.  I would like to make the header of the column a button or place an icon that could be clicked to toggle the expand/collapse functionality.

I’m using a Kendo form and rendering it dynamically. I’m facing an issue with the upload component validation. For example, when creating a new record, a validation error shows up if the file is not uploaded. However, after the data is saved and when I edit the record, if any other fields are changed, the validation error appears for those fields. What I want is to skip the validation for the upload component while editing, so the form can be submitted without it, but the validation should still be enforced during creation.

I am using these type off code

these type data can be use and these my form code