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

Hi all, I am trying out Kendo UI React Scheduler to make a custom appointment dashboard. The view I am interested in is the DayView.

I have done various tests and have some questions that I have not been able to find answers to.

• is there a possibility to set a fixed width to the items? Via API it does not seem feasible and the workarounds I have tried do not seem to have the desired effect either (the internal algorithm assign width and positions dynamically)
• is there a possibility of forcing a custom sorting of items starting at the same time? The only way I have found is to sort the data array however I have noticed that the scheduler still gives precedence to events that last longer than shorter ones, regardless of the sorting I have set.

Thanks in advance for your attention.

Fabio

Hello,

We are using globalization in our application and one of the requirements is showing different values in different ways in our NumericTextbox. Problem is our application is in en-US and we would like it to stay that way except for the numeric where we have multiple requirements for different locales in which all are editable. So there is no way to formatNumber(12312312, 'c2', 'de') for example and for language of the application to remain in some other language.

We would like to specify locale by passing prop and loading the cldr data before hand and format the number as we like and for it to work in view and edit mode like it works now for english, so instead of $1,234.00 we would want in some cells to be 1.234,00 €, also for percentage not to be %1.75 but 1,75% in per case basis. We tried using kendo-intl and not kendo-react-intl for formatting numbers using formatNumber and c, c2, n, n2, p, p2 but then group number separators as well as currency code or percentage symbol is deletable in edit mode.

Hope there is a solution for this and hope to hear from you soon.

Best regards

Greetings,

I'm having some issue with compiling the Scheduler npm package after installing it and its dependencies.

This is the error after running "npm start":

./node_modules/@progress/kendo-react-scheduler/index.mjs
Can't import the named export 'Button' from non EcmaScript module (only default export is available)

Please help, thanks!

Jason

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

Hello.

I am trying to use export to PDF. Unfortunately, the resulting pdf contains incorrect characters. I know, I saw the posts:

PDFExport .save does not pass special characters to pdf in KendoReact | Telerik Forums

React Drawing Component & Unicode and Embedded Fonts - KendoReact Docs & Demos (telerik.com)

But. I tried it and it works correctly. But if I used shadow DOM (I need this approach), then the pdf is incorrect. I tried adding styles via the approach:

document.createElement('style');

style.innerHTML = styles;

shadowRoot.appendChild(style).

But it doesn't work.