Results 1 to 4 of 4

Thread: [6.5.2Classic] Checkboxmodel css fails toggling when having nested grids in RowWidget

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium User vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Cluj, Romania
    Posts
    811

    Default [6.5.2Classic] Checkboxmodel css fails toggling when having nested grids in RowWidget

    Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2bu3

    Screen Shot 2018-01-15 at 3.19.45 PM.jpg

    Steps:

    1. Select a row in the parent grid by checking the checkbox. This will select/check all rows in the sub-grid, which is wrong.
    2. Now, try to uncheck a row in the sub-grid - it won't work.

    This is due to the nesting situation and because of the checkboxmodel css selectors which is too generic, it should be more specific so when nesting grids, the parent grid doesn't affect the child sub-grid.

    Override fix which makes the selectors more specific to avoid nesting issue. Place it in your local theme package.

    Code:
    // OVERRIDE the ext/classic/theme-neutral/sass/src/grid/column/Check.scss to fix the nesting check issue when grid in grid
    .#{$prefix}grid-item > tbody > tr > .#{$prefix}selmodel-checkbox .#{$prefix}grid-checkcolumn {
        @if $enable-font-icons and ($grid-checkcolumn-glyph != null) {
            @include font-icon($grid-checkcolumn-glyph, "after", $color: $grid-checkcolumn-glyph-color, $style-pseudo: true);
        } @else {
            &:after {
                content: " ";
                height: $form-checkbox-size;
                width: $form-checkbox-size;
                background-image: theme-background-image($form-checkbox-background-image);
                display: inline-block;
            }
        }
        .#{$prefix}item-disabled & {
            @include opacity($grid-checkcolumn-disabled-opacity);
        }
    }
    
    
    // Checked checkbox image for data cell when it's a selection model column
    .#{$prefix}grid-item-selected > tbody > tr > .#{$prefix}selmodel-column .#{$prefix}grid-checkcolumn {
        @if $enable-font-icons and ($checkbox-selection-model-checked-glyph != null) {
            @include font-icon($checkbox-selection-model-checked-glyph, "after", $color: $checkbox-selection-model-glyph-color, $style-pseudo: true);
        } @else {
            &:after {
                background-position: 0 (-$form-checkbox-size);
            }
        }
    }
    // END OVERRIDE
    Github https://github.com/vadimpopa
    Blogging @ : http://vadimpopa.com
    Twitter: @vadimvpopa

  2. #2
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    372

    Default

    Quote Originally Posted by vadimv View Post
    Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2bu3

    Screen Shot 2018-01-15 at 3.19.45 PM.jpg

    Steps:

    1. Select a row in the parent grid by checking the checkbox. This will select/check all rows in the sub-grid, which is wrong.
    2. Now, try to uncheck a row in the sub-grid - it won't work.

    This is due to the nesting situation and because of the checkboxmodel css selectors which is too generic, it should be more specific so when nesting grids, the parent grid doesn't affect the child sub-grid.

    Override fix which makes the selectors more specific to avoid nesting issue. Place it in your local theme package.

    Code:
    // OVERRIDE the ext/classic/theme-neutral/sass/src/grid/column/Check.scss to fix the nesting check issue when grid in grid
    .#{$prefix}grid-item > tbody > tr > .#{$prefix}selmodel-checkbox .#{$prefix}grid-checkcolumn {
        @if $enable-font-icons and ($grid-checkcolumn-glyph != null) {
            @include font-icon($grid-checkcolumn-glyph, "after", $color: $grid-checkcolumn-glyph-color, $style-pseudo: true);
        } @else {
            &:after {
                content: " ";
                height: $form-checkbox-size;
                width: $form-checkbox-size;
                background-image: theme-background-image($form-checkbox-background-image);
                display: inline-block;
            }
        }
        .#{$prefix}item-disabled & {
            @include opacity($grid-checkcolumn-disabled-opacity);
        }
    }
    
    
    // Checked checkbox image for data cell when it's a selection model column
    .#{$prefix}grid-item-selected > tbody > tr > .#{$prefix}selmodel-column .#{$prefix}grid-checkcolumn {
        @if $enable-font-icons and ($checkbox-selection-model-checked-glyph != null) {
            @include font-icon($checkbox-selection-model-checked-glyph, "after", $color: $checkbox-selection-model-glyph-color, $style-pseudo: true);
        } @else {
            &:after {
                background-position: 0 (-$form-checkbox-size);
            }
        }
    }
    // END OVERRIDE


    I just hope that these reports are taken into consideration by the new development team.
    Thank you.
    Another year like this and this forum can be quietly closed.

  3. #3
    Ext Support Team
    Join Date
    Nov 2017
    Posts
    46

    Default

    Thanks for reporting this. I am adding this into our tracker to get this resolved.

    Regards,
    Aravind

  4. #4
    Sencha Premium User vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Cluj, Romania
    Posts
    811

    Default

    You haven't marked the ticket as opened. What's the ticket number ?
    Github https://github.com/vadimpopa
    Blogging @ : http://vadimpopa.com
    Twitter: @vadimvpopa

Similar Threads

  1. Replies: 4
    Last Post: 18 Dec 2014, 1:28 AM
  2. Replies: 1
    Last Post: 27 Jun 2014, 5:07 PM
  3. Grids fails to layout in hbox/vbox layouts
    By tkolo in forum Ext:Bugs
    Replies: 4
    Last Post: 6 Feb 2014, 8:10 AM
  4. Problem with multiple grids with CheckboxModel usage
    By ralfius in forum Ext: Discussion
    Replies: 2
    Last Post: 2 Aug 2012, 1:04 AM
  5. Replies: 0
    Last Post: 29 Jun 2011, 11:12 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •