Questions on KendoReact Forum

1 answer

261 views

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.

Localization

answered on 25 Oct 2022

0 answers

180 views

Grid kendo react

Hi,

How I can create the ability to select all rows with ctrl+A ?

Grid

updated question on 25 Oct 2022

1 answer

160 views

[Solved] Changed subItemsField for the DropDownTree does not work

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;

DropDownList

TreeList

answered on 24 Oct 2022

1 answer

118 views

React Data Grid: Group Header Rows

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

Grid

answered on 24 Oct 2022

1 answer

428 views

Add custom tooltip on Kendo-React Donut Chart

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={{

visible: true,
format: '{0}'

>

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

Charts

Tooltip

answered on 21 Oct 2022

1 answer

178 views

Scheduler support to multiple slot selection

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

Scheduler

answered on 21 Oct 2022

0 answers

165 views

grid auto height

In the example below, the grid is melted into the page. There is no scrolling in the grid. Even if the list grows to 10, the height will increase by itself.

However, the height of kendo grid is mostly fixed in all examples, so scrolling occurs. How can I set auto height without scrolling? Also, please include an example of removing scrolling in the official example. It's too stereotyped. It's so frustrating because of the scrolling.

https://hyper-react.coderthemes.com/ui/tables/advanced

Grid

asked on 21 Oct 2022

2 answers

129 views

Error adding tools in kendo react editor

I have a big project and I use the Kendo react editor.

When the build is done within the pipeline, perhaps due to some memory limitation, an error occurs.

However, removing the editor tools completes the build.

Example Success (remove tools from Editor)

import { Editor, EditorTools } from "@progress/kendo-react-editor";

const App = () => {
  return (
    <Editor
      contentStyle={{
        height: 630,
      }}
      defaultContent={content}
    />
  );
};

Example Fail (with tools in Editor)

import { Editor, EditorTools } from "@progress/kendo-react-editor";
const { Bold } = EditorTools;

const App = () => {
  return (
    <Editor
      tools={[[Bold]]}
      contentStyle={{
        height: 630,
      }}
      defaultContent={content}
    />
  );
};

Any idea how to solve this?

Editor

General Discussions

answered on 19 Oct 2022

0 answers

196 views

KendoReact Editor - How to pass data to a custom tool?

Hi

We have a list of names that we would like the user to pick and insert from a drop-down list located inside the editor.

We have created a custom tool for the drop-down list but am wondering as to how we can pass the list of names from the main editor component, into the custom tool. Any ideas?

const TargetEditor = ({names}) => {
  return (
    <Editor
      tools={[
        [Bold, Italic, Underline, Strikethrough],
        NamesDropDownTool, // we want to pass the list of names (which can be changed by the parent control), into this custom tool
      ]}
      contentStyle={{
        height: 630,
      }}
    />
  );
};