Grids/Data tables
Problem: input within grids and grid logic for when columns and information gets out of control
Solution: ag-grid
Updated: Aug 23
Dec 2016
Kendo Grid http://demos.telerik.com/kendo-ui/grid/angular
- Shows nested information for users to access info - Quick ascending/descending functionality on a higher level - Tabbed information within nested grid - Pagination to allow user to scroll WITHIN 2nd nested grid - The individual (nested) grids are collapsable - Pagination exists for the FULL compilation of grids - tallies the full amount of results on bottom right of main grid + nested grids
Responsive, collapsable tables http://codepen.io/dubrod/pen/OVyJoG
- Collapses and expands a grid line - Assume this pattern would help solve the branching pattern seen in desktop Merchant
“Row Grouping” grids https://react.rocks/example/react-data-grid http://adazzle.github.io/react-data-grid/examples.html#/grouping
- Draggable column headers that sort grid information
....SO COOL
"All features” http://adazzle.github.io/react-data-grid/examples.html#/all-features
This “edit” function (square in corner of grid input) allows for: - Multiple select - Drag and copy function - Writable fields hold multiple inputs (i.e. drop down lists, type form input, scrolling list)
Pivot function https://react.rocks/example/react-pivot
- Useful for head office screen designs
Jan 4
Filter Row for Costs & Discounts http://demos.telerik.com/kendo-ui/grid/filter-row
- RE: Costs & Discounts concept and how it can be applied to data - Top row, instead of filtering function, would be a simple input box. From there, the user enters data that cascades/applies down “ALL ROWS” (hits enter button on the side?) OR can enter data in individual input boxes within grid, and is allowed to copy + drag function within the table.
Sketches from James & Peter session
Grid/Detail Template http://demos.telerik.com/kendo-ui/grid/detailtemplate
- Could be useful for merging grid and card information layout together > packs as much information as possible into a data grid
Grid/Keyboard Navigation http://demos.telerik.com/kendo-ui/grid/keyboard-navigation
- Tabbing function with arrow keys
Jan 6
Development frameworks
Development team references Smart Table & Kendo Grid UI to develop grids on Store Portal
1. https://lorenzofox3.github.io/smart-table-website/ - This offers more flexibility in functionality
2. http://demos.telerik.com/kendo-ui/grid/selection - This is paid for to use - Hard to “hack together” or manipulate code to get different functionality - Styling? Should be easy to alter the look..
Jan 9
Frameworks Using 2 grids - borrowing styling and functionality from both
http://demos.telerik.com/kendo-ui/grid/index Currently using: - Export to Excel - Selection (drag) - Hover styling
https://lorenzofox3.github.io/smart-table-website/ Unsure of current use Both of these can be referenced to properly put together a new grid design that’s easier to implement, follows standards and visually appealing. Will be able to justify placement based on design guidelines.
Jan 12
Styling a Kendo UI grid
Hello Richard, Please consult the following documentation article... http://www.kendoui.com/documentation/ui-widgets/appearance-styling.aspx ...and demo: http://jsfiddle.net/dimodi/LL3GN/ For additional customization, you can inspect the Grid HTML output with Firebug, see what HTML elements and CSS classes are responsible for the visual appearance of the particular object and add custom CSS rules. In order to successfully override Kendo styles, you have to be familiar with the concept of CSS specificity.
CSS Specificity: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/ - How elements are weighted and implemented on the front end
Feb 3
Allocations grid - refer to Lucie’s documentation https://mi9retail.atlassian.net/wiki/x/qQCAAw Grid functions that need to be carried over: - Copy across the row and apply it to another row -- (copies same data arrangement in grid input) - Copy down the column and applied to another column -- (copies same data arrangement in grid input) - Based on ribbon bar selection (i.e. allocation algorithm type from dropdown), the grid automatically applies algorithm to the data input -- this would also be true if a single data input was copy+dragged/cascaded down or across the grid AKA copies the movement of the original copy - Copy row data across screens (this is all currently right click) - Can import from external excel doc - Keep the pivot function - A custom grid that saves layout and function from user’s last session
Feb 6
Grid Research - functionality Initial Google Search: https://www.google.ca/search?q=stack+overflow&oq=stack&aqs=chrome.0.0j69i65j69i57j69i60j69i59j0.1911j0j1&sourceid=chrome&ie=UTF-8#q=copying%20excel%20grid%20function%20site%3Astackoverflow.com
- http://stackoverflow.com/questions/1095131/paste-excel-data-into-html-table
- http://stackoverflow.com/questions/2006468/copy-paste-from-excel-to-a-web-page
- http://stackoverflow.com/questions/9019158/jquery-spreadsheet-grid-plugin-with-copy-paste-from-to-excel
- http://stackoverflow.com/questions/25463453/copying-of-specific-range-of-excel-cells-from-one-worksheet-to-another-worksheet
- http://stackoverflow.com/questions/26126088/using-dijkstras-algorithm-for-pathfinding-on-a-grid
Feb 8
Algorithms:
https://www.quora.com/How-can-I-implement-machine-learning-algorithms-in-a-web-application - Unsure if it’s “machine learning” that we need
April 18
Responsive grid to card: http://codepen.io/zavoloklom/pen/IGkDz - Identify breakpoint for mobile (1024) where the grid separates into cards
Mobile action solution --> Bottom sheet: https://material.io/guidelines/components/bottom-sheets.html#bottom-sheets-persistent-bottom-sheets - When the data table scrolls off view, actions can live in bottom sheet to not clutter UI
Aug 23
Data table - flashing effect (could be used for when something is added to the grid)
https://poloniex.com/exchange#btc_xrp