Using the Kendo Grid for Angular, it was easy enough to code up a directive that could dynamically adjust the grid height as the window was resized. I am not finding anything similar in the API, or Google, as to how to do this with the React grid.

Any suggestions?

Kendo React Grid doesn't export footers to excel.

Please see this example:
https://codesandbox.io/s/interesting-cookies-fdis3j

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.

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

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.

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)

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

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

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

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?

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.