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
I would like to add two tables side by side in Telerik Editor two tables side-by-side like I would in google docs for ex:
Hi,
I would like to be able to specify a Grid Column template for the data without having to replicate the entire cell and its properties. Please see below for justification:
Consider the following example of KendoReact Grid Cell customisation: https://www.telerik.com/kendo-react-ui/components/grid/styling/#toc-adding-custom-cells
Following this approach results in the loss of a lot of properties from the grid cell compared with 'default' cells e.g.
<td colspan="1" class="" role="gridcell" aria-colindex="1" aria-selected="false" data-grid-col-index="0">Chai</td>
<td style="background-color: rgba(55, 180, 0, 0.32);">18 <span class="k-icon k-i-sort-asc-sm"></span></td>
These properties are important for many reasons including accessibility. There is another example of KendoReact Grid Cell customisation that preserves these properties here: https://www.telerik.com/kendo-react-ui/components/grid/cells/#toc-customization
e.g.
<td colspan="1" class="" role="gridcell" aria-colindex="4" aria-selected="false" data-grid-col-index="3">39</td>
<td colspan="1" role="gridcell" aria-colindex="5" aria-selected="false" data-grid-col-index="4" style="color: red;">false</td>
However, there is a considerable amount of code required to achieve this:
const CustomCell = (props) => {
const field = props.field || "";
const value = props.dataItem[field];
const navigationAttributes = useTableKeyboardNavigation(props.id);
return (
<td
style={{
color: value ? props.myProp[0].color : props.myProp[1].color,
}}
colSpan={props.colSpan}
role={"gridcell"}
aria-colindex={props.ariaColumnIndex}
aria-selected={props.isSelected}
{...{
[GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex,
}}
{...navigationAttributes}
>
{value === null ? "" : props.dataItem[field].toString()}
</td>
);
};
I would like to be able to define a template for a cell without having to specify these properties every time.
Kind regards,
David
Hi Support,
Is there any org chat component or similar components in Kendo React that is similar to the Org Chart in this link https://demos.telerik.com/aspnet-ajax/orgchart/examples/overview/defaultcs.aspx?
Thanks & Regards,
Eason
Currently there is no Autoscroll feature for the treelist...so when I want to drag and drop an item somewhere outside of the viewed area its klunky have to drop then scrool then drag and drop again etc.
Would really like to be able to autoscroll through the treelist
I know there you gave me an example of how to do this with custom code - is there a reason this can't be built in? It's important and is a pain to custom implement when using custom editors for the cells
Thanks
Michael
The Tooltip component has a className property. Providing a class name there does not seem to apply the class to the DOM element. See my below code and attached screenshot ...
<div className="col">
<label className="d-block">Name</label>
<Input value={name} required={true} onChange={handleNameChange} />
<Tooltip className="d-inline">
<i className="k-icon k-i-info" title="The name of the Taxonomy" />
</Tooltip>
</div>
Currently, the Scheduler events are always placed between the beginning and the end of a slot, no matter if the event actually starts or ends at the slot times. So if an event for example starts at 10:10, the event is placed at the 10:00 slot line and not a little further down below, or if it ends at 11:50 the event end is placed at the 12:00 slot line. I'm talking here especially about the WeekView and the DayView.
This is not accurate enough for some events. Like for example in MS Outlook, if a event doesn't start at the full hour, the graphical representation shows it according to the start time and not at the full hour (see screenshots). We would like to request to make it possible to place events on the Scheduler so that the graphical representation of the event reflects the actual start and and time.
While I was able to calculate a margin for the event start to move it to a more accurate position, it was not possible to also set the height of the event to a calculated positition because the Scheduler doesn't allow this. According your support (see here), an event always has to end at a full slot time and can't be placed somewhere else. Calculating these things on our own brings a whole lot of other problems though (like placing overlapping events correctly, etc.) so that it would be great if the Scheduler had a setting to allow exact positioning according to times.
React v18 has been released.
It appears that KendoReact only supports up to v17 (dependency conflicts if you try to use v18).
Can you please add support for React v18?
Thanks!
Hi, when using the Kendo React Typography component like following:
<Typograpy.h1></Typograpy.h1>
compiler gives the following warning:
Imported JSX component h6 must be in PascalCase or SCREAMING_SNAKE_CASE react/jsx-pascal-case
I've noticed in your other products, the dropdownlists have a property that allows for grouping sets of data.
What would it take to get that included in Kendo UI React?
We have a use case that this would be very helpful.
Thanks.
Hi,
I know pageSizes options takes a Boolean or Array of Numbers, but Is there a way add an option to pagination dropdown which lists all rows of the grid like, 'All' option?
Can we set the options of the dropdown to like '10, 50, All', where option 'All' lists all rows of the grid?
Hi,
Can We have an admin Dashboard for KendoReact? which has some ready components Like NavBar on top and Left, Dark and Light mode, RTL, and LTR Layouts and Forms with all input Components
I Have More projects in this React MUI Admin Dashboard and now it's very hard for me to use the KendoReact Components here.
if we Have KendoReact Admin Dashboard like that it will be easy to use KendoReact components there.
Thanks