Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Multi-row layout - Pinning feature integration #4563

Merged
merged 78 commits into from
Apr 30, 2019
Merged

Multi-row layout - Pinning feature integration #4563

merged 78 commits into from
Apr 30, 2019

Conversation

MayaKirova
Copy link
Contributor

@MayaKirova MayaKirova commented Apr 16, 2019 •
edited by mpavlinov
Loading

Related #4384

Note: This should be reviewed and merged after the main MRL feature is merged to master:
#4486

Additional information (check all that apply):

  • Bug fix
  • New functionality
  • Documentation
  • Demos
  • CI/CD

Checklist:

  • All relevant tags have been applied to this PR
  • This PR includes unit tests covering all the new code
  • This PR includes API docs for newly added methods/properties
  • This PR includes feature/README.MD updates for the feature docs
  • This PR includes general feature table updates in the root README.MD
  • This PR includes CHANGELOG.MD updates for newly added functionality
  • This PR contains breaking changes
  • This PR includes ng update migrations for the breaking changes
  • This PR includes behavioral changes and the feature specification has been updated with them

dkamburov and others added 30 commits March 22, 2019 11:34
@dkamburov
feat(grid-mrl): Initial MRL POC #4384
4f1062a
@dkamburov
chore(grid-mrl): Fix failing build
2a3e119
@dkamburov
chore(gridMRL): Fix misalignment issue with headers #4384
585ab9d
@dkamburov
chore(gridMRL): fix failing tests for hieararchical grid
47f7633
@dkamburov
refactor(gridMRL): Change the way grid layout is applied
5449e4f
@dkamburov
chore(gridMRL): Fix failing build
1490d25
fix(mrl): Fixing virtualization calculations to use caclWidth for col…
fb67f21 
… groups. Fixing fractioins calcs. Fixing grid-template-columns binding.
Merge from origin
9e9d314
@dkamburov
test(gridMRL): Add initial test spec file for MRL #4384
109a79a
@dkamburov
Merge remote-tracking branch 'origin/master' into dkamburov/MRL
858da8b
chore(*): Adding basic support for with in % for MRL.
9ec4589
chore(*): Making test structure more generic. Setting up generic func…
48423e0 
…tions that check the rendered DOM reflects the col settings correctly.
@dkamburov
fix(gridMRL): Implement the widths and fill the gaps if any #4384
a72f2e3
@dkamburov
Merge branch 'dkamburov/MRL' of https://github.com/IgniteUI/igniteui-…
9cfd851 
…angular into dkamburov/MRL
@dkamburov
chore(gridMRL): Fix tslint error
e96fb33
@dkamburov
fix(gridMRL): Set the heights of MRL rows to fr instead of auto #4384
e3dbee1
@dkamburov
feat(gridMRL): Handle MRL cells when no widths are set #4384
6a7b292
chore(*): Adding a few tests.
422b98e
Merge branch 'dkamburov/MRL' of https://github.com/IgniteUI/igniteui-…
f234a0b 
…angular.git
@dkamburov
Merge remote-tracking branch 'origin/master' into dkamburov/MRL
db72051
@dkamburov
chore(gridMRL): Fix tslint in mrl tests
cc57c5f
@dkamburov
chore(gridMRL): Remove fit from mrl spec file
2d986fe
@dkamburov
chore(grid-mrl): Apply some of the review notes
f8efac8
chore(*): Adding more test scenarios with no width, width in px and i…
edb98ca 
…n %.
Merge branch 'dkamburov/MRL' of https://github.com/IgniteUI/igniteui-…
9278461 
…angular.git
chore(*): Adding some scenarios with invalid layouts.
0de4678
chore(*): Adding virtualization tests.
e4ccabb
chore(*): Adding vertical virtualization test for mrl.
600f116
chore(*): Removing enableMRL Input, adding a separate column-layout c…
8a800e4 
…omponent that extends the column-group component to be used for mrl config.
chore(*): Handling scenario where both column groups and layouts are …
69bb0e2 
…defined - in that case mch are disregarded. Adding test.
@dkamburov dkamburov added 🛠️ status: in-development Issues and PRs with active development on them and removed ❌ status: awaiting-test PRs awaiting manual verification labels Apr 23, 2019
@mpavlinov mpavlinov added ❌ status: awaiting-test PRs awaiting manual verification and removed 🛠️ status: in-development Issues and PRs with active development on them labels Apr 24, 2019
@PavlovVasil PavlovVasil added 💥 status: in-test PRs currently being tested and removed ❌ status: awaiting-test PRs awaiting manual verification labels Apr 24, 2019
@PavlovVasil
Copy link
Contributor

There are two issues I found while testing. Try this template for the grid-mrl.sample.html:

<section style="height: 600px" class="sample-content">
        <igx-grid 
        [rowSelectable]="false" 
        #grid
        [data]="data" 
        displayDensity="compact" 
        [width]="'1200px'" 
        [allowFiltering]="true" 
        [paging]='true'
        [filterMode]="'excelStyleFilter'">
            <igx-column-layout #block1>
                <igx-column [rowStart]="1" [colStart]="1" sortable="true" [colEnd]="5" field="ContactName" [width]="'200px'"></igx-column>
                <igx-column [rowStart]="1" [colStart]="5" sortable="true" field="ContactTitle" [width]="'200px'"></igx-column>
                <igx-column [rowStart]="1" [colStart]="6" sortable="true" field="Country"[width]="'200px'"></igx-column>
            </igx-column-layout>
            <igx-column-layout #block2>
                <igx-column [rowStart]="1" [colStart]="1" sortable="true" field="CompanyName"></igx-column>
                <igx-column [rowStart]="1" [colStart]="2" sortable="true" field="PostalCode"></igx-column>
                <igx-column [rowStart]="2" [colStart]="1" sortable="true" [colEnd]="3" field="Fax"></igx-column>
            </igx-column-layout>
            <igx-column-layout #block3 [pinned]="true">
                <igx-column [rowStart]="1" [colStart]="1" sortable="true" [colEnd]="3" field="Phone"[width]="'200px'" ></igx-column>
                <igx-column [rowStart]="1" [colStart]="3" sortable="true" [colEnd]="5" field="City" [width]="'200px'"></igx-column>
                <igx-column [rowStart]="1" [colStart]="5" sortable="true" [colEnd]="7" field="Address" [width]="'200px'"></igx-column>
            </igx-column-layout>
        </igx-grid>
    </section>
  1. When a column group gets pinned, the 2px right border is not applied to the headers, but only to the records. This displaces the unpinned headers by 2 px to the left:

Sketch

  1. In MS IE 11, when using the same template, the headers get displaced and not rendered correctly. It is even more visible if #block2 gets pinned as well:

Sketch2

Sketch3

@PavlovVasil PavlovVasil added 🛠️ status: in-development Issues and PRs with active development on them and removed 💥 status: in-test PRs currently being tested labels Apr 24, 2019
@dkamburov dkamburov added ❌ status: awaiting-test PRs awaiting manual verification and removed 🛠️ status: in-development Issues and PRs with active development on them labels Apr 25, 2019
@dkamburov
Copy link
Contributor

IE misalignments are not specific for the pinning only

@PavlovVasil
Copy link
Contributor

The IE misalignments and 2px border have been fixed, but IE still does not render the headers correctly - if one group has two rows and the others do not, they are displayed as a single row with a blank row below it.
Using the same template from my previous reply:

        <igx-grid 
        [rowSelectable]="false" 
        #grid
        [data]="data" 
        displayDensity="compact" 
        [width]="'1200px'" 
        [allowFiltering]="true" 
        [paging]='true'
        [filterMode]="'excelStyleFilter'">
            <igx-column-layout #block1>
                <igx-column [rowStart]="1" [colStart]="1" sortable="true" [colEnd]="5" field="ContactName" [width]="'200px'"></igx-column>
                <igx-column [rowStart]="1" [colStart]="5" sortable="true" field="ContactTitle" [width]="'200px'"></igx-column>
                <igx-column [rowStart]="1" [colStart]="6" sortable="true" field="Country"[width]="'200px'"></igx-column>
            </igx-column-layout>
            <igx-column-layout #block2>
                <igx-column [rowStart]="1" [colStart]="1" sortable="true" field="CompanyName"></igx-column>
                <igx-column [rowStart]="1" [colStart]="2" sortable="true" field="PostalCode"></igx-column>
                <igx-column [rowStart]="2" [colStart]="1" sortable="true" [colEnd]="3" field="Fax"></igx-column>
            </igx-column-layout>
            <igx-column-layout #block3 [pinned]="true">
                <igx-column [rowStart]="1" [colStart]="1" sortable="true" [colEnd]="3" field="Phone"[width]="'200px'" ></igx-column>
                <igx-column [rowStart]="1" [colStart]="3" sortable="true" [colEnd]="5" field="City" [width]="'200px'"></igx-column>
                <igx-column [rowStart]="1" [colStart]="5" sortable="true" [colEnd]="7" field="Address" [width]="'200px'"></igx-column>
            </igx-column-layout>
        </igx-grid>
    </section>

IE renders the column headers like this:

Sketch

@PavlovVasil PavlovVasil added 🛠️ status: in-development Issues and PRs with active development on them and removed ❌ status: awaiting-test PRs awaiting manual verification labels Apr 25, 2019
@dkamburov
Copy link
Contributor

This is not pinning specific, I logged a separate issue for it - #4669

@dkamburov dkamburov added ✅ status: verified Applies to PRs that have passed manual verification and removed 🛠️ status: in-development Issues and PRs with active development on them labels Apr 30, 2019
@mpavlinov mpavlinov merged commit 8d3b1db into master Apr 30, 2019
@mpavlinov mpavlinov deleted the mkirova/mrl-pinning branch April 30, 2019 18:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mpavlinov mpavlinov mpavlinov approved these changes

@dkamburov dkamburov dkamburov left review comments

@ChronosSF ChronosSF Awaiting requested review from ChronosSF

@skrustev skrustev Awaiting requested review from skrustev

Assignees

@mpavlinov mpavlinov

@PavlovVasil PavlovVasil

Labels
grid: column-pinning grid: multi-row-layout squash-merge Merge PR with "Squash and Merge" option ✅ status: verified Applies to PRs that have passed manual verification
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@MayaKirova @PavlovVasil @dkamburov @mpavlinov @skrustev @ChronosSF