Telerik Forums
KendoReact Forum
1 answer
70 views

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).

0 answers
72 views

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/

1 answer
67 views

Hi,

I want to use multiselect filtering for grid, just like in the image. How can I do it ?

Thanks.

 

Konstantin Dikov
Telerik team
 answered on 29 Aug 2024
1 answer
73 views

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:

  1. User clicks on the dropdownlist (or the down arrow)
  2. The list opens displaying a search (filter) input at the top just like the dropdownlist does.
  3. User types in the filter and the list filters the results.
  4. Each dropdown list item has checkbox for selection
  5. User selects one/multiple items with first item's chip appearing above.
  6. Below is the screenshot for reference

Konstantin Dikov
Telerik team
 answered on 27 Jun 2024
1 answer
53 views
I am using 2  multi select dropdowns in form components. For example country & state. When i select a country in the first dropdown the corresponding state names will be populated in the 2nd dropdown. But when i click on search & select the 2nd dropdown again, it will display all the state names in the list instead of previously populated state.
Konstantin Dikov
Telerik team
 answered on 12 Jun 2024
1 answer
51 views

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

Wissam
Telerik team
 answered on 29 Apr 2024
1 answer
135 views

Need an example of multi-select tree API data.

Found Similar for Dropdown - https://stackblitz.com/edit/react-gr9hn2?file=app%2Fmain.jsx

 

 

Wissam
Telerik team
 answered on 20 Oct 2023
2 answers
73 views

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.


 

 

Mahesh
Top achievements
Rank 1
Iron
Iron
 answered on 18 Oct 2023
1 answer
97 views

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:

ReactDOM.render(<App />, document.querySelector('my-app'));

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?

Vessy
Telerik team
 answered on 28 Sep 2023
1 answer
126 views
Hello Telerik, does the multiselect component have the ability to suggest a search like autocompletebox does? Or does autocompletebox have multiselect mode? and is it possible to do something from this at the moment?
Vessy
Telerik team
 answered on 04 Sep 2023
Narrow your results
Selected tags
Tags
+127 more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?