Telerik Forums
KendoReact Forum
1 answer
56 views

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.

Ina
Telerik team
 answered on 22 Oct 2024
1 answer
48 views

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;
}

Konstantin Dikov
Telerik team
 answered on 22 Oct 2024
1 answer
44 views

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!

Yanko
Telerik team
 answered on 18 Oct 2024
1 answer
66 views

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:

  • To sort the data correctly, we use the props `filter="numeric"` on the column
  • To align the numbers to the right, we use the grid Custom Cell

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.

Konstantin Dikov
Telerik team
 answered on 16 Oct 2024
1 answer
42 views

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

 

 

Vessy
Telerik team
 answered on 11 Oct 2024
1 answer
55 views

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

Konstantin Dikov
Telerik team
 answered on 11 Oct 2024
1 answer
50 views

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

Konstantin Dikov
Telerik team
 answered on 10 Oct 2024
2 answers
102 views

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.

Ryan
Top achievements
Rank 1
Iron
 answered on 09 Oct 2024
1 answer
141 views

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)

Filip
Telerik team
 answered on 04 Oct 2024
1 answer
43 views
I am using kendoreact incell editing operation. I have 7 column in the grid with 2 textboxes & 3 comboboxes & also 2 numeric textboxes. I am using custom cells for all the columns. I have to highlight the cells in case of any errors or duplicate data & show the tooltip. SO i am doing lot of operations on the grid. Since its an incell editing operation, when i click on the cell, its taking long time to go to edit mode when there are more than 100 records. Is there any way to improve the performance of incell edit operation. Please help
Filip
Telerik team
 answered on 02 Oct 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?