Grid Multi Row Layout feature #4384
Assignees
Labels
grid: general
grid: multi-row-layout
🧰 feature-request
✅ status: resolved
Applies to issues that have pending PRs resolving them, or PRs that have already merged.
Comments
dkamburov
added a commit
that referenced
this issue
Mar 22, 2019
mpavlinov
added
🛠️ status: in-development
dkamburov
added a commit
that referenced
this issue
Mar 26, 2019
dkamburov
added a commit
that referenced
this issue
Mar 28, 2019
dkamburov
added a commit
that referenced
this issue
Apr 3, 2019
dkamburov
added a commit
that referenced
this issue
Apr 3, 2019
dkamburov
added a commit
that referenced
this issue
Apr 5, 2019
14 tasks
dkamburov
added a commit
that referenced
this issue
Apr 10, 2019
dkamburov
added a commit
that referenced
this issue
Apr 12, 2019
14 tasks
mpavlinov
pushed a commit
that referenced
this issue
Apr 22, 2019
* feat(grid-mrl): Initial MRL POC #4384 * chore(grid-mrl): Fix failing build * chore(gridMRL): Fix misalignment issue with headers #4384 * chore(gridMRL): fix failing tests for hieararchical grid * refactor(gridMRL): Change the way grid layout is applied * chore(gridMRL): Fix failing build * fix(mrl): Fixing virtualization calculations to use caclWidth for col groups. Fixing fractioins calcs. Fixing grid-template-columns binding. * test(gridMRL): Add initial test spec file for MRL #4384 * chore(*): Adding basic support for with in % for MRL. * chore(*): Making test structure more generic. Setting up generic functions that check the rendered DOM reflects the col settings correctly. * fix(gridMRL): Implement the widths and fill the gaps if any #4384 * chore(gridMRL): Fix tslint error * fix(gridMRL): Set the heights of MRL rows to fr instead of auto #4384 * feat(gridMRL): Handle MRL cells when no widths are set #4384 * chore(*): Adding a few tests. * chore(gridMRL): Fix tslint in mrl tests * chore(gridMRL): Remove fit from mrl spec file * chore(grid-mrl): Apply some of the review notes * chore(*): Adding more test scenarios with no width, width in px and in %. * chore(*): Adding some scenarios with invalid layouts. * chore(*): Adding virtualization tests. * chore(*): Adding vertical virtualization test for mrl. * chore(*): Removing enableMRL Input, adding a separate column-layout component that extends the column-group component to be used for mrl config. * chore(*): Handling scenario where both column groups and layouts are defined - in that case mch are disregarded. Adding test. * fix(grid-mrl): Use possible col width when the layout is incomplete #4384 * chore(*): Fixing errors after structural changes. * chore(*): If hgrid or tree grid have column layouts defined they should ignore them as mrl is supported only for normal igx-grid for now. * chore(*): Disabling part of test that fails only in travis with 2px difference. * style(gridMRL): Add borders when for headers and cells for multi row layout * style(grid-mrl): Revert border styles for mrl due to failing tests * fix(grid-mrl): Fix scenario with no column widths and grid in % #4384 * chore(*): Initial commit of MRL sample with configurator. * chore(*): Update sample to new mrl layout templating. * docs(grid-mrl): Update API docs with the latest changes * chore(*): Adding borders and updating tests. * chore(*): Fixing lint. * docs(grid-mrl): Update changelog and readme * chore(grid-mrl): Remove buttons hiding and pinning buttons from the sample * chore(*): Fix mrl config sample resizing cell from left to right by negative size. * chore(*): Rename function name in MRL config sample. * chore(*): Update sample config to reflect header text positioning. * chore(*): Add hover styles to draggable elements inside the MRL config sample. * chore(*): Increase memory when running tests 2GB * fix(MRL): Fixing styling issue in header for scenarios where groups have different total row span. Adding test as well. * refactor(grid-mrl): Change colEnd and rowEnd to numbers * chore(grid): Add types for columns QueryList<IgxColumnComponent> * chore(*): Fix samples with lasted changes in rowEnd and colEnd inputs * docs(grid-mrl): Update README.md for the rowEnd and colEnd inputs * refactor(*): fix style classes
dkamburov
added a commit
that referenced
this issue
Apr 23, 2019
dkamburov
added a commit
that referenced
this issue
Apr 30, 2019
mpavlinov
pushed a commit
that referenced
this issue
Apr 30, 2019
* feat(grid-mrl): Initial MRL POC #4384 * chore(grid-mrl): Fix failing build * chore(gridMRL): Fix misalignment issue with headers #4384 * chore(gridMRL): fix failing tests for hieararchical grid * refactor(gridMRL): Change the way grid layout is applied * chore(gridMRL): Fix failing build * fix(mrl): Fixing virtualization calculations to use caclWidth for col groups. Fixing fractioins calcs. Fixing grid-template-columns binding. * test(gridMRL): Add initial test spec file for MRL #4384 * chore(*): Adding basic support for with in % for MRL. * chore(*): Making test structure more generic. Setting up generic functions that check the rendered DOM reflects the col settings correctly. * fix(gridMRL): Implement the widths and fill the gaps if any #4384 * chore(gridMRL): Fix tslint error * fix(gridMRL): Set the heights of MRL rows to fr instead of auto #4384 * feat(gridMRL): Handle MRL cells when no widths are set #4384 * chore(*): Adding a few tests. * chore(gridMRL): Fix tslint in mrl tests * chore(gridMRL): Remove fit from mrl spec file * chore(grid-mrl): Apply some of the review notes * chore(*): Adding more test scenarios with no width, width in px and in %. * chore(*): Adding some scenarios with invalid layouts. * chore(*): Adding virtualization tests. * chore(*): Adding vertical virtualization test for mrl. * chore(*): Removing enableMRL Input, adding a separate column-layout component that extends the column-group component to be used for mrl config. * chore(*): Handling scenario where both column groups and layouts are defined - in that case mch are disregarded. Adding test. * fix(grid-mrl): Use possible col width when the layout is incomplete #4384 * chore(*): Fixing errors after structural changes. * chore(*): If hgrid or tree grid have column layouts defined they should ignore them as mrl is supported only for normal igx-grid for now. * chore(*): Disabling part of test that fails only in travis with 2px difference. * style(gridMRL): Add borders when for headers and cells for multi row layout * style(grid-mrl): Revert border styles for mrl due to failing tests * fix(grid-mrl): Fix scenario with no column widths and grid in % #4384 * chore(*): Initial commit of MRL sample with configurator. * chore(*): Update sample to new mrl layout templating. * docs(grid-mrl): Update API docs with the latest changes * chore(*): Adding borders and updating tests. * chore(*): Fixing lint. * docs(grid-mrl): Update changelog and readme * chore(grid-mrl): Remove buttons hiding and pinning buttons from the sample * chore(*): Fix mrl config sample resizing cell from left to right by negative size. * chore(*): Rename function name in MRL config sample. * chore(*): Update sample config to reflect header text positioning. * chore(*): Add hover styles to draggable elements inside the MRL config sample. * feat(MRL-Pinning): Adding basic mrl + pinning implementation and styling. * chore(*): Fixing borders getting double on scroll when bindings are re-evaluated. * test(mrl): Moving common code in util file. Adding basic spec file for MRL feature integration. * chore(*): Increase memory when running tests 2GB * chore(*): Adding a few more test scenarios. * fix(MRL): Fixing styling issue in header for scenarios where groups have different total row span. Adding test as well. * chore(*): Adding pinning (via toolbar) UI tests. * chore(*): Moving check for hasLastPinnedChildColumn inside column component. * chore(*): Fixing merge issue. * chore(*): Fixing test. * chore(grid): Fix failing tests and merge issues * chore(*): Remove --max_old_space_size from test script in packages.json * chore(grid-mrl): Resolve misalignment between headers and cells * chore(grid-mrl): Remove 'flex' from headers in IE, as it applies misalignments * chore(grid-mrl): Fix typo in invoking isIE function * chore(*): Renaming method verifyHeadersAreAligned
dkamburov
added a commit
that referenced
this issue
May 2, 2019
mpavlinov
pushed a commit
that referenced
this issue
May 7, 2019
* feat(grid-mrl): Initial MRL POC #4384 * chore(grid-mrl): Fix failing build * chore(gridMRL): Fix misalignment issue with headers #4384 * chore(gridMRL): fix failing tests for hieararchical grid * refactor(gridMRL): Change the way grid layout is applied * chore(gridMRL): Fix failing build * fix(mrl): Fixing virtualization calculations to use caclWidth for col groups. Fixing fractioins calcs. Fixing grid-template-columns binding. * test(gridMRL): Add initial test spec file for MRL #4384 * chore(*): Adding basic support for with in % for MRL. * chore(*): Making test structure more generic. Setting up generic functions that check the rendered DOM reflects the col settings correctly. * fix(gridMRL): Implement the widths and fill the gaps if any #4384 * chore(gridMRL): Fix tslint error * fix(gridMRL): Set the heights of MRL rows to fr instead of auto #4384 * feat(gridMRL): Handle MRL cells when no widths are set #4384 * chore(*): Adding a few tests. * chore(gridMRL): Fix tslint in mrl tests * chore(gridMRL): Remove fit from mrl spec file * chore(grid-mrl): Apply some of the review notes * chore(*): Adding more test scenarios with no width, width in px and in %. * chore(*): Adding some scenarios with invalid layouts. * chore(*): Adding virtualization tests. * chore(*): Adding vertical virtualization test for mrl. * chore(*): Removing enableMRL Input, adding a separate column-layout component that extends the column-group component to be used for mrl config. * chore(*): Handling scenario where both column groups and layouts are defined - in that case mch are disregarded. Adding test. * fix(grid-mrl): Use possible col width when the layout is incomplete #4384 * chore(*): Fixing errors after structural changes. * chore(*): If hgrid or tree grid have column layouts defined they should ignore them as mrl is supported only for normal igx-grid for now. * chore(*): Disabling part of test that fails only in travis with 2px difference. * style(gridMRL): Add borders when for headers and cells for multi row layout * style(grid-mrl): Revert border styles for mrl due to failing tests * fix(grid-mrl): Fix scenario with no column widths and grid in % #4384 * chore(*): Initial commit of MRL sample with configurator. * chore(*): Update sample to new mrl layout templating. * docs(grid-mrl): Update API docs with the latest changes * chore(*): Adding borders and updating tests. * chore(*): Fixing lint. * docs(grid-mrl): Update changelog and readme * chore(grid-mrl): Remove buttons hiding and pinning buttons from the sample * chore(*): Fix mrl config sample resizing cell from left to right by negative size. * chore(*): Rename function name in MRL config sample. * chore(*): Update sample config to reflect header text positioning. * chore(*): Add hover styles to draggable elements inside the MRL config sample. * chore(*): Increase memory when running tests 2GB * fix(MRL): Fixing styling issue in header for scenarios where groups have different total row span. Adding test as well. * refactor(grid-mrl): Change colEnd and rowEnd to numbers * feat(MRL&ColumnHiding): Initial implementation. * chore(*): Adding spec file with basic scenarios. * tests(mrl): Adding tests for mrl + hiding integration. * chore(*): Merging master into mkirova/mrl-hiding * chore(*): Merging master into mkirova/mrl-hiding * fix(mrl): Fix grid virtualization not rendering correct ammount of rows when multi row layout is configured.
mpavlinov
added
✅ status: resolved
14 tasks
This was referenced May 8, 2019
Merged
14 tasks
14 tasks
dkamburov
added a commit
that referenced
this issue
May 10, 2019
17 tasks
mpavlinov
pushed a commit
that referenced
this issue
Jun 5, 2019
* feat(grid-mrl): Basic right and left keyboard nav #4384 * chore(grid-mrl): Fix failing tests for existing grid navigation * refactor(grid-mrl): Refactor keyboard nav * feat(grid-mrl): Add navigate down in column layout #4384 * refactor(grid-mrl): Get row span from all columns not from current layout only * feat(grid-mrl): Add navigation with arrowdown #4384 * chore(grid-mrl): Fix failing build * chore(grid-mrl): Fix merge issues * chore(grid-mrl): Remove getChildColumnSizes function from nav service * chore(grid-mrl): Initial navigate up for mrl * chore(grid-mrl): emit selection as nav can be done within the same selectionNode * chore(grid-mrl): Fix failing tests * chore(grid-mrl): Fix broken merge * refactor(grid-mrl): Take into account hidden layouts when getting column index * chore(grid-mrl): Fix failing tslint * refactor(grid-mrl): Retain focus when navigating to the top cells * chore(grid-mrl): Fix condition checks for nav up and down * refactor(grid-mrl): Fix issues with righ and left nav * refactor(grid-mrl): Fix issues with right/left nav * chore(*): Moving mrl specific logic in its own service and setting navigation service runtime if column layouts are defined. * chore(grid-mrl): Add home and end navigation * test(grid-mrl): Add test for Home/End key #4384 * chore(grid-mrl): Disable movable columns when MRL is enabled * chore(grid-mrl): Add ctrl + home/end nav * feat(tab-nav-mrl): Tab/Shift+Tab navigation for mrl. * fix(*): Making sure that if there is col groups range selection marks all children as selected. * chore(*): Change column layout related checks to use columnLayout column property. * fix(mrl-nav): Move populateVisibleIndexes inside initColumns due to grid not being assigned earlier. * chore(grid-mrl): Set the visibleIndex through the template * fix(mrl-nav): Making sure correct chunk is scrolled in view when navigating via Tab/Shift+Tab in grid with horizontal virtualization. * chore(grid-mrl): Fix nav with pinning * test(mrl-tab-navigation): Adding basic tab/shift+tab navigation tests. * chore(grid-mrl): Fix one more scenario with pinning nav * chore(grid-mrl): Fix failing lint * tests(MRL-nav): Add keyboard navigation test for pinning and scenarios with bigger row/col spans. * test(mrl-nav): Adding test with horizontal virtualization and Tab nav. * chore(*): Removing fit. * fix(mrl-nav): In case next/prev focused cell inside layout is not visible or half visible scoll it in view. * chore(grid-mrl): Add Ctrl + Up/Down nav by using visibleColumnIndex * test(mrl-nav): Adding test for scrolling focused cell fully in view vertically. * chore(*): Fixing merge issue. * fix(mrl-nav): Fix and test for integration with runtime hiding of groups. * fix(mrl-nav): Focus only once. * fix(mrl-nav): Scroll next focused cell fully in view when navigating in grid with horizontal virtualization. * test(mrl-nav): Adding test for scrolling horizontally to partially visible cell in grid with horizontal virtualization. * fix(mrl-nav): When column is pinned runtime tab navigation does not follow correct tab sequence. * fix(mrl-nav): Making sure pin state is populated before visible indexes are calculated. * fix(mrl-nav) - When column is moved via API tab navigation does not follow correct tab sequence. * fix(mrl-nav): Fix navigation through group rows. * fix(mrl-nav): Ctrl+ArrowRight/ArrowLeft should work in grid with horizontal virtualization. * fix(mrl-pinning): Fix pinning width not being calculated correctly when there are multi row layouts. * chore(*): Fix failing test. * fix(mrl-nav): When unpinned area is scrolled to the right, going from pinned to unpinned area does not scroll the grid. * fix(mrl-nav): Fix Multi-Row Layout navigation up/down when pinned columns and unpinned are not in order. * fix(mrl-nav): When navigating in IE the focus flickers between cells when grid scrolls right. * fix(mrl-nav): When navigation with shift+tab and prev cell is not in horizontal virtual view, prev cell is not scrolled in view. * fix(mrl-nav): When navigating with Shift + Tab when in edit mode of 1st cell focus goes to previous row. * fix(mrl-nav) - Edit mode is exited when navigating trough a non editable cell. * fix(mrl-nav): When the last column layout is pinned and press Ctr+End from rowStart=2 in pinned group, error is returned. * chore(*): Extracting this.column.parent && this.column.parent.columnLayout check in a getter. * chore(*): Removing incorrect/unused imports. * chore(grid-mrl): Fix shift + tab and pinning * chore(grid-mrl): Apply the review notes * chore(grid-mrl): Remove unused function * chore(*): Initial base refactoring - making all navigation functions accept just two params - DOM element from which navigation started and selectedNode information. Adding all additional param info in the ISelectionNode interface. * chore(*): Updating navigation function calls to match new params. * chore(*): Fixing MRL nav issues after refactoring. * chore(*): Refactor improvement. * chore(*): Extracting common logic for tab/shift+tab navigation in separate function - _moveFocusToCell. * chore(*): Additional refactoring fixes for MRL nav + groupBy. * chore(*): Making sure correct cell is foucused with tab/shift+tab from group row. * chore(*): Fixing tests. * chore(*): Adding test for mrl nav + groupBy. * chore(*): Fixing merge issue. * chore(*): Adding one more mrl+grouping test. * chore(*): Fixing merge issue. * refactor(grid-mrl): Store starting selected cell and use it for keyboard nav * chore(grid-mrl): reset start navigation cell on TAB nav * chore(grid-mrl): Remove fdescribe * chore(*): Exposing common performVerticalScrollToCell/performHorizontalScrollToCell/shouldPerformVerticalScroll functions which can be used for navigateTo. Refactoring code in mrl service to use those common functions. Calculating cell offsets in pixels and using it when scrolling it in view(getVerticalScrollPositions/getChildColumnScrollPositions) as implemented by ddincheva. Additional refactoring to re-use duplicated code. Adding separate sample for custom mrl nav. * chore(grid-mrl): Fix errors thrown while running the tests * chore(*): Removing DOM dependency. Fixing column pinning issue. * chore(*): Fixing mrl nav tests. * tests(grid-mrl): Update tests regarding navigation and add a few more. Move some pinning tests into their describe. * chore(*): Fix lint error in spec file. * chore(*): Remove duplicate test. * chore(*): Adding test for navigateTo method. * chore(*):Caclulate left/right column offset based on the resolved child column sizes for the whole mrl block (not the user assigned width, which may be invalid). * chore(*): Fixing test expectation - cell right edge should be visible. * chore(*): Updating sample to show custom navigation up/down with Enter/Shift+Enter keys. * chore(grid-mrl): Store starting nav cell for home/end and ctrl nav * tests(mrl-nav): Update clickElement method to simulate more properly user click. Update MRL tests. * chore(grid-mrl): Fix tests to match the context persistence nav * chore(grid-mrl): Make startNavigationCell private * chore(grid-mrl): Fix lint errors * chore(*): Updating code and tests to account for the new border sizes, which cause the row to no longer be the same size as the defaultRowHeight ( + 1 px border is now applied). * chore(*): Bigger timeout for sporadic test. * chore(*): Account for new border size for default igxForItemSize passed to virtualization. * chore(grid-mrl): Apply types for setStartNavigationCell and applyNavigationCell * chore(*): Make sure navigation via shift/shift+tab in group row goes throught related functions performTab/performShiftTabKey. * chore(grid-mrl): Add types to function parameters * chore(*): Fix for scenarios where next target element is group records out of the current view port.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Multi-row layouts allow developers to create intricate cell arrangements within the same row by defining a template layout that is applied to header and body cells. This provides flexibility of the arrangement and makes it possible to create responsive web apps where grids would adapt and avoid horizontal scrolling when the available space becomes too narrow.
Additional context
Specification: https://github.com/IgniteUI/igniteui-angular/wiki/Multi-row-layouts
The text was updated successfully, but these errors were encountered: