I have kendoreact grid. I have total 8 columns. out of 8, 4 columns are locked. Currently horizontal scroll bar is displaying for entire grid. But i want to show the scroll bar only for un-locked columns. Kindly help.

requirement: 

I have a kendo react grid. I am doing in-cell editing.  I have option to upload a file & the file might contain wrong data. when i do the upload i have to show the error highlight on each cell. i have done the upload part & showing the new row on the grid. I am facing issue while highlighting the cell with red color. i have already added custom cell for each columns. Please help

Seeing this bug locally, and was able to reproduce it in CodeSandbox:

1. Open this demo in CodeSandbox https://www.telerik.com/kendo-react-ui/components/grid/pdf-export/#toc-getting-started (original sandbox link: https://codesandbox.io/p/sandbox/proud-snow-z89k2q?)
2. Ensure Dependencies includes React 18
3. Make these changes to the bottom of main.jsx:

• Comment out this line:

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

• Add these three lines in place of the above one:

const container = document.querySelector('my-app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App />);

A finished Sandbox in case it saves you some time -- https://stackblitz.com/edit/react-epnjnd?file=app%2Fmain.jsx

• Notice that the first sandbox on page load gives the React 17/18 react-dom.render() issue. In contrast, the finished sandbox doesn't give the React 17/18 issue. This behavior is to be expected.
• Click on "Export PDF" button. You now get the React 17/18 error on both sandboxes. You'd expect the error not to show up on the finished sandbox, as the parent code no longer utilizes the "old way of rendering React".

I have a feature to add display a numeric textbox in the grid while doing in-cell editing. & it depends on a checkbox value.  If the check box in another column is  selected then only the the numeric textbox should be editable in. Kindly help me with a numeric textbox as a custom component in incell grid editing.

I tried to create a numeric textbox as custom component. But i am facing couple of issues.

1)If i add the editor as numeric then the checkbox condition is not matching.

2)if i add editor as text, the cursor in the numeric textbox is not showing if i tryto add more than 1 digit.

Hi,

The older versions of grid had three dots as the grid column header filter icon. The new versions have a different filter icon. How to use the three dots in new version (@progress/kendo-react-grid@^7.2.3)?  Please see the attached image for the three dots icon.

Thanks,

Jie

Hi Team, 

Overview:

We are using Kendo Ui react grid for showing data . We have more than 15 columns in grid with horizontal scrollbar

Problem :

When we are selecting last column in view of screen for sorting/filtering, Kendo Grid automatically changing the view to make that sleected column in center of screen. We are not doing anything explicit for this behaviour to occur . We need to know is this something done  by default through Kendo UI and how we can rectify this issue .

Hi,

Is there a way to have both rowSpan and Pagination on a grid? 

My grid originally has pagination, now that I am trying to merge rows, which have the same values, within a column into a cell; other columns remain the same. I found that once I achieve that it displayed the grid briefly (enough to observed merged rows), but it crashed right away and report error on pagination. I can't remember the exact error but it has something to do with "process", "slice"...

Thank you for the support

Luu

I have couple of issues related to in-cell editing in react grid. I am using NextJs as well.

1) The problem i am facing is when i exit from the cell, the particular cell is still in edit mode. i have added an example for numeric textbox. Even though i have clicked outside the grid, the border is till highlighted & the field is in edit mode.  I am already using custom cell for different fields like( Dropdown list, checkboxes. textboxes, Numeric-text-boxes)

2) In the above numeric textbox, when i add any integer, it will display the number & the cursor will vanish immediately. I have to again click on the numeric text box to add the next  number in the same cell.

3) I have almost 300 records in the grid. I am experiencing slowness in rendering the cells when i edit different cells .

I have referred to this example:

https://stackblitz.com/edit/react-czmt6w-tpf8qh?file=app%2FcustomCells.jsx,app%2Fmain.jsx

i have following setup.

parent component holds state information about data and the prop is passed to child ckmponent condiitionally based on data availalbility.

child component contains nested react grid as part of detail property. On particular event from nested grid which is part of detail i am updating a setter function on parent component and expect the grid to rerender with new data . Everything works fine except the new data is not rendered in nested grid automatically.

i have to collapse and expand again to view the updated changes in nested grid ..

grid version 5.19

can anyone give some pointers or share working example of such scenario