Telerik Forums
KendoReact Forum
1 answer
1.0K+ views

There are two parts of the form. Each inside an kendo expansion panel. Submit is in the bottom section. Looking for a way to implement this.

 

 

Konstantin Dikov
Telerik team
 answered on 31 Oct 2022
1 answer
392 views

Hello everyone, I cannot find any examples were all of the following features are given together: sort, group, page and filter.

Does an example exist?

 

Nick

Konstantin Dikov
Telerik team
 answered on 29 Oct 2022
1 answer
108 views

Hi All

I am adding some sub nodes below treeitems a various levels and I find that they appear at the end of the tree rather than under the parent that they are added (treeitem.items).

Is there a way to for full tree re render?

I am currently recreating the tree data to add the new child item and updating the state that is bound to the data for the treeview. Is there something else that I would need to do?

Code used to update the tree state:


const [tree, setTree] = React.useState<TreeViewDataItem[]>([]);

let newTree: TreeViewDataItem[] = [];
        let newTreeParent: TreeViewDataItem = InsertTreeItem(tree[0], newTreeItem, parentTreeItem.index);
        newTree.push(newTreeParent);
        setTree(newTree);

export const InsertTreeItem = (treeItem: TreeViewDataItem, newItem: TreeViewDataItem, parentIndex: number): TreeViewDataItem => {
    let newItems: TreeViewDataItem[] = [];
    treeItem.items.forEach((node) => {
        if (node.index == parentIndex) {
            node.items.push(newItem);
        }

        let cloneNode: TreeViewDataItem = _.cloneDeep(node);

        newItems.push(cloneNode);
        InsertTreeItem(node, newItem, parentIndex);
    });
    treeItem.items = newItems;
    return treeItem;
}


<TreeView data={tree}
                            expandIcons={true}
                            item={fetchTreeItemView}
                            onExpandChange={onExpandChange}
                            onItemClick={onTreeItemClick} />

 

Thanks for your help.

Konstantin Dikov
Telerik team
 answered on 29 Oct 2022
1 answer
92 views

Hi All

I have a TreeView, the nodes dont seem to call a re render unless the node is selected. Is this the case and if so, can it be altered or are there work arounds?

To replicate, I have created a conditionally rendered functional component as the node item format:

Below is the component that renders each node

 const fetchTreeItemView = (props) => {

        let item: TreeViewDataItem = props.item;

        return (
            <>
                {(item.selected) &&
                    <TreeUnselectedEntityNode treeItem={item} />
                }
               {(!item.selected) &&
                    <TreeUnselectedEntityNode treeItem={item} />
                }
            </>
        );
    };

This calls the below component:


export const TreeUnselectedAttribute = props => {
    const [visibleDialog, setVisibleDialog] = React.useState<boolean>(false);
    const MENU_ID = `cm-${props.treeItem.index}`;
    const { show } = useContextMenu({
        id: MENU_ID,
    });

    const handleClickRemove = (e: React.MouseEvent) => {
        show(e);
    }

    const handleRemoveClick = (e) => {
        props.onRemoveTreeItem(props.treeItem);
    }

    const handleClick = (e) => {
    }

    const handleClickShowAttributeSelectDialog = (e) => {
        setVisibleDialog(true);
    }

    const hideAttributeSelectDialog = () => {
        setVisibleDialog(false);
    };

    return (
        <>
            <div>
                <div onContextMenu={handleClickRemove}>
                    <span key="0" /> {props.treeItem.branchXmlNode.name}
                </div>
                <Menu id={MENU_ID} theme={theme.dark}>
                    <Item onClick={handleRemoveClick}>Remove</Item>
                    <Separator />
                    <Submenu label="Add">
                        <Item onClick={handleClickShowAttributeSelectDialog}>Attribute</Item>
                    </Submenu>
                </Menu>
                {visibleDialog ? <div>Tester</div> : <div>another tester</div>}
            </div>
        </>
    );
}

Its the same component called either way if the node is selected or not, but if the node is selected, when 

visibleDialog 

is changed, the contents of the div changes (rerenders). if its not selected then no matter how the value of 

visibleDialog 

is changed, it does not update (rerender)

 

Konstantin Dikov
Telerik team
 answered on 27 Oct 2022
1 answer
140 views

I'm trying to let the user see which columns in a Grid have an active filter or sort.  I'm using some examples I've seen in the components / forums, like this one to get started: https://www.telerik.com/forums/highlight-when-using-a-filter-in-the-grid.

Generally, it works.  If a user sets a filter on column X, the grid shows a different background color.  The problem happens when there is a GridColumnMenuCheckboxFilter, and the user selects more than two items.  The filter applies correctly, but it does not show the user that it's filtered.  The GridColumnMenuFilter.active function returns false.

Here's an example: 

https://stackblitz.com/edit/react-skkquv?file=app%2Fmain.tsx

Thank you,

Brad Larsen

Konstantin Dikov
Telerik team
 answered on 26 Oct 2022
1 answer
780 views

The AutoComplete component is exactly what I need, with it being an input field offering suggestions based on the typed text. However, I have a nested data structure like

const nestedData = [
{
text: 'Furniture',
items: [{ text: 'Tables & Chairs' }, { text: 'Sofas' }, { text: 'Occasional Furniture' }],
},
{
text: 'Decor',
items: [{ text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' }],
},
];

 

Is it possible to show this? Maybe using the DropdownTree or TreeView component with `itemRender`?

Konstantin Dikov
Telerik team
 answered on 26 Oct 2022
1 answer
91 views

Hi, I have a custom tool in the editor that allows the user to insert images with the max width set to 300px (set via the style attribute). This is so that the image inserted into the Rich Text Editor looks like a thumbnail.

How would I go about displaying the full-size image when the user hovers over the thumbnail?

 

 

Konstantin Dikov
Telerik team
 answered on 26 Oct 2022
1 answer
107 views

I need to add an empty first item in Kendo DropDownList component. I don't know, how to make it in Kendo React. In Kendo jQuery I was able to set optionLabel: "" property and It worked. I don't know, how to do the same in Kendo React dropdown.

jQuery example: https://demos.telerik.com/kendo-ui/dropdownlist/index

Thanks a lot.

Vessy
Telerik team
 answered on 25 Oct 2022
1 answer
182 views

I would like to ask, where are the localization messages in Kendo React packages. In Kendo jQuery was translation mesages included in kendo-ui package, but in React, I'm not able to found the messages. ...or in Kendo React the messages are not available and I must create messages JSON object and translate by self? 

Thanks a lot.

Vessy
Telerik team
 answered on 25 Oct 2022
0 answers
126 views
Hi,

How I can create the ability to select all rows with ctrl+A ?
Akiva
Top achievements
Rank 1
 updated question on 25 Oct 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?