In the case of multiple columns headers, the column width of the KendoReact  TreeList  is invalid

 

 

There seems to be bug in the React Grid around date formatting inconsistencies:

Current behavior
When entering a date format of {0:dd/MM/yyyy} for a ColumnData prop, when in edit mode a calendar picker shows the date format as US date of MM/dd/yyyy.Expected behavior
The date should show as dd/MM/yyyy per the requested date format.Minimal reproduction of the problem with instructions
Create a Kendo grid with one column with following ColumnData:
const settlementDate: ColumnData = {
field: 'settlementDate',
title: 'Setlement Date',
format: '{0:dd/MM/yyyy}',
filterable: true,
filter: 'date',
editor: 'date'
};
Note that the date is displayed as MM/dd/yyyy
Change the format to "dd/MM/yyyy"
Note that when in view mode the date is displayed as "dd/MM/yyyy".
What is the motivation or use case for changing the behavior?
Currently I have to create a custom date cell for every instance of using a date field in my grid which is less than ideal.Environment
Package versions:
@progress/kendo-data-query@1.5.2
@progress/kendo-dateinputs-react-wrapper@2019.4.1014
@progress/kendo-base-component-react-wrapper@2019.2.606
@progress/kendo-drawing@1.6.0
@progress/kendo-dropdowns-react-wrapper@2019.4.1014
@progress/kendo-base-component-react-wrapper@2019.2.606 deduped
@progress/kendo-react-data-tools@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-dateinputs@3.9.0
@progress/kendo-date-math@1.2.0
@progress/kendo-react-buttons@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-dropdowns@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-grid@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-inputs@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-intl@3.9.0
@telerik/kendo-intl@1.5.2
@progress/kendo-react-pdf@3.9.0
@progress/kendo-file-saver@1.0.7
@progress/kendo-theme-default@4.7.0
@progress/kendo-theme-material@3.5.0
@progress/kendo-ui@2019.3.1113Browser:Chrome (desktop) version 78.0.3904.108
System:
Platform: Windows

Other information:
It appears that there is an incompatibility as to what a text display field requires as opposed to what a date picker requires. For text display it requires a format of '{0:dd/MM/yyyy}' whereas the datepicker requires a format of "dd/MM/yyyy".

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.

Hi Guys,

In GridProps for KendoReact Grid there is an error in the type information:

Found here: https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-rowrender

In the GridProps.d.ts file it is:

    /**
     * Fires when a row is about to be rendered. Overrides the default appearance of the row.
     */
    rowRender?: (row: React.ReactElement<HTMLTableRowElement>, props: GridRowProps) => React.ReactNode;

This should be changed to:

rowRender?: (row: React.ReactElement<React.HtmlProps<HTMLTableRowElement>>, props: GridRowProps) => React.ReactNode;

 

Note that the React.ReactElement definition is:

    interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
        type: T;
        props: P;
        key: Key | null;
    }

 

So the first type parameter should be the props typ.

I noted this while making use of it. After changing it it behaves sensibly. Worked around in my case by using 'as any' to void the type clash.

Cheers,

Stuart

Problem:

The DateTimePicker does not work in IE11 due to it's failure to fully support the shorthand syntax for flex (https://github.com/philipwalton/flexbugs#flexbug-4). In order for it to work in IE11 flex-basis needs a unit defined and therefore does not support calc() in this scenario.

Potential Fix:

If you break out flex-grow, flex-shrink and flex-basis then calc() can be used for flex-basis.

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.

 

 

Getting started page tuto - App.js should be App.jsx. When you use the latest version of VSCode - js deformates tags - in good old js, there are no tags. Just edit to jsx, and edit npm start command

Column locked with KendoReact Grid is not locked in the iPhone safari.  It's OK in Chrome phone simulator, but not in mobile. 

 

<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>

Hi,

I created a solution using KendoReact Editor.

The editor is set to enable the creation of tables (EditorTools.InsertTable).

When the property 'defaultEditMode' is set to 'iframe',  the editor inserts a correct table with a width of 100% and visible cell borders.

If I set the 'defaultEditMode' to 'div' and insert a table the table has a width of some pixels and no borders are shown. In other words, the inserted table is not usable.

I need to set the editMode to 'div' because otherwise the editor doesn't adjust its look to the other parts of the page. The font is wrong etc.

How can I get the tables to work in 'div' mode?

 

Kind regards

  Christian 

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

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);

Pressing enter in the ComboBox will select the first item with the same text value.

If we have items with the same text value and we navigate through them with the arrow keys and then select one with enter, the ComboBox will return the first item with that text instead of the currently selected one.

The tooltip display position of KendoReact Chart  is incorrect

See the code.thank you

https://stackblitz.com/edit/react-vu1ffd?file=app/main.jsx

 

 

 

AutoComplete focused item is not set correctly if the items are with different height.

Currently, it is required to have the same height for the items, but this can be very hard in cases when the items are dynamic with various height.

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?

The Switch layout is misaligned on IE 11.

This is reproducible in our demos as well.

GitHub issue: https://github.com/telerik/kendo-react/issues/220

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 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'));

I updated to the latest version of the kendo react components (3.2.1) and notices that if there are no records in the grid - the message is displayed in the first column rather than spanning - this behaviour is also happening in the demo - see the attached.