KendoReact Generics

About This Package

What is this package?

This package is a collection of Wrappers for various kendo components that we've found ourselves modifying in the same ways over and over across projects in the same ways. @progress/kendo-react-licensing along with a valid kendo license is recommended (or required depending on whether they change their 'no license' warning to an error in the future).

What modifications have you made specifically?

• Most of what we're doing has to do with virtualization. The setup for virtualization is a lengthy task, both in lines of code and dev hours. This package exists to help us streamline that process.
• The other modifications have to do with adding support for placing Comboboxes, Checkboxes, Datepickers, and Switches from Kendo into a Kendo Grid Cell or Filter Cell and handling those events appropriately

Components

Note: This package has only been tested with typescript. if you're using javascript, use at your own risk

• Generic Dropdown
• MultiSelect Dropdown
• Filter Cell Dropdown
• Command Cell Dropdown
• Command Cell Date
• Command Cell Checkbox
• Command Cell Switch
• Command Cell Price
• Command Cell DD Without Id

Generic Dropdown

Props

data: T[];
selectedId: number;
selectedData?: T;
onChange: event: (ComboBoxChangeEvent) => void;
textField: keyof T;
disabled?: boolean;
idField?: keyof T;
title?: string;
hideClearButton?: boolean;
style?: React.CSSProperties;
isLoading?: boolean;

data

• Array of T. the Definition of what T is matters for the "textFields" prop

selectedId OR selectedData

• selectedId is the unique identifier of the item selected. By default the dropdown will assume your item has an "id" property. if it doesn't have an Id but has a unique identifier, see optional keys (idField)
• selectedData is a reference to the full selected object.
• Only one of these 2 is needed. it will just use selectedId if both are provided

onChange

• Event passed is a ComboBoxChangeEvent (from kendo-react-dropdowns)

textField

• The field of each object to actually display
• For example, if my dropdown is fed a list of employee objects with a firstName, lastName, and id key, I would pass "firstName" to see "John" or "lastName" to see "Doe". If you need to include multiple fields of the object, see https://www.npmjs.com/package/@scheels-softdev/frontend-utility-functions?activeTab=readme

disabled (optional)

• If you want to conditionally disable the dropdown you can do that here

idField (optional)

• IdField is a keyof T, much like textFields. while textFields determines what's displayed in the dropdown, idField overrides what field of each object the dropdown looks at to compare against the selectedId prop
• For example, if our employee's id field is employeeId instead of just id, we would pass "employeeId" here

title (optional)

• The label that appears in your multiselect when there aren't any options selected, or just above the multiselect when there are
• For example, if we want to use it to send a letter to an employee, we would pass "Selected Employee" here

hideClearButton (optional)

• A boolean indicating whether the clear button should be hidden. by default it will be shown

style (optional)

• An override to the default styling that ships with kendo

isLoading (optional)

• A boolean indicating whether your data is still loading or not

MultiSelect Dropdown

Props

data: T[];
selectedData: T[];
textField: keyof T;
onSelect: Function;
title?: string;
limit?: number;

data

• Array of T. the Definition of what T is matters for the "textFields" prop

selectedData

• The id of the item selected. By default the dropdown will assume your item has an "id" property. if it doesn't, see optional parameters

textField

• The field of each object to actually display
• For example, if my dropdown is fed a list of employee objects with a firstName, lastName, and id key, I would pass "firstName" to see "John" or "lastName" to see "Doe". If you need to include multiple fields of the object, see https://www.npmjs.com/package/@scheels-softdev/frontend-utility-functions?activeTab=readme

onSelect

• "Event" you're given should just be your new array of selected Items

title (optional)

• The label that appears in your multiselect when there aren't any options selected, or just above the multiselect when there are
• For example, if we want to use it to send work anniversary letters to multiple employees, we would pass "Selected Employees" here

limit (optional)

• The upper limit of how many items the user can select at once.
• For example, if our meeting room only has room for 8 people, we would pass an 8.

Filter Cell Dropdown

Props

{...GridFilterCellProps} (from @progress/kendo-react-grid)
data: T[];
textField: keyof T;
separator?: string;

{...FilterCellProps}

• all of the default props that are passed from kendo grid when trying to override the filter cell

data

• Array of T. What you want to display in the dropdown. the Definition of what T is matters for the "textFields" prop

textField

• The field of each object to actually display
• For example, if my dropdown is fed a list of employee objects with a firstName, lastName, and id key, I would pass "firstName" to see "John" or "lastName" to see "Doe". If you need to include multiple fields of the object, see https://www.npmjs.com/package/@scheels-softdev/frontend-utility-functions?activeTab=readme

separator (optional)

• This defines what your text fields are separated by. by default, it is assumed you only want a space between them. Use this prop if you want to change this
• For example, if some of our associates only know the status IDs for Active, Terminated, or On Leave and we want to display them side by side, we might want to add a "dash" seporator. to do this we would pass " - " here

ToolbarButton

Props

item: T data: T[] setData: Function

item

An item of type T used for adding a new element.

data

An array of T objects representing the existing data.

setData

A function used to update the data array. Note: The T type extends the CommonProps interface, which includes the following properties:

More Updates to the README Coming Soon!