I'm trying to let the user see which columns in a Grid have an active filter or sort.  I'm using some examples I've seen in the components / forums, like this one to get started: https://www.telerik.com/forums/highlight-when-using-a-filter-in-the-grid.

Generally, it works.  If a user sets a filter on column X, the grid shows a different background color.  The problem happens when there is a GridColumnMenuCheckboxFilter, and the user selects more than two items.  The filter applies correctly, but it does not show the user that it's filtered.  The GridColumnMenuFilter.active function returns false.

Here's an example: 

https://stackblitz.com/edit/react-skkquv?file=app%2Fmain.tsx

Thank you,

Brad Larsen

The AutoComplete component is exactly what I need, with it being an input field offering suggestions based on the typed text. However, I have a nested data structure like

Is it possible to show this? Maybe using the DropdownTree or TreeView component with `itemRender`?

Hi, I have a custom tool in the editor that allows the user to insert images with the max width set to 300px (set via the style attribute). This is so that the image inserted into the Rich Text Editor looks like a thumbnail.

How would I go about displaying the full-size image when the user hovers over the thumbnail?

I need to add an empty first item in Kendo DropDownList component. I don't know, how to make it in Kendo React. In Kendo jQuery I was able to set optionLabel: "" property and It worked. I don't know, how to do the same in Kendo React dropdown.

jQuery example: https://demos.telerik.com/kendo-ui/dropdownlist/index

Thanks a lot.

I would like to ask, where are the localization messages in Kendo React packages. In Kendo jQuery was translation mesages included in kendo-ui package, but in React, I'm not able to found the messages. ...or in Kendo React the messages are not available and I must create messages JSON object and translate by self? 

Thanks a lot.

I'm trying to change the field name of the `subItemsField` of the `DropDownTree` component and following the example of the docs here: https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdowntree/

It only works when the field is called `items`, and doesn't use the `subItemsField` string I add (which is `relatedProducts`). This is a problem because I don't want to call this field `items` in my data

Data example:

  const data = [
    {
      name: 'Furniture',
      relatedProducts: [
        { name: 'Tables & Chairs' },
        { name: 'Sofas' },
        { name: 'Occasional Furniture' },
      ],
    },
    {
      name: 'Decor',
      relatedProducts: [{ name: 'Tables & Chairs' }, { name: 'Sofas' }, { name: 'Occasional Furniture' }],
    },
  ];

Component with changed `subItemsField`

import { extendDataItem, mapTree } from '@progress/kendo-react-common';
import { filterBy } from '@progress/kendo-react-data-tools';
import {
  DropDownTree,
  DropDownTreeChangeEvent,
  DropDownTreeExpandEvent,
} from '@progress/kendo-react-dropdowns';
import React from 'react';

export const processTreeData = (data, state, fields) => {
  const { selectField, expandField, dataItemKey, subItemsField } = fields;

  const { expanded, value, filter } = state;
  const filtering = Boolean(filter && filter.value);

  return mapTree(
    filtering ? filterBy(data, [filter], subItemsField) : data,
    subItemsField,
    (item) => {
      const props = {
        [expandField]: expanded.includes(item[dataItemKey]),
        [selectField]: value && item[dataItemKey] === value[dataItemKey],
      };

      return filtering ? extendDataItem(item, subItemsField, props) : { ...item, ...props };
    },
  );
};

export const expandedState = (item, dataItemKey, expanded) => {
  const nextExpanded = expanded.slice();
  const itemKey = item[dataItemKey];
  const index = expanded.indexOf(itemKey);
  index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);

  return nextExpanded;
};

const selectField = 'selected';
const expandField = 'expanded';
const dataItemKey = 'name';
const textField = 'name';
const subItemsField = 'relatedProducts';

const fields = { selectField, expandField, dataItemKey, subItemsField };

const InputWithTreeList = ({ data }: { data: Record<string, unknown>[] }) => {
  const [value, setValue] = React.useState(null);
  const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);

  const onChange = (event: DropDownTreeChangeEvent) => setValue(event.value);
  const onExpandChange = React.useCallback(
    (event: DropDownTreeExpandEvent) =>
      setExpanded(expandedState(event.item, dataItemKey, expanded)),
    [expanded],
  );

  const treeData = React.useMemo(() => {
    return processTreeData(data, { expanded, value }, fields);
  }, [expanded, value]);

  return (
    <DropDownTree
      style={{ width: '300px' }}
      data={treeData}
      value={value}
      onChange={onChange}
      placeholder="Start typing..."
      textField={textField}
      dataItemKey={dataItemKey}
      selectField={selectField}
      expandField={expandField}
      onExpandChange={onExpandChange}
    />
  );
};

export default InputWithTreeList;

How do you lock the chevron and title so the stay in view when scrolling the grid to the right?

Related question: https://www.telerik.com/forums/grouping-and-frozen-columns

I have a following data

{
    label: 'A',
    value: 10,
    id: 0
  },
  {
    label: 'B',
    value: 12,
    id: 1
  },
  {
    label: 'C',
    value: 4,
    id: 2
  }

When I set the tooltip visible to 'true' . I get the value on the tooltip but I am looking to display the label instead of value

 <ChartSeriesItem
            type="donut"
            data={data}
            categoryField="label"
            autoFit={true}
            field="value"

tooltip={{

          >

Is there a way to customize the format to display the label name?

Hi Team,

Is there any support for controlling the slot selection for the Scheduler?

I would like to:
 - Turn off selection;
 - Select multiple slots
 - access the selected slots to use a start and end date/time in EditSlot.

Is there any support for anything along those lines?

Thanks,
Grant