We prefer to have keyboard up/down cursor correspond to navigating input focus up/down a row in the KendoReact Data Grid.
We are already successfully using custom GridColumn Cells to render inputs at all times in tandem with a Grid.onKeyDown handler that finds the next input to set focus.
(for anyone interested this only took a few lines of code to implement a dom navigation heuristic that finds the column index of the nearest TD via onKeyDown event.nativeEvent.target.closest("td") and then finds the corresponding td to that same column index in the next TR up or down, and then hits the first nested native html <input> found to call focus() - this seems simple and durable to variances in nested components as long as there is a native input to be found, hence the need to render inputs at all times... which does run counter to the approach i saw represented in the KendoReact demos based on setting a particular dataitem's "inEdit" property which wasn't the look we were going for =)
The above cursor navigation is working but before it kicks in, inputs like the DateTimePicker are also taking a cursor up/down to change the date segment that currently has focus - and this doesn't seem to be optional behavior yet?
I believe the fundamental challenge to any dom "wrapper" approach is by the time an outer dom element receives onKeyDown it's too late for event.preventDefault or event.stopPropagation to hide it from the inner input element (the native kendoreact inputs in this case).
Hence the ask here to have an option to ignore that at on the individual KendoReact input components.
With previous KendoReact component builds (e.g. 8.2.0) we successfully proved "patch-package" various subcomponents of DateTimePicker, NumericTextBox and MultiSelect to prevent them from responding to up/down cursor events.
Of course patch-package approach is fragile to upgrades and sure enough recent need to take @progress/kendo-react-dateinputs@9.1.0-develop.6 to get into DateTimePicker formatPlaceholder bug fixes broke previous patches, highlighting need for more resilient fix.
I've attached the latest patch-package files to give precise reference to what keyboard events we're interested in disabling.
I'm assuming this is a feature request and happy to have it reallocated to a support ticket... but wanted to post it in open forums in case community might have alternative suggestions to achieve what we're looking for?
Maybe other approaches to what seems like it could be a general html nested component strategy pattern?
For instance, I'm hesitant to pursue any removeEventListener based approaches for fear of how that might conflict with how i vaguely understand react is continually recreating dom elements upon each render cycle, so i'd be open to encouragement in that direction if anyone has experience to share?
Also wondering if this falls into the realm of "accessibility" and maybe there's already ways to disable accessibility? (as negative as that sounds).
Hi Folks,
I have been using Kendo grid with infinite scroll also features incell edit and checkbox operation, It has input box(custom cells), select, checkbox fields.
but this gets really slow when we have more than 50-70 data in the grid.
please suggest how i can work on performance in this scenario.
please find the link below for the code i have folowing.
incell: https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell/
checkbox actions: Customizing the Selection : https://www.telerik.com/kendo-react-ui/components/grid/interactivity/selection/
Hi,
I want to use multiselect filtering for grid, just like in the image. How can I do it ?
Thanks.
Is there a way to make the filter input (search box) appear at the top of the dropdown list in a multiselect exactly like it does in the dropdownlist component. The expected behavior is this:
Hi,
If pass a invalid value to MultiSelect, it will break the UI with null pointer exception. Please see this example:
https://codesandbox.io/p/sandbox/zen-pasteur-fw7rrt?file=%2Fapp%2Fmain.jsx%3A13%2C20
This only happens if data is an array of objects, and textField property is used.
It is possible invalid values are passed to multiselect when it is a controlled component. I am hoping MultiSelect can handle data error mor gracefully.
Thanks,
Jie
Need an example of multi-select tree API data.
Found Similar for Dropdown - https://stackblitz.com/edit/react-gr9hn2?file=app%2Fmain.jsx
The multi-select is placed outside of the chart component. The change of multi-select chart data is refreshing which ideally shouldn't be.
BasicGroupChart.js
/*
Use this for simple charts with the following type:
- bar
- column
- area
- line
*/
import * as React from 'react';
import { Chart, ChartTitle, ChartSubtitle, ChartSeries, ChartSeriesItem, ChartCategoryAxis, ChartCategoryAxisItem, ChartLegend, ChartLegendTitle, ChartTooltip, ChartAxisDefaults } from '@progress/kendo-react-charts';
import { IntlProvider } from "@progress/kendo-react-intl";
import 'hammerjs';
import { groupBy } from "@progress/kendo-data-query";
import { dateFormat } from '@insight/toolkit-react';
export const BasicGroupedChart = (props) => {
//set variables from properties passed
const chartType = props.chartType; // area, line, bar, column, etc
const title = props.title; // chart title
const subTitle = props.subTitle; //chart subtitle
const data = props.data; //chart data
const groupedByField = props.groupedByField; //field used for legend keys
const valueField = props.valueField; // field for values (y axis)
const categoryField = props.categoryField; // field for categories (x axis)
const valueFormat = props.valueFormat; // format for values in y axis (ex. c0 for currency no decimals and p for percent)
const labelFormat = props.labelFormat; // format for labels (ex c2 for currency with decimals, n0 for number, no decimals)
const showLabels = props.showLabels; //shows or hides value labels
const categoryTitle =props.categoryTitle; // title for the Category axis
const legendPosition = props.legendPosition; //position of the legend, top, right, bottom, etc
const legendTitle = props.legendTitle; //title of the legend
const tooltipFormat = props.tooltipFormat; // format for tooltip (ex "My tooltip {0:c}")
const locale = props.locale; // culture local (ex. "en-GB")
const showCategoryLabels = props.showCategoryLabels; // show the category axis labels
const legendVisible = props.legendVisible ?? true;
const stacked = props.stacked ?? false;
//const colorField = props.colorField ?? ""
//alert("DATA = " + JSON.stringify(data));
const series = groupBy(data, [
{
field: groupedByField,
},
]);
const mapSeries = (item, idx) => (
<ChartSeriesItem
key={idx}
data={item.items}
name={item.value}
field={valueField}
categoryField={categoryField}
type={chartType}
labels={{visible:showLabels, format: labelFormat}}
stack={stacked}
//colorField={colorField}
/>
);
return(
<IntlProvider locale={locale}><Chart><ChartLegend visible={legendVisible} position={legendPosition}><ChartLegendTitle text={legendTitle}></ChartLegendTitle></ChartLegend><ChartTitle text={title} /><ChartSubtitle text={subTitle} /><ChartCategoryAxis><ChartCategoryAxisItem title={{text: categoryTitle}} labels={{visible: showCategoryLabels}} /></ChartCategoryAxis><ChartAxisDefaults
labels={{
format: valueFormat
}}
/><ChartTooltip format={tooltipFormat} /><ChartSeries>
{series.map(mapSeries)}
{/*props.series.map(s => <ChartSeriesItem name={s.name} data={s.data} key={s.name} type="area"/>)*/}
</ChartSeries></Chart></IntlProvider>
);
};
Component Used - <BasicGroupedChart
chartType="column"
title="Invoice Breakdown by Product Category"
subTitle=""
data={spendPeriod?.spend ? spendPeriod?.spend : ""}
categoryField="group"
valueField="value"
groupedByField="label"
categoryTitle=""
legendPosition="bottom"
legendTitle=""
legendVisible={false}
tooltipFormat="{0:c}"
showLabels={true}
valueFormat="c2"
labelFormat="c2"
locale={accountInfo?.locale}
></BasicGroupedChart>Multi Select -
import { DropDownList, MultiSelect } from "@progress/kendo-react-dropdowns";
<MultiSelect
data={productNameData}
textField="label"
dataItemKey="value"
value={productName}
name="msCategory"
placeholder="All"
onChange={handleProductNameChange}
/>
const handleProductNameChange = (event) => {
setProductName(event.value);
setProductNameObject([...event.value]);
setProductNameLength(event.value.length)
};
Created one dummy Project -
https://stackblitz.com/edit/react-ab4fou-czgxv7?file=index.js
Multi select change, delete should not impact the chart.
I'm looking at the examples of virtualization found on https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/virtualization/
There is a problem at the main.jsx file, when you look at the full source you can see that the project was set up using outdated approach that defaults back to React 17 :https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis
Line that is outdated:
using the new Client Render API you will see that the scroll is glitching:
https://codesandbox.io/s/kendo-virtualization-problem-d4375s?file=/src/index.js
Hope someone has a simple solution?