Hello,

I need a draggable modal window with a KendoReact Form. What is the best way to set focus to the selected input?
Right now I'm using the Window component (because it's draggable) with the modal={true} option. Unfortunately, the Window component doesn't have an autoFocusedElement prop, which the Dialog component does.

Best,
Tomek 

Problem: DataResult isn’t supported

Why do we complain about this: 
We want to use virtual scroll functional, but without DataResult support we have to load all items at once (data is pretty massive), which produce unnecessary overload of network.

Does it supported by other components or implementations: Angular TreeList, React Grid

Question: Do you plan to introduce DataResult support for React TreeList in closest feature

I have an App that uses a barcode scanner and interacts with a website using a webview control.  The scanner does not use a keyboard wedge to return data - it uses a callback function to pass the scanned barcode data into the website (built using React and Telerik controls).

In order to provide a target for the barcode data, the user must click the editable control (to place the focus on the control) so that the scanned barcode text is then placed in that control.  For a text box, this is a trivial matter, but for a dropdown list this seems to be more complex.  When a user selects the dropdown list, the list opens up complete with the search box.  Is there a programmatic way of populating that search box with the text obtained from the barcode scan?  I have even tried directly manipulating the DOM to try to set the inner text property, but without success.

Thanks in advance

Mike

I'm trying to add a simple expansion panel to my page. I need to use extra-large chevron-up down expand and collapse icons. I've tried creating an SvgIcon react element and setting its size that way, but I get a typescript error saying the element is missing the name. Is there a simple way to change the expand and collapse svg icon sizes on an ExpansionPanel? This is something I've tried so far:

const expandIcon = (
	<SvgIcon className="k-mb-xs k-mx-sm" icon={chevronUpIcon} size="xxlarge" />
);

return (
	<ExpansionPanel
		title={title}
		expanded={expanded}
		expandSVGIcon={expandIcon}
		onAction={(event) => {
			setExpanded(!event.expanded);
		}}
	>
		<span />
		<Reveal>
			{expanded && <ExpansionPanelContent>{children}</ExpansionPanelContent>}
		</Reveal>
	</ExpansionPanel>
);

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