Greetings,

Is there a way to update the content of the "Edit Recurring Item" dialog and disable/remove the "Edit current occurrence" option from Scheduler?

Please see the attached screenshot, thanks!

On the Scheduler, we have three requirements that we need to implement on the first row:

• We need the first row (Open Shift) to be "sticky" and to stay in view at the top of the Scheduler as we scroll
• We need the SchedulerItems within the sticky row to remain inside the sticky row as we scroll
• We need to be able to drag SchedulerItems from the sticky row into different lower rows

We got close to implementing these features with the WeekView, but our rows need to correspond to employees and not hours, and we add the employee data as resources.  Every time we add resources to the Scheduler with the WeekView it adds them as an additional row column instead of replacing the hours column. We also tried creating our own custom slot to have the SchedulerItems remain sticky when scrolling, but it still wouldn't remain in the sticky row.

So my specific questions are: 1) Can the three requirements be implemented in the Scheduler? 2) Is using resources the correct way to add the employee column for the rows? If not, what is the correct approach?

Hey team, so, I suspect there is something perhaps wrong with the scss files or the css files after I run sass to compile it. I have been trying a few different material related themes that come out of the box (not tinkering). Just to list a few:

• material-lime.scss
• material-lime-dark.scss
• material-sky.scss

I haven't tried the others yet. But one of them seems fine, material-nova.scss appears to be okay after running the sass command. My point being, when I tried to compare my own app and the examples on the website, it always looks different. Especially for the selected RadioButtons.

Also, just a separate but important question. I have been experimenting and trying different approaches to importing the css files after I did a compilation. For example:

sass material-lime.scss material-lime.css

And then after that I would import material-lime.css to my App.js file.

But when the application is doing a hot reload, the changes aren't reflected on the web page. Separately, I have experimented with import the css file in the component's index.jsx file. Sometimes it works, sometimes it doesn't. So I'm really curious as to why it's like this.

Is there a proper method to importing the themes/styles and then seeing the changes reflected on the web page after running npm start?

What is your recommendation?

P.S. At this present point, I clearly haven't tested every single other UI components from the library, so I won't know if there are others that are affected as well. So far, I've only discovered the issue with the RadioButton and RadioGroup components.

Something seems to have changed between Grid v5 and v7.  Previously, I could set the overall grid text color with a simple style prop on the Grid itself.

<Grid style={{ color: "#000" }} ... />

That no longer works, so now I need to use a custom CSS class like this:

.k-grid-black .k-table-td {
    color: #000;
}

<Grid className="k-grid-black" ... />

Seems I have to use the selector .k-table-td for that class.

This works, however, now any rowRender function can't set a custom color - it gets ignored.

Any suggestions on how to make this work better?  Thanks!

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')]
    }
  }
}

Hello,

We recently upgraded Kendo packages to fix some weird behaviors but have noticed that the styling of MenuItems and the associated arrows changed despite our CSS styles not changing. As can be observed, the arrow has gone transparent and we are unable to determine how to try to change its style to white. We are able to still change the font color and background, but the arrow remains unaffected.

Pre Upgrade:

Post Upgrade:

I need to make all grid lines and axes disappear on a Chart using ChartSeries and not ChartCategories. I realize the standard answer is to set line visibility to false on ChartCategoryAxisItem, but for technical purposes this chart needs to not utilize categories.

The code:

<Chart style={{ height: 179, background: "#DDE9ED" }}>
<ChartArea background="#DDE9ED" />
<ChartSeries>
<ChartSeriesItem
data={series}
gap={1} type="bar" field="data" categoryField="name" color="color"
labels={{ visible: true, font: "14", background: "#DDE9ED" }}
/>
</ChartSeries>
</Chart>

How the chart currently looks:
How we want it to look:

Hi guys,

I'm trying to style a <Pager pageSizes> dropdown popup.

Is there any way to add a className to it? Or the only workaround is to create a complete custom Pager to do so?

Thanks!

Hello,

we have a use case where our actions column are hidden in grid because they are extra actions and there can be a lot of them, so we decided that we want to show them only when you hover over a row and show actions for that specific row. One of these actions is Menu where the parent is icon with vertical dots. When we hover over it shows menu items correctly, but when we hover one of the items the row loses hover and actions get hidden again even tho the popup is still open. 

The problem is because the popup opens in a portal outside of root, and it is separated from the grid altogether.

Here is simple reproducible issue demo with parent dissapearing when hover over menu items: Demo of the issue

Ideally we would like the row and actions to stay open in grid on that specific row and only close when we leave row and popup.
We tried implementing openPopupOnClick prop but it was worse user experience and still issue with hover after the first time.

Thank you for your help!