Questions on KendoReact Forum

1 answer

80 views

Make filter in multiselect look like filter in dropdownlist

Is there a way to make the filter input (search box) appear at the top of the dropdown list in a multiselect exactly like it does in the dropdownlist component. The expected behavior is this:

User clicks on the dropdownlist (or the down arrow)
The list opens displaying a search (filter) input at the top just like the dropdownlist does.
User types in the filter and the list filters the results.
Each dropdown list item has checkbox for selection
User selects one/multiple items with first item's chip appearing above.
Below is the screenshot for reference

Filter

MultiSelect

answered on 27 Jun 2024

1 answer

136 views

Issue with Content Overflow in Kendo React PDF

Hello,

I am experiencing an issue with Kendo React PDF, as shown in the attached image. The problem is that the last row of content is being shifted to the next page, even though there is some space left on the previous page. This results in unnecessary empty spaces, which affects the overall layout of the document.

Here is a summary of the issue:

Problem: The last row of the table content is shifted to the next page, leaving empty space on the previous page.
Expected Behavior: The content should not leave any empty spaces. If the content overflows, it should be wrapped and split across the pages appropriately.
Issue replication: I've used the sample code provided in the documentation. I've just changed the ProductName in the product.json file.
Replace the last object present in the product.json with the below object.
Here is the link to the demo that I've used https://www.telerik.com/kendo-react-ui/components/pdfprocessing/get-started/

{
    "ProductID": 9,
    "ProductName": "Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku Mishi Kobe Niku ",
    "SupplierID": 4,
    "CategoryID": 6,
    "QuantityPerUnit": "18 - 500 g pkgs.",
    "UnitPrice": 97.0,
    "UnitsInStock": 29,
    "UnitsOnOrder": 0,
    "ReorderLevel": 0,
    "Discontinued": true,
    "Category": {
      "CategoryID": 6,
      "CategoryName": "Meat/Poultry",
      "Description": "Prepared meats"
    }
  }

I would appreciate any guidance or solutions to resolve this issue.

Thank you in advance for your help!

Best regards,
Aman

PDF Processing

answered on 25 Jun 2024

0 answers

74 views

kendo-react-pdf-viewer dependencies version issues

Submitted a ticket instead.

PDF Viewer

updated question on 24 Jun 2024

1 answer

82 views

Excel Export - how to export CellOptions interface

in Kendo excel export version 5, I was able to use the CellOptions interface found in CellOptions.d.ts. This allowed me to create a shortcut const that could be used across my app for standard cellOptions:

import { CellOptions } from "@progress/kendo-react-excel-export/dist/npm/ooxml/CellOptionsInterface";

export const cellOptions: CellOptions = { verticalAlign: "center", textAlign: "center" };
then use it like this:
<ExcelExportColumn field="ID" title="ID" {...columnOptions} width={100} />
 

However, in version 7 (and I'm guessing 8), that CellOptions interface has been moved to index.d.ts and is not exported from the types.

/**
 * The options for the Excel Export cell.
 */
declare interface CellOptions { ... }

Is there some way I can export or use this to create the same kind of shortcut? Thank you.

Excel Export

answered on 24 Jun 2024

1 answer

107 views

The custom cell editor fails when setting cell focus on a newly added row.

I saw an example of setting focus on a new row in the table: https://stackblitz.com/edit/react-dym3qj?file=app%2Fmain.jsx. I tried adding a custom cell editor and setting it to focus, but it failed.

page.tsx：

"use client";
import * as React from 'react';
import { 
  Grid, 
  GridColumn as Column, 
  GridToolbar, 
  GridCellProps, 
  GridRowClickEvent, 
  GridItemChangeEvent 
} from '@progress/kendo-react-grid';
import { sampleProducts } from './sample-products';
import { DropDownCell } from './myDropDownCell';

interface Product {
  ProductID: number;
  ProductName?: string;
  FirstOrderedOn?: Date;
  UnitsInStock?: number;
  Discontinued?: boolean;
}

const App: React.FC = () => {
  const [data, setData] = React.useState<Product[]>(sampleProducts);
  const [editID, setEditID] = React.useState<number | null>(null);
  const [newRecordID, setNewRecordID] = React.useState<number | null>(null); // 新增状态变量

  const rowClick = (event: GridRowClickEvent) => {
    setEditID(event.dataItem.ProductID);
  };

  const itemChange = (event: GridItemChangeEvent) => {
    const inEditID = event.dataItem.ProductID;
    const field = event.field || '';
    const newData = data.map((item) =>
      item.ProductID === inEditID ? { ...item, [field]: event.value } : item
    );
    setData(newData);
  };

  const closeEdit = (event: React.MouseEvent<HTMLDivElement>) => {
    if (event.target === event.currentTarget) {
      setEditID(null);
    }
  };

  const addRecord = () => {
    const nextID = data.length + 1;
    const newRecord: Product = {
      ProductID: nextID,
    };
    setData([newRecord, ...data]);
    setEditID(newRecord.ProductID);
    setNewRecordID(newRecord.ProductID); // 设置新增行的 ID
  };

  const cellRender = (td: React.ReactElement, props: GridCellProps) => {
    if (!newRecordID || newRecordID !== props.dataItem.ProductID || props.field !== 'ProductName') {
      return td;
    }
    
    return (
      <td
        {...td.props}
        ref={(tdElement) => {
          const input = tdElement && tdElement.querySelector('input');
          const activeElement = document.activeElement as HTMLElement;
          const isButton = activeElement.className.indexOf('k-button') >= 0;
          if (
            !input ||
            !activeElement ||
            input === activeElement ||
            (!activeElement.contains(input) && !isButton)
          ) {
            return;
          } else {
            setTimeout(() => {
              input.select();
            });
          }
        }}
      ></td>
    );
  };

  return (
    <Grid
      cellRender={cellRender}
      style={{
        height: '420px',
      }}
      data={data.map((item) => ({
        ...item,
        inEdit: item.ProductID === editID,
      }))}
      editField="inEdit"
      onRowClick={rowClick}
      onItemChange={itemChange}
    >
      <GridToolbar>
        <div onClick={closeEdit}>
          <button
            title="Add new"
            className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary"
            onClick={addRecord}
          >
            Add new
          </button>
        </div>
      </GridToolbar>
      <Column field="ProductID" title="Id" width="50px" editable={false} />
      <Column field="FirstOrderedOn" title="First Ordered" editor="date" format="{0:d}" />
      <Column field="ProductName" title="Name"  cell={DropDownCell} />
      <Column field="UnitsInStock" title="Units" width="150px" editor="numeric" />
      <Column field="Discontinued" title="Discontinued" editor="boolean"  />
    </Grid>
  );
};

const TestPage6: React.FC = () => {
  return <App />;
};

export default TestPage6;

sample-products.tsx：

exportconst sampleProducts = [{
    "ProductID": 1,
    "ProductName": "Chai",
    "SupplierID": 1,
    "CategoryID": 1,
    "QuantityPerUnit": "10 boxes x 20 bags",
    "UnitPrice": 18,
    "UnitsInStock": 39,
    "UnitsOnOrder": 0,
    "ReorderLevel": 10,
    "Discontinued": false,
    "Category": {
      "CategoryID": 1,
      "CategoryName": "Beverages",
      "Description": "Soft drinks, coffees, teas, beers, and ales"
    },
    "FirstOrderedOn": newDate(1996, 8, 20)
  }, {
    "ProductID": 2,
    "ProductName": "Chang",
    "SupplierID": 1,
    "CategoryID": 1,
    "QuantityPerUnit": "24 - 12 oz bottles",
    "UnitPrice": 19,
    "UnitsInStock": 17,
    "UnitsOnOrder": 40,
    "ReorderLevel": 25,
    "Discontinued": false,
    "Category": {
      "CategoryID": 1,
      "CategoryName": "Beverages",
      "Description": "Soft drinks, coffees, teas, beers, and ales"
    },
    "FirstOrderedOn": newDate(1996, 7, 12)
  }, {
    "ProductID": 3,
    "ProductName": "Aniseed Syrup",
    "SupplierID": 1,
    "CategoryID": 2,
    "QuantityPerUnit": "12 - 550 ml bottles",
    "UnitPrice": 10,
    "UnitsInStock": 13,
    "UnitsOnOrder": 70,
    "ReorderLevel": 25,
    "Discontinued": false,
    "Category": {
      "CategoryID": 2,
      "CategoryName": "Condiments",
      "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
    },
    "FirstOrderedOn": newDate(1996, 8, 26)
  }, {
    "ProductID": 4,
    "ProductName": "Chef Anton's Cajun Seasoning",
    "SupplierID": 2,
    "CategoryID": 2,
    "QuantityPerUnit": "48 - 6 oz jars",
    "UnitPrice": 22,
    "UnitsInStock": 53,
    "UnitsOnOrder": 0,
    "ReorderLevel": 0,
    "Discontinued": false,
    "Category": {
      "CategoryID": 2,
      "CategoryName": "Condiments",
      "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
    },
    "FirstOrderedOn": newDate(1996, 9, 19)
  }, {
    "ProductID": 5,
    "ProductName": "Chef Anton's Gumbo Mix",
    "SupplierID": 2,
    "CategoryID": 2,
    "QuantityPerUnit": "36 boxes",
    "UnitPrice": 21.35,
    "UnitsInStock": 0,
    "UnitsOnOrder": 0,
    "ReorderLevel": 0,
    "Discontinued": true,
    "Category": {
      "CategoryID": 2,
      "CategoryName": "Condiments",
      "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
    },
    "FirstOrderedOn": newDate(1996, 7, 17)
  }, {
    "ProductID": 6,
    "ProductName": "Grandma's Boysenberry Spread",
    "SupplierID": 3,
    "CategoryID": 2,
    "QuantityPerUnit": "12 - 8 oz jars",
    "UnitPrice": 25,
    "UnitsInStock": 120,
    "UnitsOnOrder": 0,
    "ReorderLevel": 25,
    "Discontinued": false,
    "Category": {
      "CategoryID": 2,
      "CategoryName": "Condiments",
      "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
    },
    "FirstOrderedOn": newDate(1996, 9, 19)
  }, {
    "ProductID": 7,
    "ProductName": "Uncle Bob's Organic Dried Pears",
    "SupplierID": 3,
    "CategoryID": 7,
    "QuantityPerUnit": "12 - 1 lb pkgs.",
    "UnitPrice": 30,
    "UnitsInStock": 15,
    "UnitsOnOrder": 0,
    "ReorderLevel": 10,
    "Discontinued": false,
    "Category": {
      "CategoryID": 7,
      "CategoryName": "Produce",
      "Description": "Dried fruit and bean curd"
    },
    "FirstOrderedOn": newDate(1996, 7, 22)
  }, {
    "ProductID": 8,
    "ProductName": "Northwoods Cranberry Sauce",
    "SupplierID": 3,
    "CategoryID": 2,
    "QuantityPerUnit": "12 - 12 oz jars",
    "UnitPrice": 40,
    "UnitsInStock": 6,
    "UnitsOnOrder": 0,
    "ReorderLevel": 0,
    "Discontinued": false,
    "Category": {
      "CategoryID": 2,
      "CategoryName": "Condiments",
      "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
    },
    "FirstOrderedOn": newDate(1996, 11, 1)
  }, {
    "ProductID": 9,
    "ProductName": "Mishi Kobe Niku",
    "SupplierID": 4,
    "CategoryID": 6,
    "QuantityPerUnit": "18 - 500 g pkgs.",
    "UnitPrice": 97,
    "UnitsInStock": 29,
    "UnitsOnOrder": 0,
    "ReorderLevel": 0,
    "Discontinued": true,
    "Category": {
      "CategoryID": 6,
      "CategoryName": "Meat/Poultry",
      "Description": "Prepared meats"
    },
    "FirstOrderedOn": newDate(1997, 1, 21)
  }, {
    "ProductID": 10,
    "ProductName": "Ikura",
    "SupplierID": 4,
    "CategoryID": 8,
    "QuantityPerUnit": "12 - 200 ml jars",
    "UnitPrice": 31,
    "UnitsInStock": 31,
    "UnitsOnOrder": 0,
    "ReorderLevel": 0,
    "Discontinued": false,
    "Category": {
      "CategoryID": 8,
      "CategoryName": "Seafood",
      "Description": "Seaweed and fish"
    },
    "FirstOrderedOn": newDate(1996, 8, 5)
  }];
MyDropDownCell.tsx：

import * as React from 'react';
import { MultiColumnComboBox } from '@progress/kendo-react-dropdowns';
import { GridCellProps } from '@progress/kendo-react-grid';

// 定义员工数据和列
const employees = [
    {
        id: 1,
        name: "Daryl Sweeney",
        reportsTo: null,
        phone: "(555) 924-9726",
        extension: 8253,
        hireDate: new Date("2012-02-07T20:00:00.000Z"),
        fullTime: true,
        position: "CEO",
        timeInPosition: 2,
    },
    {
        id: 2,
        name: "Guy Wooten",
        reportsTo: 1,
        phone: "(438) 738-4935",
        extension: 1155,
        hireDate: new Date("2010-03-03T20:00:00.000Z"),
        fullTime: true,
        position: "Chief Technical Officer",
        timeInPosition: 1,
    }
];

const columns = [
    { field: 'id', header: 'ID', width: '100px' },
    { field: 'name', header: 'Name', width: '300px' },
    { field: 'position', header: 'Position', width: '300px' }
];

// 创建 DropDownCell 组件
export const DropDownCell = (props: GridCellProps) => {
    const { dataItem, field, onChange } = props;
    const dataValue = dataItem[field];

    const handleChange = (e: any) => {
        if (onChange) {
            onChange({
                dataItem,
                field,
                syntheticEvent: e.syntheticEvent,
                value: e.target.value
            });
        }
    };

    return (
        <td>
            {dataItem.inEdit ? (
                <MultiColumnComboBox
                    data={employees}
                    columns={columns}
                    textField="name"
                    style={{ width: '300px' }}
                    placeholder="Please select ..."
                    value={employees.find(emp => emp.name === dataValue)}
                    onChange={handleChange}
                />
            ) : (
                dataValue
            )}
        </td>
    );
};

Grid

answered on 24 Jun 2024

1 answer

75 views

The filter pop up of grid move along with the horizontal scroll bar

Hi All,

I used grid with filter, and found that the filter pop up of grid move along with the horizontal scroll bar, This seems a bit strange, can't the filter panel automatically collapse when scrolling?

Hxukcv (forked) - StackBlitz

Filter

General Discussions

Grid

answered on 18 Jun 2024

1 answer

141 views

ThemeBuilder - Setup the theme for the "base" button

Hello,

Using the ThemeBuilder, we would like to change the default theme for all the buttons in the application.

There is a way to setup the buttons for the "Secondary" and "Primary" theme.

And it seems that some components use the "Secondary" theme, instead of the "Primary" theme. Like here, with the ListBox:

How can we setup our buttons in the ThemeBuilder, so that the default theme used by the components is the "Primary" theme?

Button

Typography

answered on 17 Jun 2024

1 answer

115 views

Virtualisation of Data Grid with pagination.

Hello,

In our project, we use DataGrid from the Kendo React library, but we are experiencing performance issues in one case.
Basically, we have a DataGrid that gets a dataset of 2000 items max as input. Each item can have ~100 columns.
One of the design choices was to introduce classic pagination of the client side, which works fine, and for the dataset with items that have 10-20 columns, the performance is sufficient. Unfortunately, for ~100 columns, not.

Because of that, I wanted to ask if it's possible to introduce the virtualization of rows and columns for a data grid that uses client-side pagination?

Grid

answered on 17 Jun 2024

1 answer

1.0K+ views

How to update DatePicker values with key events from the React testing library

Because our DatePicker implementations need custom logic for keyUp and keyDown events, it's critical that our unit tests simulate key presses instead of just populating entire preset values. We are currently unable to update any DatePicker's value with the react testing library fireEvents (@testing-library/react). We're aware that React also has Keyboard events available in the user-event library, but the installation conflicts with our kendo library dependencies. How do we get fireEvent keyUp/Down events to change a DatePicker's value, or is this not possible in KendoReact?

test("update datepicker value with key events", () => {
    render(
      <DatePicker id="testDatePicker" defaultValue={new Date("10/11/2024")} />,
    );
    const dateInput = screen.getByRole("combobox");
    act(() => {
      fireEvent.keyDown(dateInput, { key: "2", code: "Digit2" });
      fireEvent.keyUp(dateInput, { key: "2", code: "Digit2" });
    });
    expect(dateInput).toHaveDisplayValue(["02/11/2024"]);
  });

DatePicker

answered on 13 Jun 2024

1 answer

141 views

Check for duplicates in the grid when data is updated in the grid through incell & highlight the duplicate rows with red color in ke

I have a requirement for my project like, when i do incell editing in the grid, i have to check for duplicate rows in the grid & highlight the entire row with red color. & after resolving the duplicate issues by changing any of the cell value, the highlight should go off. i am already using custom components for combox & numeric textboxes.

ComboBox

Grid

NumericTextBox

answered on 12 Jun 2024