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).
- 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
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
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;
- Array of T. the Definition of what T is matters for the "textFields" prop
- 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
- Event passed is a ComboBoxChangeEvent (from kendo-react-dropdowns)
- 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
- If you want to conditionally disable the dropdown you can do that here
- 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
- 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
- A boolean indicating whether the clear button should be hidden. by default it will be shown
- An override to the default styling that ships with kendo
- A boolean indicating whether your data is still loading or not
data: T[];
selectedData: T[];
textField: keyof T;
onSelect: Function;
title?: string;
limit?: number;
- Array of T. the Definition of what T is matters for the "textFields" prop
- 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
- 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
- "Event" you're given should just be your new array of selected Items
- 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
- 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.
{...GridFilterCellProps} (from @progress/kendo-react-grid)
data: T[];
textField: keyof T;
separator?: string;
- all of the default props that are passed from kendo grid when trying to override the filter cell
- Array of T. What you want to display in the dropdown. the Definition of what T is matters for the "textFields" prop
- 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
- 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
item: T data: T[] setData: Function
An item of type T used for adding a new element.
An array of T objects representing the existing data.
A function used to update the data array. Note: The T type extends the CommonProps interface, which includes the following properties: