Table of Contents

• Table of Contents
• Usage
• Version History
  • Version 2.3.5
  • Version 2.3.4
  • Version 2.3.3
  • Version 2.3.2
  • Version 2.3.1
  • Version 2.3.0
  • Version 2.2.0
  • Version 2.0.1
  • Version 2.0.0
  • Version 1.3.0
  • Version 1.2.3
  • Version 1.2.2
  • Version 1.2.1
  • Version 1.2.0
  • Version 1.1.2
  • Version 1.1.1
  • Version 1.1.0
  • Version 1.0.2
  • Version 1.0.0
  • Version 1.0.0-alpha.9
  • Version 1.0.0-alpha.8
  • Version 1.0.0-alpha.7
  • Version 1.0.0-alpha.6
  • Version 1.0.0-alpha.5
• Kendo Grid Overview
• Config
• Current Custom Features
• Implementation Example
• Implementation Notes
• Useful Links

Usage

@lithiamotors/lpp-kendo-grid

Version History

Version 2.3.5 (jrodes-122518-featuremnygren-136753)

• Add type definition file
• Update the available filtering options to include a range of dates. Previously a user could filter data by one exact date, but this version update increases functionality to allow a user to filter between a range of two dates.

Version 2.3.4 (bug/mnygren-127600)

• Update the way 'data' is passed to the <Grid /> component when multiSelect is enabled, fixing pagination issues.

Version 2.3.3 (gradcliffe-126416)

• Revises the icons used for the display of "approved" and "unapproved" data in the grid cells.

Version 2.3.2 (bug/mnygren-124199)

• Updates styling/UI in 'Filter > Columns'. These changes include rendering the correct checkbox color, adding a little space around the checkbox, and rendering the correct button formatting.

Version 2.3.1 (bug/mnygren-121143)

• Updates package imports coming from Telerik/KendoReact, as the previous versions were not working well together.
• Fixes styling on 'active' className.
• Reinstates built-in styling on filter modal.

Version 2.3.0 (develop)

• Fixes ellipses rendering on page load on 'multiSelect' column
• Fixes checkmark border color (to render light blue instead of dark blue)
• Reinstates 'active' className on filtering, pulling filter parameters from localStorage values
• Adds styling to 'active' className on filtering, so users can see which column they have filtered

Version 2.2.0 (develop)

• Fixes to the bulk edit form input field
• Telerik Kendo Grid package updates to v5.9.0
• Updates to the Custom Styles for checkbox colors

Version 2.0.1 (develop)

• Added comment about css prop and pragma

Version 2.0.0 (feature/cmorrissey-79230)

• Upgraded to MUI v5
• Added theme prop, only way to pass theme from MUI to Kendo that inherits from theme provider.
• Custom row styling done via the host app will now be done using the @emotion/styled package. We are still able to access theme in our config, but this is the only way we can handle styling moving forward.

Version 1.3.0 (feature/cmorrissey-85080)

• Restructured kendo grid, splitting our main grid into multiple components
• Added the handleAppDataStateChange callback prop to pass dataState to the Host app. Data state is still controlled locally, but we can now fetch data using query params from our data state.

Version 1.2.3 (grid-multi-select-fix)

• Added useEffect to selectedData state
• • Issue was grid would render, selectedData would init to an empty array unless data was static, and would not update after AJAX call

Version 1.2.2 (bug/cmorrissey-68166)

• Changed CSS selector for column elipses color styling

Version 1.2.1 (bug/cmorrissey-62392)

** Story Change **

• Removed the '(All)' option and filter icon button from custom boolean filter. Clicking on (All) would not let us remove any current filters, and the filter icon button would just select (All) for us.

** Additional Changes **

• Removed default props object in dataState array, when clearing filter settings it would sort by ID (not intended)
• Updated story to have check on length of selectedIds, if array has 1 or more items we disable the main handleClick functionality. This is interesting and works better than expected, as normal clicking will break back to the normal flow but CMD clicking will not override the current array.

Version 1.2.0 (feature/cmorrissey-42882)

• Added mutliSelect local kendo state from documentation (https://www.telerik.com/kendo-react-ui/components/grid/selection/#toc-customizing-the-selection)
• Added some mutliSelect paramaters into kendoConfig
• Added method to get multiSelect data in toolbar
• Added LppKendoGrid prop to pass host app props into toolbar

Version 1.1.2 (feature/cmorrissey-62224)

• Changed importance level of dataGridRowSelected styling

Version 1.1.1 (feature/cmorrissey-49264)

• Changed row render logic, allowing alt shading and correct hover effects for both custom and default rows
• Added some useCursor logic that will make the grid look and feel more static than interactive for future "display" grids

Version 1.1.0 (feature/cmorrissey-49496)

• Added custom column filters, and custom cells to package.
• Updated storybook example to show these changes

Version 1.0.2 (feature/cmorrissey-45951)

• Added "kendo:license" script in package json

Version 1.0.0 (feature/cmorrissey-42886)

• Passing usePointerCursor to customRow

Version 1.0.0-alpha.9 (feature/cmorrissey-42886)

• Added dataGridRowSelected to kendo component

Version 1.0.0-alpha.8 (feature/cmorrissey-42886)

• Passing classes object to CustomRow, allows us to insert class styles via config and consume them in host apps custom row component.

Version 1.0.0-alpha.7 (feature/cmorrissey-42886)

• Updated td and th padding

Version 1.0.0-alpha.6 (feature/cmorrissey-42886)

• Added check to render bottom row border based on custom height
  • Tech debt for this item, if custom height is less than total contents height, renders bottom row anyway
• Added alt row shading, pointer prop to main grid

Version 1.0.0-alpha.5 (feature/cmorrissey-42886)

• Deployed base version of Kendo Grid

Kendo Grid Overview

Config

const LienPayoffGridConfig = {
	properties: {
		sortable: true,
		resizable: true,
		style: { height: 'calc(100vh - 64px - 48px)' }, // 64px (Toolbar), 48px (Padding Top / Bottom)
		selectedField: 'selected',
		pageable: { pageSizes: [20, 100, 500] },
	},

	rows: LienPayoffGridRowCustom,

	columns: [
		{
			title: 'APPROVED',
			field: 'approvalStatus',
			show: true,
			filter: 'boolean',
			width: '160px',
			cell: (props) => {
				return <CustomCellCheckmark data={props.dataItem.approvalStatus} />;
			},
			filterCell: (props) => (
				<CustomColumnApprovedStatus
					{...props} // Needed to bind Kendo event methods and state (onChange, form values, etc)
					data={['Approved', 'Unapproved']}
					defaultItem="(All)"
				/>
			),
		},
		{
			title: 'ID',
			field: 'dealNumber',
			show: true,
			filter: 'text',
			width: '160px',
			cell: (props) => {
				return <CustomTradeId data={props.dataItem} />;
			},
		},
		{
			title: 'STORE #',
			field: 'storeNumber',
			show: true,
			width: '120px',
		},
		{
			title: 'GROUP',
			field: 'filterGroup',
			show: true,
			width: '120px',
		},
		{
			title: 'CUSTOMER',
			field: 'customerName',
			show: true,
			width: '320px',
		},
		{
			title: 'TRADE VIN',
			field: 'tradeVin',
			show: true,
			width: '200px',
		},
		{
			title: 'CIT',
			field: 'cit',
			show: true,
			width: '120px',
			cell: (props) => {
				return <CustomNumberFormat data={props.dataItem.cit} />;
			},
		},
		{
			title: 'VEH REC',
			field: 'vehRec',
			show: true,
			width: '160px',
			cell: (props) => {
				return <CustomNumberFormat data={props.dataItem.vehRec} />;
			},
		},
		{
			title: 'LPO BALANCE',
			field: 'lpoBalance',
			show: true,
			width: '160px',
			cell: (props) => {
				return <CustomNumberFormat data={props.dataItem.lpoBalance} />;
			},
		},
		{
			title: 'LIEN PAYOFF AMOUNT',
			field: 'payoff',
			show: true,
			width: '240px',
			cell: (props) => {
				return <CustomNumberFormat data={props.dataItem.payoff} />;
			},
		},
		{
			title: 'ADJUSTED PAYOFF AMOUNT',
			field: 'adjPayoff',
			show: true,
			width: '240px',
			cell: (props) => {
				return <CustomNumberFormat data={props.dataItem.adjPayoff} />;
			},
		},
		{
			title: 'SOLD DATE',
			field: 'soldDate',
			show: true,
			width: '160px',
			format: '{0: MM/dd/yyyy}',
			cell: (props) => {
				return <CustomSoldDateFormat data={props.dataItem} />;
			},
		},
		{
			title: 'CRITERIA',
			field: 'criteria',
			show: true,
			width: '160',
		},
		{
			title: 'FUNDING BANK',
			field: 'bank',
			show: true,
			width: '280px',
		},
		{
			title: 'LIEN BANK',
			field: 'lienBank',
			show: true,
			width: '240px',
		},
		{
			title: 'DOCUMENTS',
			field: 'hasDocuments',
			show: true,
			width: '160px',
			cell: (props) => {
				return <CustomCellDocument data={props.dataItem.hasDocuments} />;
			},
			filterCell: (props) => (
				<CustomColumnDocuments
					{...props} // Needed to bind Kendo event methods and state (onChange, form values, etc)
					data={['Has Documents', 'No Documents']}
					defaultItem="(All)"
				/>
			),
		},
		{
			title: 'FUND NOTICE',
			field: 'fundingNotice',
			show: true,
			width: '160px',
			filter: 'boolean',
			cell: (props) => {
				return <CustomCellCheckmark data={props.dataItem.fundingNotice} />;
			},
		},
		{
			title: 'NOTES',
			field: 'notes',
			show: true,
			width: '320px',
			cell: (props) => {
				return <CustomCellNotes data={props.dataItem} />;
			},
		},
	],

	styles: (theme) => {
		return {
			icon: {
				width: '100%',
				margin: '0 auto',
			},
			approvedIcon: { color: green[500] },
			unapprovedIcon: { color: red[500] },
			documentIcon: { color: blue[500] },
	},

	filterOperators: {
		text: [{ text: 'grid.filterContainsOperator', operator: 'contains' }],
		numeric: [{ text: 'grid.filterEqOperator', operator: 'eq' }],
		date: [{ text: 'grid.filterEqOperator', operator: 'eq' }],
		boolean: [{ text: 'grid.filterEqOperator', operator: 'eq' }],
	},
};

Current Custom Features

Implementation Notes

Implementation Example

import './kendo-css.css'; // Required for pagination styles
import { MuiThemeProvider, Button } from '@material-ui/core';
import LppMuiTheme from '../../packages/lpp-mui-theme/dist/lpp-mui-theme';
import { LppStandardKendoGrid } from '../../packages/lpp-kendo-grid/dist/lpp-kendo-grid';
import GridConfig from './config';

const Toolbar = ({ kendoDataToToolbar, handleRemoveLocalStorage }) => {
	return (
		<div>
			<Button
				style={{ marginLeft: 16 }}
				color="primary"
				variant="contained"
				disabled
			>
				IMPORT
			</Button>{' '}
			<Button
				style={{ backgroundColor: 'green', color: 'white', marginLeft: 16 }}
				variant="contained"
				onClick={() =>
					alert(JSON.stringify(kendoDataToToolbar().data, null, 4))
				}
			>
				EXPORT GRID DATA
			</Button>
			<Button
				style={{ backgroundColor: 'orange', color: 'white', marginLeft: 16 }}
				variant="contained"
				onClick={() => handleRemoveLocalStorage()}
			>
				CLEAR FILTERS
			</Button>
		</div>
	);
};

const App = (props) => {
	const data = [
		{
			name: 'Cory',
			state: 'Oregon',
			position: 'Software Engineer',
		},
		{
			name: 'Andy',
			state: 'Oregon',
			position: 'Senior Mangager Application Development',
		},
		{
			name: 'Daylon',
			state: 'California',
			position: 'Software Engineer',
		},
		{
			name: 'Katie',
			state: 'New Mexico',
			position: 'Business Analyst',
		},
		{
			name: 'Adam',
			state: 'Oregon',
			position: 'Senior UX/UI Designer',
		},
	];

	return (
		<MuiThemeProvider theme={LppMuiTheme}>
			<LppStandardKendoGrid
				data={data}
				config={GridConfig}
				Toolbar={props.useToolbar && Toolbar}
				localStorageMapper={{
					localColumnFilter: 'lpp-kendo-grid-local-storage',
					localDataState: 'lpp-kendo-grid-local-datastate',
				}}
			/>
		</MuiThemeProvider>
	);
};

export default App;

Useful Links