Hi,

The new KendoReact Drawer component looks amazing and works like a charm. It would be great if it supported sub-items similar to the PanelBar component. Having sub-items would simplify the development of sidebar navigation with KendoReact.

<PanelBarItem title={'About'} route="/about">
    <PanelBarItem title={'Team'} route="/about/team" />
</PanelBarItem>

Regards,

Basel 

The KendoReact Tooltip component only displays tooltips on hover (the showTooltip method is called on the onMouseOver and onMouseLeave events). It would be ideal if the showTooltip method was also called on the onFocus event as well, making the user experience the same for keyboard-only users.

Most other UI libraries treat hover/focus the same for consistency and accessibility.

Bootstrap requires it:
https://getbootstrap.com/docs/4.1/components/tooltips/#making-tooltips-work-for-keyboard-and-assistive-technology-users

Material UI allows you to disable focus interaction, but the default is that focus is handled the same as hover:
https://material-ui.com/api/tooltip/#props

Hello,

I have two Menus and I need to customize their popups differently. Can I specify somehow Menu Popup id or className?

As I can see Popup component has className property, but it is hard-coded in MenuItemInternal.prototype.getPopupClassName and neither Menu nor MenuItem classes are used in popup.

Any suggestions?

Thanks.

Hello!

I use DateRangePicker to filter data in some period in the past.
Now, when I open DateRangePicker, it renders a calendar with current and future month. Therefore our users always have to click on the "left arrow" to select previous month.

Is it possible to open DateRangePicker with calendar, that renders previous and current month? I tried propfocusedDate, but it is not suitable in this case, because the component is "controlled" (it always has some value, by default it is current date).

It would be great, if you will add some settings to do this.

We use "@progress/kendo-react-dateinputs": "3.10.1"

How we use it:

<DateRange
  onChange={handleDateChange}
  value={selectedDates}
/>

Actual result: April and May month in view.

Expected result: March and April month in view. 

Thanks for your attention. I’m looking forward to your reply. 

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

Hello again Kendo React Team,

Our team recently started using the Kendo React DateTimePicker and noticed that if the user clicks "Today" followed by "Now" the drop down does not automatically go away. The DatePicker and TimePicker both have this desired action of closing the drop down when selecting. Would it be possible to add this functionality to the DateTimePicker?

Thanks,
Mark

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

I'd like to be able to get the generated pdf data from GridPDFExport in a callback, instead of saving to file. This is useful for emailing pdfs.
It can easily be achieved by adding a 'generatePDF' method to the KendoDrawingAdapter prototype such as this:

  KendoDrawingAdapter.prototype.generatePDF = function (callback) {
        var _this = this;
        var savePromise = this.drawDOM(this.domElement, this.getDrawOptions())
            .then(function (group) { return _this.exportPDF(group, _this.getPDFOptions()); })
            .then(function (dataUri) { return dataUri });
        if (callback) {
            savePromise.then(callback, callback);
        }
    };

Would it be possible to add a react wrapper of the angular / jQuery Sortable library?

https://docs.telerik.com/kendo-ui/controls/interactivity/sortable/how-to/AngularJS/use-sortable-grid-angular

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>

Although Kendo React UI supports virtualization for grids with many rows, supporting virtualization for wide rows with hundreds of columns would increase rendering performance.

https://www.telerik.com/account/support-tickets/view-ticket?threadid=1343205

For example, the user goes to an URL where the query string is created initially with the toDataSourceRequestString method, we need a method that will parse that query string to the Grid data state object, so it can be applied to the Grid when the user returns to that URL.

It seems the Angular date pickers allow an actual placeholder attribute in stead of populating with the format as the React components do. The current functionality is limited in terms of the experience and requires workarounds as found in this thread.

https://www.telerik.com/forums/datepicker-without-placeholder?actionMode=replyThread

Hi, 

Is it possible to define where the dropdown container (i.e. k-list-container) is appended in the DOM?

By default it is appended at the bottom of the body but I'd like to define where it is appended.

The reason why I need to do this is because I'm using the KendoReact components in a WebComponent (custom element) which is hosted in a shadow-dom for isolation.
The styles are also only loaded within the shadow-dom and are therfore not applied to content on the outside. 

The issue is that the kendo dropdown container is appended outside of the shadow-dom and the scope of the kendo styles.
The dropdownlist component is styled correctly but the dropdown part that is appended to body is not styled.

I've solved this with other components (i.e. modal window) by defining where I want the the container appended with the createPortal method in React.