The SCSS files from the kendo-theme-material contain !important rule, that makes it difficult to override the styles in the consuming application.

We have a requirement to customize the DatePicker Kendo React component so that it has a border around all 4 sizes, as by default the theme has the border only on the bottom.

We have applied a new custom style to k-picker-wrap  and added the 
border-top-color: $datetime-border !important;

style

 

But due to the !import rule in the file 

@progress\kendo-theme-material\scss\datetime\_layout.scss, line 15

the custom style that we applied in the consuming application does not get applied.

 

Please find screenshots with the details of the problem.

The screenshots indicate that the custom style for the border-top-color did not get overriden, and the box is missing the top border.

Kindly advise approach that we can use to customize the CSS styles that has !important CSS rule, so that we can override the styles defined in the material theme.

We are implementing the application level zooming.

When user changes the zoom level from "100%" to , say, "200%",

all the components on the web page rerender proportionally bigger.

 

And we need to zoom the DatePicker react component as well.

We tried to use unofficial "zoom" CSS style property

https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

and "scale" CSS function, but that does not give a good solution.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()

 

If that takes time, please advise an approach how we can achieve zooming of the DatePicker/DateInput react component.

So far only interested in zooming of the DateInput and calendar toggle button (not popup Calendar itself).

I would find a Readonly bool prop for the Editor, really useful in certain scenarios

 PanelBarUtils.mapItemsToComponents to set all parents as expanded when a child item has expanded true.

This is helpful as in some case the panel bar items represent a path and if an inner element is selected/expanded this means that the full path (all parent items) have to be expanded as well.

Hi,

How to set the default operator of a second date filter which is different from first,

I have attached the screenshot for two different operator i need in case of date filter.

Hi, 

How do I create a multi-row cell in footer? I have attached a screenshot as reference. Thank you

Is there a way to add a tooltip to the React Gantt component, just like adding the Gantt React wrapper?

Hi,

 

Good day!

 

Thanks for this wonderful library - we actually have a paid license in using ReactKendo.

Just a concern, because right now we are using TypeScript for us to improve our code quality but most of the Components in KendoReact is using any and not even allowing to pass a generic type.

 

Like for example in using KendoGrid - the data has `any` property so when rowClick is triggered, it returns `any` data type for `dataItem`

 

So what I did was, I wrapped the KendoGrid Component that would allow Type-Safety and override the `onRowClick` and any other functions that involve sending `dataItem` property.

 

Thanks!

 

Best Regards,

Lee

 

1. Configure a Kendo React Grid with paging on a react-bootstrap tab that is hidden on initial load
2. Navigate to the tab - the Grid is rendered with truncated paging controls and no item count
3. Resize the screen in any way - the full paging controls and item count are restored

Is there a workaround for this issue?

A Wizard Control, allowing any number or steps vertical or horizontal plus ability to modify the look and feel of the steps.  Also the ability to add other controls within each step.  For example a wizard control with the ability to have 3 steps, in which one would have a grid, or scheduler or other components.

I have a need for the 'Drop files here to upload' text to always be visible in the drop area of the KendoReact Upload component. Example of what I am talking about is in attached images.

 

The scheduler component does not work in Internet Explorer. We need to support IE 11 for our costumers. On the Kendo React example page I get an error that the  'object does not support property or method 'entries'.  In the code we're developing the error is similar, but refers to 'forEach' instead of entries. 

Currently, using npm install --save @progress/kendo-theme-material will get the standard Material Design theme for use across the React Components, but why is Material Black not available this way? (npm install --save @progress/kendo-theme-materialBlack)

On your Grid Demos:   When ever you try to edit a text cell the cursor always goes to the end of the text box

 

For example, go to your demo:

 

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

 

- Edit the first row.  Try to type something before "Chai" - the cursor will jump to the end of the textbox

Hello Kendo React Team,

 

Here are a few bugs to address on the Kendo React Scheduler (3.6.0)...

 

Issue 1: November 3, 2019 Repeated on Week/Month Views

Visit https://www.telerik.com/kendo-react-ui/components/scheduler/views/month/ or https://www.telerik.com/kendo-react-ui/components/scheduler/views/week/, navigate to the first full week in November 2019. You will notice that 11/3 is repeated for Sunday/Monday. I'm wondering if this issue is related to daylight savings time. The calendar does not have a timezone configured (just uses the default UTC and my local timezone is PST).

 

Issue 2: Clicking an empty all day slot does nothing.

The onSlotClick callback should be fired when clicking on an all day event. I currently have to add an event listener using document.querySelectorAll("[data-slot-allday='true']"); to get the right behavior (definitely not ideal).

 

Issue 3: onItemDoubleClick and onSlotDoubleClick do not work on mobile devices.

My current solution to get everything to work on desktop and mobile is to use the onItemClick and onSlotClick and to not integrate useCallback with double clicking.

 

Suggested Improvements:

• The documentation is silent about onItemClick, onSlotClick, onItemDrop, etc. These are essential to extend the behavior of the scheduler. I had to dig through the node modules directory and look through the .ts files to figure out how to use these work.
• The mobile experience is awful. I miss the isMobile prop on the kendo-scheduler-react-wrapper. Whether you reintroduce that prop or add better css for smaller viewports, it would be greatly appreciated.

 

 

<Grid
                    style={{ height: '400px', width: '500px' }}
                    data={products}
                    reorderable
                >
                    <Column field="ProductID" title="ID" width="45px" locked />
                    <Column field="ProductName" title="Name" width="250px" />
                    <Column field="Category.CategoryName" title="CategoryName" />
                    <Column field="UnitPrice" title="Price" width="90px" />
                    <Column field="UnitsInStock" title="In stock" width="90px" />
                    <Column field="UnitsOnOrder" title="On order" width="90px" />
                    <Column field="Discontinued" width="120px" locked={true} />
                    <Column field="QuantityPerUnit" title="Additional details" width="250px" />
                </Grid>

Hello

There was an error calling “ chart.surface.redraw() ” 

 

  onRender = (args,mapValues,stackedOrderBy) => {              
        const chart = args.target.chartInstance;      

        const valueAxis = chart.findAxisByName("valueAxis");
        const categoryAxis = chart.findAxisByName("categoryAxis");

        if (!chart) return;        

           let x= 1;
            if( stackedOrderBy!="Ascending")
                x=-1;

            let axis = categoryAxis.options;

            axis.categories = axis.categories.sort(function (a, b) {
                if (mapValues[a] < mapValues[b]) {
                return -1*x;
                }
                if (mapValues[a] > mapValues[b]) {
                return 1*x;
                }

                return 0;
            });


            chart.surface.redraw();

                           

In the KendoReact Scheduler component, there is a bug when you try and change the date for an event.

Steps to reproduce:

1. use an editable scheduler component in your website
2. click on an event in the scheduler to open the modal
3. in the modal click on the date selector (calendar) icon next to Start or End.
4. The date selector is behind the modal

Looks like you need to change the z-index of the date selector if it is a child of a modal.

 

Thanks! I attached screen shots.

When using the <Window> component, there is an issue trying to maximize, when a parent element has positioning (ie:  position: absolute, position: relative).  The calculation for defining the width uses window.innerWidth (similar for height).  However, for placement, it uses top and left = 0.  

You can see a sample of this on StackBlitz:

https://stackblitz.com/edit/react-59kqss

This is a straight copy of https://www.telerik.com/kendo-react-ui/components/dialogs/window/controlled-mode/, but added the additional styles to the parent <div>.

Version is 3.14.

 

Thanks.

The ability to insert images in the Editor from the file system.

This can be done from the file browser or using drag and drop.