I've run into an issue when using both grouping and a custom cell with a react grid. A new column seems to be created in the grouping row, and the other rows are pushed to the left, which causes the headers to no longer line up.

Here's a link to a fork of the grouping example from the docs, with a custom cell added that shows this: https://stackblitz.com/edit/react-t9ce44?file=app%2Fmain.js

Did I miss something, or is it bugged?

Hello,

In a react grid, i have an editable text field. I discovered that the whole grid was re-rendered after each keystroke. Depending on the size of the grid and its complexity, this may slow down the cell edition.   

Is it possible to only re-render the edited cell ? How can I speed up cell edition ?

Regards,

Jean-Pierre

Step to reproduce:

Case 1:
1. Go to documentation page: https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/filtering/
2. Type “ar” symbols

Actual result: Focused element is Bulgaria instead Armenia

Expected result: The first element in list focused - Armenia

Case 2:

1. Go to documentation page: https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/filtering/
2. Type “ary” - Hungary is suggested

3. Remove "y" to search "ar"

Actual result: There is no selected element
Expected result: The first element in list focused - Armenia

Is there a way to fix this behaviour?

Hi,

Do we have any combine control for datetime picker? I checked in website and found that there are two different controls one for date and one for time i.e. datepicker and timepicker.

But in my case, I want only one control where I can add date and time manually as well as through calender and time selector.

Regards,

Parag

I am working with a kendo react grid, and i need to implement to open a menu by right clicking on any cell.  By using onContextMenu on the cell render, I am able to open a popup:

cellRender(tdElement, cellProps) {
        const dataItem = cellProps.dataItem;
        const field = cellProps.field;
        const additionalProps = (cellProps.dataItem[this.editFieldName] && (cellProps.field === cellProps.dataItem[this.editFieldName])) ?
            {
                ref: (td) => {
                    const input = td && td.querySelector('input');
                    if (!input || (input === document.activeElement)) { return; }
                    if (input.type === 'checkbox') {
                        input.focus();
                    } else {
                        input.select();
                    }
                }
            } : {
                onClick: () => { this.enterEdit(dataItem, field); },
                onContextMenu: (e) => { e.preventDefault(); this.onContextMenu(e, dataItem, field); }
            };
        return React.cloneElement(tdElement, { ...tdElement.props, ...additionalProps }, tdElement.props.children);
    }

...

Is it possible for a Popup to detect that it has lost the focus, and then set show property to false ?

Best regards.

PS: Maybe there is a better solution to implement a context menu ?

I have seen a real time chart demo for Kendo UI for Jquery

https://www.telerik.com/forums/redraw-in-real-time

https://demos.telerik.com/kendo-ui/chart-api/benchmark

Is there a similar example of a real time chart for the Kendo Components for React?

Hello Telerik,

  I need insert multiselect in dialog, but result not fine: https://stackblitz.com/edit/react-2dnqba?file=app/main.js , because multiselect dropdown is show under dialog window. How do I do it?

  Thank you Pavel

Hello,

I want to display a kendo react grid with in cell editing. Two of these columns should display a dropdown list when cells are editing. I cannot make it work. I started with:

https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell/:

And then added a custom cell based upon: 

https://stackblitz.com/edit/react-grid-dropdown-editor

My issue is that when i click on any cell of on of these two "special" columns, nothings happens.

The grid is defined by:

return (
            <div>
                <Grid
                    data={this.state.data}
                    onItemChange={this.itemChange}

                    cellRender={this.renderers.cellRender}
                    rowRender={this.renderers.rowRender}

                    editField="inEdit"
                >

....

               <Column field="TypeMO" title="TypeMO" cell={(props) => <CustomCell {...props} values={this.state.derogDataValues} />} />

....
                </Grid>

....

The custom cell is defined by 

export default class CustomCell extends GridCell  {
    handleChange(e) {
        this.props.onChange({
            dataItem: this.props.dataItem,
            field: this.props.field,
            syntheticEvent: e.syntheticEvent,
            value: e.target.value
        });
    }

    render() {
        const dataValue = this.props.dataItem[this.props.field];

        if (!this.props.dataItem.inEdit || this.props.dataItem.inEdit !== this.props.field) {
            return (
                <td>
                    {!dataValue || dataValue === null ? '' : dataValue.toString()}
                </td>
            );
        }

       return (
            <td>
                in edit
            </td>
        );

}

"in edit" is never displayed.  

I must be missing something obvious :)

Hi,

Whenever I am trying to export grid to PDF, I am not able to export the rows and columns that are hidden by scroll.

I am using following library.

 import { PDFExport as GridPDFExport } from '@progress/kendo-react-pdf';

please go through the attached screenshot.

Also I need your help to understand, how shall I keep first column Freeze in react grids.

Thanks,

Vikrant

Hi there, I have several quastions. 

1) How I can block manual data change in input and key down events. Leave only one way to change data by mouse click.
2) How I can show previous days in month, instead empty fields we will show days from previous month but their color will be gray.
3) How I can  disable days in currrent month till today?