I have attached files, in which there is an app bar content there is a dropdown in the dropdown there are four elements, in that I need four drawer container on the left side as I attached by clicking the single dropdown, how can I attach 4 drawer container in a single project
Thank you
Environment (OS, Application, Versions)
Repro Steps
Actual Results
The 'context menu' controls available on the column headers under the basic usage table are not accessible using the keyboard.
Expected Results
The 'context menu' controls available on the column headers under the basic usage table should be accessible using the keyboard.
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!