#row grouping

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)