\n\t\t\t),\n\t\t},\n\t\t{\n\t\t\ttitle: 'FUND NOTICE',\n\t\t\tfield: 'fundingNotice',\n\t\t\tshow: true,\n\t\t\twidth: '160px',\n\t\t\tfilter: 'boolean',\n\t\t\tcell: (props) => {\n\t\t\t\treturn ;\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\ttitle: 'NOTES',\n\t\t\tfield: 'notes',\n\t\t\tshow: true,\n\t\t\twidth: '320px',\n\t\t\tcell: (props) => {\n\t\t\t\treturn ;\n\t\t\t},\n\t\t},\n\t],\n\n\tstyles: (theme) => {\n\t\treturn {\n\t\t\ticon: {\n\t\t\t\twidth: '100%',\n\t\t\t\tmargin: '0 auto',\n\t\t\t},\n\t\t\tapprovedIcon: { color: green[500] },\n\t\t\tunapprovedIcon: { color: red[500] },\n\t\t\tdocumentIcon: { color: blue[500] },\n\t},\n\n\tfilterOperators: {\n\t\ttext: [{ text: 'grid.filterContainsOperator', operator: 'contains' }],\n\t\tnumeric: [{ text: 'grid.filterEqOperator', operator: 'eq' }],\n\t\tdate: [{ text: 'grid.filterEqOperator', operator: 'eq' }],\n\t\tboolean: [{ text: 'grid.filterEqOperator', operator: 'eq' }],\n\t},\n};\n```\n\n---\n\n## Current Custom Features\n\n\n\n- \nData Export\n
\n- \nThe Grid comes with a method that is passed to a toolbar as a prop. This method is called kendoDataToToolbar, and when called will return an array with the current grid filter and sort settings allowing you to parse this out in the host application to return a CSV or any other file type.\n
\n
\n \n\n- \nLocal Storage\n
\n- \nLocal storage was added as a quality of life improvement. Currently, it is baked into the grid, with no way to remove the functionality, although this may change in the future if we want to make localStorage optional. If you are using more than one kendo grid in an application, you must pass in an object with localColumnFilter: 'Insert Unique Name'. This is because local storage will affect each grid the same if namespacing isn't given.\n\n
\n
\n \n\n- \nClear Local Storage\n
\n- \nThis is a callback passed directly to the Toolbar component, if it is provided. This will set local storage to its inital state, useful for clearing all filters/sorting quickly. Please see the implementation section for more details.\n\n
\n
\n \n\n
\n\n---\n\n## Implementation Notes\n\n\n\n- \nData\n
\n- \nData takes in an array of objects. This is the data that is displayed inside the grid, please make sure that when defining your columns config, that the appropriate keys are matching the objects.\n
\n
\n \n\n- \nData State\n
\n- \nData State is essentially initialState for the grid. It contains some default setup values, or if localStorage is present will default to localStorage instead. We defined ours in context, but this could be done at the component level as well.\n\n
\n
\n \n\n- \nHandle Row Click\n
\n- \nThis prop accepts a callback method that returns the selected row data. In the callback we defined in LPO, we dispatch an action that updates our context to have a 'selectedID' that renders an additional Details panel component, but you can do anything you want with the callback.\n
\n
\n \n\n- \nConfig\n
\n- \nConfig has been explained above, necessary prop as it tells which values to put in what columns.\n
\n
\n \n\n- \nToolbar\n
\n- \nToolbar is an optional component, when passed in is rendered at the top of the grid. This can be as simple as a div, or something much more complex. We have multiple action items in our toolbar, as well as a global search feature and button to reset our local storage.\n
\n
\n \n\n- \nHelpful Tip for Testing Kendo Changes On A Project-Level \n
\n- \nIt can be tricky to test changes made to Kendo in the React Component Library, since we need to publish a new version before we can bring the changes into a project. There is a workaround! If you want to see the functioning behaviors of Kendo on a project-level before publishing, do this:\n\t
\n\t- In the project (such as LPO or DMM), create a folder near the .config file
\n\t- In this new folder, paste the entire `lib` folder found in the React Component library at RCL > packages > lpp-kendo-grid > lib. This includes the components folder and the `index.js` file.
\n\t- In the project, find where LppStandardKendoGrid is being imported from @lithiamotors/lpp-kendo-grid. Comment this out, and instead import LppStandardKendoGrid from the BaseGrid file of the folder that was copied over from RCL. (Like this: import LppStandardKendoGrid from './components/KENDO/lib/components/BaseGrid';).
\n\t- If the project is using the same package versions from Telerik as RCL, this should work! If not, you may need to update the local versions using npm. This can be found by comparing the project's package-lock.json file with the package-lock.json file in the lpp-kendo-grid folder in RCL. A good place to start is to search for is kendo-react-grid and compare versions. If you need to update the local versions, Just remember to undo this!
\n
\n \n
\n \n\n
\n\n---\n\n## Implementation Example\n\n```jsx\nimport './kendo-css.css'; // Required for pagination styles\nimport { MuiThemeProvider, Button } from '@material-ui/core';\nimport LppMuiTheme from '../../packages/lpp-mui-theme/dist/lpp-mui-theme';\nimport { LppStandardKendoGrid } from '../../packages/lpp-kendo-grid/dist/lpp-kendo-grid';\nimport GridConfig from './config';\n\nconst Toolbar = ({ kendoDataToToolbar, handleRemoveLocalStorage }) => {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\tIMPORT\n\t\t\t{' '}\n\t\t\t\n\t\t\t\t\talert(JSON.stringify(kendoDataToToolbar().data, null, 4))\n\t\t\t\t}\n\t\t\t>\n\t\t\t\tEXPORT GRID DATA\n\t\t\t\n\t\t\t handleRemoveLocalStorage()}\n\t\t\t>\n\t\t\t\tCLEAR FILTERS\n\t\t\t\n\t\t
\n\t);\n};\n\nconst App = (props) => {\n\tconst data = [\n\t\t{\n\t\t\tname: 'Cory',\n\t\t\tstate: 'Oregon',\n\t\t\tposition: 'Software Engineer',\n\t\t},\n\t\t{\n\t\t\tname: 'Andy',\n\t\t\tstate: 'Oregon',\n\t\t\tposition: 'Senior Mangager Application Development',\n\t\t},\n\t\t{\n\t\t\tname: 'Daylon',\n\t\t\tstate: 'California',\n\t\t\tposition: 'Software Engineer',\n\t\t},\n\t\t{\n\t\t\tname: 'Katie',\n\t\t\tstate: 'New Mexico',\n\t\t\tposition: 'Business Analyst',\n\t\t},\n\t\t{\n\t\t\tname: 'Adam',\n\t\t\tstate: 'Oregon',\n\t\t\tposition: 'Senior UX/UI Designer',\n\t\t},\n\t];\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\n\t);\n};\n\nexport default App;\n```\n\n---\n\n## Useful Links\n\n\n\n---\n","readmeFilename":"README.md"}