Questions on KendoReact Forum

1 answer

313 views

Kendo PDF Export issue in Safari Browser

Hi Team,
We are facing issue in Kendo React PDF Export in Safari Browser. When we download the PDF from that browser some text content in the pdf are overlapping completely one on another. I can see this issue also in the GitHub Kendo UI Core issues. https://github.com/telerik/kendo-ui-core/issues/6240. There is it mentioned to over ride the node_modules file separately and manually. Can we have some fix for this bug or any other way around to fix this particular issue on our side.

I tried in my local by modifying the Node_modules file directly by following the above discussion and it is working fine after that. The modification is like below.

under node modules/@progress/kendo-drawing/dist/es/html/core.js

removing the specific If condition block of `if(microsoft || browser.chrome) {`. After reloading it is working fine.

Would be very helpful if you provide better solution for this issue.

Thanks,

Srivathsa Kavirayuni.

PDF Processing

answered on 03 Nov 2022

1 answer

218 views

[Solved] 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

145 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

536 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.8K+ 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

144 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.2K+ 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

420 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

146 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

127 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>
        </>
    );
}