Hello,

 

i am new to React and Kendo React UI.

I am reading the documentation for Gantt, and if i understand it correctly i can customize header column (headerCell?), but I dont know how. Is there any examle ?

I wound like to customize the column with dates.

 

Thank you, Matjaz Reberc

Chat input where user can hit "Shift + Enter" to manually separate lines.

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 to select the tree-list column like excel column selection ?

How can be copy selected column data with the another column  ?

 

please provide the reference link or example.

 

 

--

I am using ExcelExport...

import { ExcelExport, ExcelExportColumn } from "@progress/kendo-react-excel-export";

 

one of the columns being exported is an Enum value.   Is it possible to export the data and have the excel column be a dropdown picklist?  I've attached a file of an example

 

Thanks

 

In Kendo angular you can tell the tooltips to flip when they collide with the edge of the viewport:

https://stackblitz.com/edit/angular-gaezr2?file=app/app.component.ts

A problem with angular is it can't detect a collision in both directions. In the above example, the top tooltip only flips downwards but not to the right.

As for Kendo React there is less control. It seems to always want to "fit" with no option to flip when a collision happens. I have prepared 3 examples below. for position left, right and default:

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

Hi 

 

I am currently using kendoReact TreeList and using custom filtering for text. I want to limit allow filtering to happen only after user enters 3 or more characters. For this I want to show a placeholder saying "Enter more than 3 characters to filter....". Can I add a placeholder to the filter header ?

 

Thanks and Regards

Gaurav Thakur

Is there an option where when the PanelBarItem is collapsed it collapses the content and does not remove it from the DOM so we can keep the state of the content in that control?

Please refer to this stack overflow question that explains all the problem statement and what we need to accomplish in the new feature https://stackoverflow.com/questions/55957108/how-to-change-the-header-of-the-details-expand-collapse-columns-for-the-detail-r

I'm looking at implementing a Chart with multiple ChartPane, each with their own legend displaying only the series displayed in the respective pane.

Here is an example of the layout with separate charts: https://stackblitz.com/edit/react-xtyhbu-muedhd?file=app%2Fmain.js 

After speaking with support, they suggested I created a feature request here.

Is it possible to add a target line to the ArcGauge?   I have attached a picture of what I would like to accomplish using the ArcGauge component.

 

Add SVG support for the Tooltip component.

The SVG element does not have a title attribute but instead is using an <title> element.

When then CSS "rotate(90deg) translate(...)" is applied to KendoReact Chart, the coordinates of tooltip are incorrect.
In order to display  KendoReact Chart on mobile phones on a horizontal screen, CSS "rotate(90deg) translate(...)"   is applied to KendoReact Chart,

but the coordinates of tooltip are incorrect.

 

sourcecode:

     let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
     let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 

     let x = (h-w)/2;
     let ts = "rotate(90deg) translate("+x+"px,"+x+"px)";
     const maxstyle={
        transform:ts,
        width:h,
        height:w,
        top:0,
        left:0,
        paddingLeft:5,
        paddingRight:5,
        paddingTop:5,
        transformOrigin:"center center",
        background:'#f5f5f9',
        overflow:"hidden",
        position:"fixed",
        zIndex:10000
    };

<div  style={maxstyle}>
                    <img src={closeImage} onClick={this.onBack.bind(this)} className="closeImage"/>
                    {this.renderSingleBlock()}
  </div>

Add an option to export to Excel without the gridlines.

The achieve the same result as the one shown here:

https://support.office.com/en-us/article/show-or-hide-gridlines-on-a-worksheet-3ef5aacb-4539-4ad5-9945-5ed53772dc4d

Add controlled state for the Tooltip visibility.

This will allow to programmatically show and hide the Tooltip.

In order to display  KendoReact Chart on mobile phones on a horizontal screen, CSS "rotate(90deg) translate(...)"   is applied to KendoReact Chart,

but the coordinates of tooltip are incorrect.

     let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
     let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 

     let x = (h-w)/2;
     let ts = "rotate(90deg) translate("+x+"px,"+x+"px)";
     const maxstyle={
        transform:ts,
        width:h,
        height:w,
        top:0,
        left:0,
        paddingLeft:5,
        paddingRight:5,
        paddingTop:5,
        transformOrigin:"center center",
        background:'#f5f5f9',
        overflow:"hidden",
        position:"fixed",
        zIndex:10000
    };

Allow sorting per column by a field other than the displayed field on the column. This goes for group sorting as well, when grouped by a certain field, the groups can only be sorted by that field, when we actually need those groups sorted in an arbitrary order we have defined in another field on the data.

https://github.com/telerik/kendo-react/issues/633

Currently the Date Picker and Time Picker along with the new Date Time Picker have a placeholder text on them like month/day/year which pushes the material UI label on top of the input. The rest of my inputs have the label inside the input until a value is inserted. Is there anyway to remove that placeholder from these pickers? I feel it takes away from the design of my website to have some inconsistency with the inputs when you open a form with no data in it. For now we implemented a placeholder of --/--/---- but would prefer it to be like the Order Number above.

Hello Kendo React Team!

 

We noticed in our Review and Retro that the drop down to select how many items per page is not styled. The user on my team had a green theme to their desktop and the picker was green. Our main colors or blues so it stuck out. The jQuery grid has that drop down styled so it matches the theme used for Kendo. Would it be possible to use a custom component instead of a regular input?

Thanks!

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.