Add a prop to add your own class name to the Dialog

I am using the ComboBox component in IE11.  When the control has a value, the clear button covers the select arrow at the right of the control.  This occurs because IE11 does not allow nested calc() calls in the CSS width property, e.g. 

.k-dropdown-wrap .k-clear-value {
    right: calc(calc( 0.75rem + 17px) + 6.5px);
}

Removing the inner calc() works well enough:

.k-dropdown-wrap .k-clear-value {
    right: calc(( 0.75rem + 17px) + 6.5px);
}

Unfortunately, this rule seems to originate from a CSS function call to which I do not have access.  Is it possible to remove the inner calc()?

When using the DialogActionBar, its flex CSS property is flex:1 0 0.  For some reason, this is not a valid value in IE11, and I need to specify the flex values explicitly:

.k-dialog-button-layout-stretched .k-button {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0px;
}

Can this be added to the original stylesheet so it works out of the box?

TimePicker is missing the localization properties.

DropDownList and MulstiSelect do not open on click(IE 11). 

They do open sometimes, but it seems random.

They do open when using the keyboard.

When rendering an AutoComplete, I get the following warning:

Warning: Failed prop type: Invalid prop `children` supplied to `Popup`.
    in Popup (created by ListContainer)
    in ListContainer (created by AutoComplete)
    in span (created by AutoComplete)
    in AutoComplete

I have tried this in the simple case below:

ReactDOM.render(
    <AutoComplete
        className="form-control"
        required={true}
        validationMessage="Location Required." />,
    document.getElementById('root'));

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)

If you create a react grid without any GridColumn components and then add those components later, the added columns do not show and the grid is empty.  It appears, after a quick look that the columns have a width of 0 pixels.  They exist in the html, just not displayed.

 

See https://codesandbox.io/s/mmr894nllp as an example of the problem.  This example starts with a populated grid.  You can add columns and data using the buttons above the grid.  This works fine.  If you then "Reset" the grid with the button, which removes all data, any attempt to add columns and data will show a blank grid.

 

Thanks,

Joe

We are evaluating the React Grid component for our application and need to be able to have rows that span all columns.  To do this, I have created a rowRender function that, for some rows, will render a single <td> element with the colspan set to 100%.  The row renders fine, but the other rows, that have multiple <td> elements do not all render correctly.  For my test application, they will render with a width of 8 pxs.  On resize of a column, they will almost render correctly.

Here are some pictures of the issue in our test code.

https://drive.google.com/open?id=1bMwlUi7-7QiVHc6lubPiz45svHG1FSnS

I have created a sandbox that sort of reproduces the bug. https://codesandbox.io/s/w73v0x0mz8

If you select the "Show Full Row", the row with Id 999 will convert to a single <td> element with colspan='100%'.  You will notice how after doing so, the last three columns collapse to a small number of pixels.

 

Thanks

Joe

Hello, 

I would like to request the support of the search panel within the grid component same as in ASP.NET Core UI (https://demos.telerik.com/aspnet-core/grid/search-panel)

Thank you

 

Q:

From the last conversation through the webinar

jQuery Filter looks cool! What about Kendo React Filter?

Hi, I'm trying to know if the components that are publicly exposed do not contain the correct styles. For example I tried to do this: 'https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-all-cell/' but the result is not even close to what it should look like and I want know if it is because these styles / features are only with the paid version.

KendoReact Editor not working in NextJS application.

This is the error:

ReferenceError: navigator is not defined.

The error can be reproduced in our NextJS application as well when adding the Editor component.

The error may occur due to this line:

const firefox = /Firefox/.test(navigator.userAgent);

i am using KendoReact Drawdom version 1.5.12

I have some input elements for uploading images, and showing the a preview of uploaded image.

I want to export a PDF version of the form, but drawDom.cloneNodes() throws an exception when handling input elements of type file. that is because these type of input elements can not have value attribute.

 

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

Hi

Please add SignalR support for grid and other controls similar to Kendo UI for jQuery.

 

Thank you

Hello,

 

We need to create a DateTime Picker with max and min limit on Date and also Time.

Currently, the range works as of 22/09/2019 5:30 AM to 21/09/2020 5:30 PM, where complete 24 hrs is been selectable.

We need the time range to be restricted per day. For instance, in the above example, it should be 5:30 AM to 5:30 PM per day from 22/09/2019 till 22/09/2020.

 

Thanks in advance.

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>

How to select  cells in the KendoReact Grid, Not row selection