This will allow to programmatically show and hide the Tooltip.
The tooltip display position of KendoReact Chart is incorrect
See the code.thank you
https://stackblitz.com/edit/react-vu1ffd?file=app/main.jsx
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
};
How to merge rows in React Data Grid?
Only ColSpan did not find RowSpan in the GridCellProp
Material UI have such property, and adding it to KendoReact will increase its compatibility with the Material UI components.
This will be useful in cases where the end-user has to transfer large data sets into the application faster.
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>
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!
Hey there Kendo React Team!
In the drop downs there is this convenient "X" so users can quickly clear the information in the input. Would it be possible to implement this into the Date & Time Pickers as well as Generic Inputs?
Thanks!
While export and save PDF are extremely useful features that Kendo React UI provides.
I would like to have option to generate Password protected PDF.
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
It would be really useful to have the expandField Grid property being a function that dynamic (per row) return the attribute or null if the row cannot be expanded altogether.
The reason is that, not all rows are expandable in some situations but we currently cannot hide the toggle detail row (+) per row...
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'));
The typographical kerning defined by the font is not respected when exporting components to pdf.
The text has the same aspect as if the following css property had been defined:
element {
font-kerning: none
}
It will be nice to support font-kerning on pdf export.
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
When setting filter type in column to `boolean` it breaks when opening the column menu with the following JS error inside `filterCommon.js`:
TypeError: Cannot read property '0' of undefined
Here's a sandbox to see. Click the column menu next to each column header. Notice `Discontinued` column will cause a JS error:
https://stackblitz.com/run/?file=app%2Fmain.jsx
The sandbox was taken from https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu/
We're using v3.1.0 but the sandbox has 3.2.0. Both versions have this bug. It seems 2.11.0 is the last working version.