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
Hello,
We are encountering an issue with duplicate entries in our Kendo Grid with drag & drop functionality. When the grid is scrolled, clicking on any of the header cells multiple times results in the first entry being duplicated. This problem occurs on the example provided on your website as well: Kendo React Grid Row Reordering
Reproduction Steps:
You will notice that the first entry is duplicated multiple times. It appears that the reorder logic is being triggered when a header cell is pressed.
We are using version 6.1.0. Please refer to the attached video for a visual representation of the issue.
Thank you for your assistance.
This is a bug on your documentation website.
Go to https://www.telerik.com/kendo-react-ui/components/grid/ for example to see that the side panel on the left is empty in an Edge browser. It flickers then it disappears.
It works fin in Chrome and Firefox.
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
On this page: https://www.telerik.com/kendo-react-ui/getting-started/
There's a syntax mismatch in end-of-line semicolons.
This line ends with a semicolon:
```js
import '@progress/kendo-theme-default/dist/all.css';
```
This line does not end with a semicolon:
```js
import { Calendar } from '@progress/kendo-react-dateinputs'
```
All teams that I know of consider it to be an error to do both ways in the same file.
The solution is to pick one way then be consistent. The broader solution is to use a linter, such as ESLint, that can process the code to ensure you're using your expected syntax and formatting.
According to https://www.telerik.com/kendo-react-ui/components/installation/source-code/#toc-source-repository the repo should be updated nightly. However it does not seem to be.
~/Projects/kendo-react-private (master) git remote -v origin https://kendo.git.progress.com/kendo-react-private.git (fetch) origin https://kendo.git.progress.com/kendo-react-private.git (push) ~/Projects/kendo-react-private (master) git fetch --tags ~/Projects/kendo-react-private (master) git pull origin master From https://kendo.git.progress.com/kendo-react-private * branch master -> FETCH_HEAD Already up to date. ~/Projects/kendo-react-private (master) git tag | grep v5 v5.0.0 v5.0.0-dev.202201182040
~/Projects/kendo-react-private (master) git log
commit 4bf2535e414ba2f342ddbef8daac9ec052f04cc2 (HEAD -> master, tag: v5.0.0, origin/master, origin/HEAD)
Author: kendo-bot <kendouiteam@progress.com>
Date: Tue Jan 18 22:41:34 2022 +0200
chore(release): publish 5.0.0-dev.202201182040
v5.0.0 seems to be the latest tag. Could someone verify that the github repo is actually being updated?
Thanks for any help!
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
toODataString throw exception on text filter changed from is null to contains.
https://stackblitz.com/edit/react-ertg4z?file=app%2Fmain.jsx
Repro step:
1. Choose filter by Name which is using text filter.
2. Change filter from Is null to contains.
3. toODataString threw exception.
Click icon to close as well as open
Hi,
I have Scheduler vertical timeline with an user group and more users I add the wider is every slot. Example 2 users https://stackblitz.com/edit/react-dttghr?file=app%2Fmain.jsx . Example 4 users https://stackblitz.com/edit/react-dttghr-a3nor3 the slot is double in width in comparation with 2 users. Can I control this somehow?
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
Hi,
I created a solution using KendoReact Editor.
The editor is set to enable the creation of tables (EditorTools.InsertTable).
When the property 'defaultEditMode' is set to 'iframe', the editor inserts a correct table with a width of 100% and visible cell borders.
If I set the 'defaultEditMode' to 'div' and insert a table the table has a width of some pixels and no borders are shown. In other words, the inserted table is not usable.
I need to set the editMode to 'div' because otherwise the editor doesn't adjust its look to the other parts of the page. The font is wrong etc.
How can I get the tables to work in 'div' mode?
Kind regards
Christian
Actual results:
Elements with Aria role is not containing child role with in them.
Expected results:
Elements with Aria role should contain child role with in them.
User Impact:
For each role, WAI-ARIA explicitly defines which child and parent roles are allowable and/or required. ARIA roles missing required child roles will not be able to perform the accessibility functions intended by the developer.
Grid Header shifting when filtering column.
When a column is half visible, and it is filtered, a misalignment will occur between the header and the Grid content.
Video: https://www.screencast.com/t/PhOonptY2
DropDownList and MulstiSelect do not open on click(IE 11).
They do open sometimes, but it seems random.
They do open when using the keyboard.