I am evaluating the KendoUI TreeView using this code snippet:
<TreeView
data={processTreeViewItems(workspaceGroups.current, {
select: select,
check: check,
expand: expand,
})}
focusIdField={"id"}
draggable={true}
expandIcons={true}
onExpandChange={onItemExpansionChanged}
aria-multiselectable={true}
onItemClick={onLayerItemClicked}
checkboxes={true}
onCheckChange={onItemCheckedChanged}
/>
I have declared a few constants and eventhandlers as follows:
function App() {
const [check, setCheck] = React.useState({
ids: ["100"],
idField: "id",
});
const [expand, setExpand] = useState({
ids: ["PROJECT WORKSPACES (5)", "Site Access Plan (8)"],
idField: "text",
});
const [select, setSelect] = useState({
ids: ["100"],
idField: "id",
});
I am having issues retrieving the correct value of the checked property from event.item in the onItemCheckedChange handler that looks like this:
const onLayerVisibilityChanged = (event: TreeViewCheckChangeEvent) => {
console.info("tree node checked or unchecked!!!")
const settings = {
singleMode: false,
checkChildren: true,
checkParents: false,
};
debugger
// if the UI checkbox is clicked, this value is false.// if the checkbox is unclicked, this value is true. It seems to be delayed.
console.info(event.item.checked)
};
What am I missing? I am using KendoUI TreeView 8.5.0.
Hello,
We are migrating some of our bigger Grids to use the ASP.NET Core server-side helpers. On the TypeScript side of the code, with Kendo React, the Grid component is now using the DataResult object returned by the server endpoint.
One of our Grids needs to support row selection. I used to just do this manually using the described method on the documentation, which does not use DataResult. Is there a recommended way of doing selection when using DataResult? Or do I just modify the values field of the DataResult and add a selected field to each item, similar to without DataResult?
For reference, the structure of DataResult is just ...
/**
* The result of the [process]({% slug api_kendo-data-query_process %}) method applied to a data structure.
*/
export interface DataResult {
/**
* The data that will be rendered by the Grid as an array.
*/
data: any[];
/**
* The total number of records that are available.
*/
total: number;
}
Greetings,
I found an issue in the Monthly option where if I select the Sunday-Saturday from the second dropdown first, I'm unable to change the first dropdown. It only allows me to change the first dropdown if the second dropdown is day, weekday, or weekend day.
If I change the first dropdown to "third" and then the second dropdown to "Friday", the schedule that was created doesn't show up in the view (e.g "Third Friday")
Please help, thanks!
Hello,
We would like to use the Grid to show numbers.
We have a column named `Maximal value`, which only displays numbers.
We have already used the following features from the grid:
I found this question from 2019, which relates a lot to our requirements.
Is there a built-in column type "Number" in the grid which proposes all the built-in features regarding numbers?
We wouldn't like to miss on a built-in feature commonly used by the users, just because the Grid doesn't recognize the column as a number.
Something like type="numeric" in the column props.
Hi
I am trying to set my dropdown menu from the dropdownbutton to appear to the left of the button. Their is a property named dir of type string, which I am assuming does this but I cannot find the valid values for this property. I have tried 'left'.
Any help would be appreciated.
Cheers
Simon
Hi,
Does your team have an suggestions on how to go about linting Kendo elements?
My situation is that, Im using Kendo buttons inside a KendoForm to do things other than submit (which is the default button type in many browsers). Best practice says that when using buttons, we hould always delcar the type (as button|submit|reset), but type is not a required attribute.
I would like to lint my code to make sure taht any button declared has a type. Ths can be acheived on HTML buttons using @jsx-eslint/react/button-has-type rule, however it does not work on KendoButtons, but case those componetns are not HTML buttons.
The only other option i can think of is to extend the KendoButton into a custom component that requires the type attribute, and then only use my custom button interface (TypeScript).
Any thoughts?
Thanks,
Grant
I have requirement in out application like, when i do incell editing & click on save, if i get duplicate records from the response, i have to highlight the row in red color & show tooltip with error message whenever i hover on the any place in that particular row. I followed this link for highlighting the row with red color. But unable to show tooltip for the entire row. Please help
https://www.telerik.com/kendo-react-ui/components/grid/styling/basics/#toc-styling-the-kendoreact-data-grid-rows
I am allowing users to edit in my KendoReact grid. By default the editor renders <input type=text elements. Is it possible to change that so it would render a <textarea element instead?
I see there are a few solutions with non-KendoReact: https://www.telerik.com/forums/how-to-change-input-to-textarea-in-popup-editor
I can't figure out how to make this work with KendoReact, other than creating a custom editor, which seems like a pain for a request that must be pretty common.
Hello, I'm a user here.
When I create some document work tools with kendo UI(react) that can edit grid and image at the same time, I found that I am getting the image resize error as below. And I am having a problem that I cannot save the resized image.
I also find the same problem in the example codes. (Images Resizing)
You can copy the image and paste it inside the grid, and you resize the image. Then you will find out the same error that I found.
How can I save the image size without getting this error?
I'd really appreciate if someone could give me some advice on this. Thank you.
Uncaught TypeError: Cannot read properties of undefined (reading 'eq')
at DecorationGroup.eq (/node_modules/prosemirror-view/1.33.9/dist/index.cjs:3854:74)
at NodeViewDesc.matchesNode (/node_modules/prosemirror-view/1.33.9/dist/index.cjs:1271:117)
at EditorView.updateStateInner (/node_modules/prosemirror-view/1.33.9/dist/index.cjs:4860:47)
at EditorView.updateState (/node_modules/prosemirror-view/1.33.9/dist/index.cjs:4830:12)
at P.dispatchTransaction (/node_modules/@progress/kendo-react-editor/Editor.js:8:2418)
at EditorView.dispatch (/node_modules/prosemirror-view/1.33.9/dist/index.cjs:5093:52)
at setCellSelection (/node_modules/prosemirror-tables/dist/index.cjs:1450:12)
at HTMLDocument.move (/node_modules/prosemirror-tables/dist/index.cjs:1472:7)