I'm using the React DataGrid (version 9.4.1).  The grid includes filtering at the top and a few fields in each row that are optionally editable.  The grid also has row selection configured and working.  When row selection is enabled, I'm no longer able to type a space in the filter fields or in any editable row field.  It appears the space key is being captured to handle row selection.  As soon as selectable is disabled

selectable={{ enabled: false }}

then the space bar works as expected when typing in a filter field or editable field in a row.  Is there any way to opt out of using the space bar for row selection?  Is there any configuration that can address this conflict?

To see this problem in action visit this doc page: https://www.telerik.com/kendo-react-ui/components/grid/selection/row-selection

Select the "Edit In" StackBlitz option for the demo grid.   Open the app.tsx file and add this property to the grid: filterable={true}.  Then save the change which should render the grid with a filter field above the Product Name column.  Try typing text in the product name filter with a space and notice this is not possible.  The same applies if the row has an editable field that accepts text.  

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.