Questions on KendoReact Forum

1 answer

178 views

Gantt - How to rename the "Add Task" button?

I've followed the example here that adds the "Add Task" button to the Gantt, by setting the "toolbar={{ addTaskButton: true }}" property.

How do I go about renaming the text in this button from "Add Task" to "Add Action"?

Gantt

answered on 02 Nov 2022

1 answer

109 views

Extracting views into separate components

I am searching for a way to extract Scheduler views into separate components. Instead of:

<Scheduler>
    <DayView />
</Scheduler>

I want to be able to do:

<Scheduler>
    <CustomDayView props={<props>} /> // returns `DayView` as top-most element under the hood
</Scheduler>

This doesn't work. I've tried using `forwardRef` and passing the ref to the underlying `DayView` but that didn't work either. I can only get it working by using a method directly `{getDayView(props)}` but I want to avoid that. Also, I don't care much about the integrated view switcher as I am ditching it anyway and providing my own so that won't be a problem for the view name.

Scheduler

answered on 02 Nov 2022

2 answers

415 views

Sort Not working after 3rd Time in Kendo React Sort on Grid Row

I was working on sort feature exactly similar to the link below, but when I click on the sort on the grid row for the 3rd time(default sort), it's not sorting as well as it won't show the up or down arrow. Is that's how the sort is implemented? I don't see sorted either in the example for default productName(code sandbox link).

What if I need only two time feature that is default "asc" and "des" ONLY?

Kindly let me know what's going on.

As you see in the screenshot I am not able to get "2 Test" at the 3rd time of sort

https://codesandbox.io/s/muddy-shape-dzdfwi

const initialSort = [
  {
    field: "displayname",
    dir: "asc",
  },
];

const CustomerAccountPage = () => {
  // for sorting
  const [sort, setSort] = useState(initialSort);

  // console.log(data)
  return (
    <>
      <NewCustomerForm updateData={updateData} />
      {data && (
        <div>
          <div className="font-bold pt-6 pl-20">
            <h4>Accounts</h4>
          </div>
          <div className="pt-4 pl-20">
            <Grid
              style={{
                height: "600px",
                border: 0
              }}
              data={orderBy(data?.getAccounts ?? [], sort)}
              sortable={true}
              sort={sort}
              onSortChange={(e) => {
                setSort(e.sort);
              }}
            >
              <GridColumn
                field="displayname"
                title="Customer"
                width="250px"
                // cell={MyEditCommandCell}
              />
              <GridColumn
                field="customerId"
                title="Customer ID"
                width="250px"
              />
              <GridColumn
                field="createdAt"
                title="Date Created"
                width="200px"
              />
              <GridColumn field="region" title="Country/Region" width="350px" />
              <GridColumn field="apps" title="Apps" width="200px" />
              <GridColumn field="vpn" title="VPN" width="200px" />
              <GridColumn
                title="Action"
                width="100px"
                cell={MyEditCommandCell}
              />
            </Grid>
            {openForm && (
              <EditCustomerAccount
                cancelEdit={handleCancelEdit}
                onSubmit={handleSubmit}
                item={editItem}
                visible={openForm}
              />
            )}
          </div>
        </div>
      )}
    </>
  );
};

export default CustomerAccountPage;

Sortable

answered on 01 Nov 2022

4 answers

2.6K+ views

Dynamic Grid Height?

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?

General Discussions

answered on 31 Oct 2022

1 answer

92 views

Grid footer not exported to excel

Kendo React Grid doesn't export footers to excel.

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

Excel Export

Grid

answered on 31 Oct 2022

1 answer

1.0K+ views

How to handle submit of Form if the Submit button is outside the form.

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.

Form

answered on 31 Oct 2022

1 answer

385 views

Data Grid, sort, group, page and filter

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

Grid

answered on 29 Oct 2022

1 answer

96 views

Is there a way for force re render of the Treeview

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.

TreeView

answered on 29 Oct 2022

1 answer

85 views

Treeview nodes not selected do not re render

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)

TreeView

answered on 27 Oct 2022

1 answer

109 views

Active test on Grid's ColumnMenuFilter stops working with more than two items checked

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

Filter

Grid