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,  I've created a drop-down list for my react application. However, when I set the initial value, the required validator is triggering even though a selection has been made. Is there something else I need to be doing?

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, I was just wondering if there is some type check in KendoUI that I could use to check translation files so that nothing is missed in translations?

I've tried to search forums and documentation site and I did not found any examples of that. If there is no support for this at the moment, maybe it should be added, since I am sure that many dev teams struggle with keeping the huge number of translations up to date.

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

Overview

Some components have a ::before pseudoclass with the content property set to the CSS code \200B , which is a zero-width space. However, in our project, this is coming out as ​ in the DOM.

For example, with the <Dialog /> component:

1. We render the dialog within a componet, giving it a title which comes from props

const MyComponent = (props) => {
    return (
        <Dialog title={props.title} onClose={props.onClose}>
            . . .
        </Dialog>
    )
}

2. Locally (running in our development environment) we can see the CSS come out as expected

3. After building and deploying to an environment, the "" gets replaced with ​

Additional Information

After building the project locally, our CSS (build/static/css/main,xyz.css) does not include these symbols:

We are using Craco to build our project:

// craco.config.js

module.exports = {
  style: {
    postcss: {
      plugins: [require('autoprefixer')]
    }
  }
}

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