Challenge Overview
This is a 72Hrs Challenge to build a Grid component using Kendo Grid UI Component following the requirements outlined below.
# Challenge Requirements
## Tech Stack
- Angular 12
- Typescript
- Material UI
- Angular Library
- SCSS/CSS
## Library Code Structure
You are building a reusable angular library where this library can be reused/installed in different projects, so follow best practices for Angular Libraries as Mentioned here https://angular.io/guide/libraries
## Design Asset
Provided in challenge forums
## Kendo UI Grid
Use this component as base for the component
https://www.telerik.com/kendo-angular-ui/components/grid/
Everything mentioned below is supported by the Kendo Grid, you are only customizing the style and support stored column templates.
## Component Requirement
- The library is exposing a Grid component that will be a wrapper for the Kendo UI grid with extra functionality
- The data stream should be an input to the library component, consuming app can use local data, remote or streaming data, in all cases the kendoGridBinding should be the way to pass data there, read more https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/basics/
- The component should be reskinned to match the design 100%
- Read more about Kendo Grid styling https://www.telerik.com/kendo-angular-ui/components/grid/styling
- Note that we are not required to support customizing the style by the consuming app
- The grid should be responsive (This is default behavior by Kendo Grid but you need to support the style for that)
- Popups to show based on click and hover state
- https://marvelapp.com/prototype/2g0b38gg/screen/88507872
- https://marvelapp.com/prototype/2g0b38gg/screen/88507398
- https://marvelapp.com/prototype/2g0b38gg/screen/88507428
- Default Filtering to be exposed in this challenge (In next challenge we are customizing)
- Default Sorting to be exposed in this challenge (In next challenge we are customizing)
- Default column resizing to be supported (it is supported by default by kendo)
- In cell editing to be enabled (kendo has feature to properly decide the editing field type but you need to customize style) https://www.telerik.com/kendo-angular-ui/components/grid/editing/in-cell-editing/
- Table columns layout to be implemented
- https://marvelapp.com/prototype/2g0b38gg/screen/88507399
- https://marvelapp.com/prototype/2g0b38gg/screen/88507400
- https://marvelapp.com/prototype/2g0b38gg/screen/88507403
- The template field at top left (above) the grid https://marvelapp.com/prototype/2g0b38gg/screen/88507409
- To support columns layout for better performance we need to support dynamic column loading, and virtualization
- Expose also input parameter for fetching layouts from consuming app (assuming it can be local or remote) and expose events so consuming app register to to update backend when changes in template is done
- https://www.telerik.com/kendo-angular-ui/components/grid/columns/define-columns/
- https://www.telerik.com/kendo-angular-ui/components/grid/columns/virtual/
## General Notes
- Create a demo app that demonstrate how to import and use the library with local data
- Create a READM for the setup and how to run the demo, and it should include the Public API details of the library/component and how to use it with local data
- Grid is loading minimum of 300 rows, progressive/pager with remote to be supported in next challenge
- Create proper mock data for the demo purpose
- Avoid using '!important' in your CSS code, unless overwriting javascript inline code.
- Avoid @import
- Avoid leaving console.log()
# What to Submit ?
- Source code of all requirements
- Video that show the work you did
- Text file if you have any note to communicate to the reviewers