[CLOSED] Grouping Header displayed wrong when lock enabled

  1. #1

    [CLOSED] Grouping Header displayed wrong when lock enabled

    Hi, I cut pasted your grid sample code to reproduce my issue: with company column locked, click to group by one of unlocked column, every thing look good, click to clear grouping then group again, the grouping header & locked column are messed up.

    I tried with 3.1 & 3.2 code, both have same issue.

    Thanks
    -szhang

    //_Layout.chtml
    @{
        Layout = null;
       // HttpContext.Current.Items["ext.net.mvc.example"] = true;
       
    }
    
    <!DOCTYPE html>
    @using Ext.Net;
    @using Ext.Net.MVC;
    
    @(Html.X().ResourceManager()
        .StartupMask ( new StartupMask() { Message = "Please wait for data Loading ....." })
    )
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width" />
            @Scripts.Render("~/bundles/CPM")
            @RenderSection("headtag", false)
        </head>
        <body>
             @RenderSection("scripts", required: false)  
             @RenderSection("Content", true)
     
        </body>
    </html>
    
    //GridWindow.cshtml
    
    @{
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    @using Ext.Net;
    @using Ext.Net.MVC;
    
    @section content
    {
     
    
      @using Ext.Net;
    @using Ext.Net.MVC;
    
    @section content
    {
    <h2>Grid</h2>
    
    @{
        var data = new object[]
        {
            new object[] { "3m Co", 71.72, 0.02, 0.03 },
            new object[] { "Alcoa Inc", 29.01, 0.42, 1.47 },
            new object[] { "Altria Group Inc", 83.81, 0.28, 0.34 },
            new object[] { "American Express Company", 52.55, 0.01, 0.02 },
            new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49 },
            new object[] { "AT&T Inc.", 31.61, -0.48, -1.54 },
            new object[] { "Boeing Co.", 75.43, 0.53, 0.71 },
            new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39 },
            new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04 },
            new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28 },
            new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64 },
            new object[] { "General Electric Company", 34.14, -0.08, -0.23 },
            new object[] { "General Motors Corporation", 30.27, 1.09, 3.74 },
            new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08 },
            new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13 },
            new object[] { "Intel Corporation", 19.88, 0.31, 1.58 },
            new object[] { "International Business Machines", 81.41, 0.44, 0.54 },
            new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09 },
            new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15 },
            new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40 },
            new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01 },
            new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54 },
            new object[] { "Pfizer Inc", 27.96, 0.4, 1.45 },
            new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58 },
            new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02 },
            new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02 },
            new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88 },
            new object[] { "Verizon Communications", 35.57, 0.39, 1.11 },
            new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63 }
        };    
    }
    
    @(
        Html.X().Window()
            .Icon(Icon.Table)
            .Width(740)
            .Height(480)
            .Layout(LayoutType.Fit)
            .Title("Grid Window")
            .TopBarItem(
                    Html.X().Button()
                        .Text("Clear Grouping")
                        .Icon(Icon.GroupDelete)
                        .Handler("#{Grouping1}.disable();"),
                Html.X().Button()
                    .Text("Add Something")
                    .Icon(Icon.Add)
                    .ToolTip("Add a new row")
                                    
            )
            .Items(
                                Html.X().GridPanel()
                                    .Border(false)
                                    .Store(
                                        Html.X().Store()
                                            .DataSource(data)
                                            .Model(
                                                Html.X().Model()
                                                    .Fields(
                                                        Html.X().ModelField().Name("Company"),
                                                        Html.X().ModelField().Name("Price").Type(ModelFieldType.Float),
                                                        Html.X().ModelField().Name("Change").Type(ModelFieldType.Float),
                                                        Html.X().ModelField().Name("PctChange").Type(ModelFieldType.Float)
                                                    )
                                            )
                                            .Reader(
                                                Html.X().ArrayReader()
                                            )
                                    )
                                    .ColumnModel(
                                        Html.X().RowNumbererColumn(),
                                        
                                        Html.X().Column()
                                            .Text("Company")
                                           // .Flex(1)
                                            .Locked(true)
                                            .DataIndex("Company"),
                                            
                                        Html.X().Column()
                                            .Text("Price")
                                            .Width(70)
                                            .DataIndex("Price"),
                                          //  .Renderer(RendererFormat.UsMoney),
                                            
                                        Html.X().Column()
                                            .Text("Change")
                                            .Width(70)
                                            .DataIndex("Change"),
                                            
                                        Html.X().Column()
                                            .Text("% Change")
                                            .Width(70)
                                            .DataIndex("PctChange")
                                    )
                                 .Features(
                                        Html.X().GroupingSummary()
                                            .ID("Grouping1")
                                            .GroupHeaderTplString("{columnName}: {name} ({[values.rows.length]} {[values.rows.length > 1 ? \"Items\" : \"Item\"]})")
                                            .HideGroupedHeader(true)
                                            .StartCollapsed(false)
                                            .ShowSummaryRow(true)
                                        ,
                                        Html.X().Summary()
                                            .ShowSummaryRow(true)
                                            .Dock(SummaryDock.Bottom)
                                    )
                                    
               )
       )
    }
    Last edited by Daniil; Oct 16, 2015 at 12:11 PM. Reason: [CLOSED]
  2. #2
    Hi @susanz,

    I think #{Grouping}.disable(); should not be used with a locking GridPanel. There are two GridPanel internally and two GroupingSummary features. Both should be disabled. A bit more details how to deal with a locking GridPanel in such cases are here:
    http://forums.ext.net/showthread.php...l=1#post275153
  3. #3
    Hi Daniil, I changed to disable both, but the issue still there.
    Thanks
    -szhang

    // Change handler:
    
     Html.X().Button()
                        .Text("Clear Grouping")
                        .Icon(Icon.GroupDelete)
                        .Handler("ClearGrouping(#{Grid1})"),
                       // .Handler("#{Grouping1}.disable();"),
    ..
    
    <script>
    
        var getSummaryFeature = function (grid) {
            var summaryFeature;
    
            Ext.Array.each(grid.features, function (feature) {
                if (feature.ftype === "groupingsummary") {
                    summaryFeature = feature;
                    return false; // Stops "each" iterating
                }
            });
    
            return summaryFeature;
        };
        var ClearGrouping = function (grid) {
            if (grid.lockedGrid) {
                // You are dealing with a locking grid    
                var lockedSummary = getSummaryFeature(grid.lockedGrid),
                    normalSummary = getSummaryFeature(grid.normalGrid);
                if (lockedSummary != null)
                    lockedSummary.disable();
                if (normalSummary != null)
                    normalSummary.disable();
            }
    
        }
  4. #4
    Personally, I would expect that "Group by this field" item becomes disabled on a groupingFeature.disable() call. For some reason, it doesn't happen. I am not sure it is by design or a defect.

    As far as I can understand your requirement you don't need to disable grouping, but just clear current grouping. Ideally, it would be nice to see a dedicated method in Grouping API, but there is not, as far as I can see.

    Yes, it looks like you've found a way to clear grouping by groupingFeature.disable() call, but it is rather a side effect. It is also turning off a feature itself. I have came up with the following approach:

    if (lockedSummary) {
        lockedSummary.disable(); // A side effect of that call is resetting applied grouping
        lockedSummary.enable(); // But it needs to enable a grouping feature itself back
    }
    
    // Same should be done with the normalSummary
  5. #5
    Thanks Daniil, Yes, it is true, my requirement is to be able to clear the grouping and regroup as needed. We are getting there. by adding summary.enabled(), regrouping works good. but "Clear Grouping" will not clear it any more, looks like it just puts the grouped
    column back, the grouping header still on display. Any way to fix this?

    Thanks
    -szhang

    By the way I found "clear grouping" example from your grouping demo site. :)
    It works fine without locked column.
  6. #6
    by adding summary.enabled(), regrouping works good. but "Clear Grouping" will not clear it any more, looks like it just puts the grouped
    column back, the grouping header still on display. Any way to fix this?
    It looks like I cannot it reproduce. Please post an updated test case and specify exact steps to reproduce. A screenshot might be also helpful.
    By the way I found "clear grouping" example from your grouping demo site. :)
    It works fine without locked column.
    Thank you for pointing that out. I've added an .enable() call with respective comments in all the examples (two) where I found this functionality.
    https://examples3.ext.net/#/Kitchen_...ped_GridPanel/
    https://examples3.ext.net/#/GridPane...neous/Grouping
  7. #7
    This Daiil, Thanks for looking into this. Here are the screenshots (grouping by price and clear group by price):

    Click image for larger version. 

Name:	grouping1.jpg 
Views:	24 
Size:	62.4 KB 
ID:	24269Click image for larger version. 

Name:	grouping2.jpg 
Views:	32 
Size:	78.4 KB 
ID:	24270


    Steps to reproduce:
    1, After Grid displayed, Click group by Price Column (or any other columns)
    The screenshot1 displayed -- grid grouped by price
    2, click "Clear Grouping" button
    The screenshot 2 displayed -- grid still grouped by price except the price column become visible in the grid.

    I upgrade Ext 3.1 to 3.2, with .net 4.5 and MVC 4.

    Please let me know if you need any thing else.
    Thanks for you helps!

    -szhang

    P.S I tired your updated example: https://examples3.ext.net/#/GridPane...neous/Grouping
    it does not clear group any more.
    This is the screenshot of the example after click on clear grouping (grouped by Common Name)
    Click image for larger version. 

Name:	grouping.png 
Views:	29 
Size:	61.2 KB 
ID:	24271


    
    @{
        ViewBag.Title = "GridNoDesktop";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    @using Ext.Net;
    @using Ext.Net.MVC;
    
    @section content
    {
    <h2>GridNoDesktop</h2>
    
    @{
        var data = new object[]
        {
            new object[] { "3m Co", 71.72, 0.02, 0.03 },
            new object[] { "Alcoa Inc", 29.01, 0.42, 1.47 },
            new object[] { "Altria Group Inc", 83.81, 0.28, 0.34 },
            new object[] { "American Express Company", 52.55, 0.01, 0.02 },
            new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49 },
            new object[] { "AT&T Inc.", 31.61, -0.48, -1.54 },
            new object[] { "Boeing Co.", 75.43, 0.53, 0.71 },
            new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39 },
            new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04 },
            new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28 },
            new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64 },
            new object[] { "General Electric Company", 34.14, -0.08, -0.23 },
            new object[] { "General Motors Corporation", 30.27, 1.09, 3.74 },
            new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08 },
            new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13 },
            new object[] { "Intel Corporation", 19.88, 0.31, 1.58 },
            new object[] { "International Business Machines", 81.41, 0.44, 0.54 },
            new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09 },
            new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15 },
            new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40 },
            new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01 },
            new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54 },
            new object[] { "Pfizer Inc", 27.96, 0.4, 1.45 },
            new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58 },
            new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02 },
            new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02 },
            new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88 },
            new object[] { "Verizon Communications", 35.57, 0.39, 1.11 },
            new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63 }
        };    
    }
    
    @(
        Html.X().Window()
            .Icon(Icon.Table)
            .Width(740)
            .Height(480)
            .Layout(LayoutType.Fit)
            .Title("Grid Window")
            .TopBarItem(
                    Html.X().Button()
                        .Text("Clear Grouping")
                        .Icon(Icon.GroupDelete)
                        .Handler("ClearGrouping(#{Grid1})"),
                       // .Handler("#{Grouping1}.disable();"),
                Html.X().Button()
                    .Text("Add Something")
                    .Icon(Icon.Add)
                    .ToolTip("Add a new row")
                                    
            )
            .Items(
                                Html.X().GridPanel()
                                    .ID("Grid1")
                                    .Border(false)
                                    .Store(
                                        Html.X().Store()
                                            .DataSource(data)
                                            .Model(
                                                Html.X().Model()
                                                    .Fields(
                                                        Html.X().ModelField().Name("Company"),
                                                        Html.X().ModelField().Name("Price").Type(ModelFieldType.Float),
                                                        Html.X().ModelField().Name("Change").Type(ModelFieldType.Float),
                                                        Html.X().ModelField().Name("PctChange").Type(ModelFieldType.Float)
                                                    )
                                            )
                                            .Reader(
                                                Html.X().ArrayReader()
                                            )
                                    )
                                    .ColumnModel(
                                        Html.X().RowNumbererColumn(),
                                        
                                        Html.X().Column()
                                            .Text("Company")
                                           // .Flex(1)
                                            .Locked(true)
                                            .DataIndex("Company"),
                                            
                                        Html.X().Column()
                                            .Text("Price")
                                            .Width(70)
                                            .DataIndex("Price"),
                                          //  .Renderer(RendererFormat.UsMoney),
                                            
                                        Html.X().Column()
                                            .Text("Change")
                                            .Width(70)
                                            .DataIndex("Change"),
                                            
                                        Html.X().Column()
                                            .Text("% Change")
                                            .Width(70)
                                            .DataIndex("PctChange")
                                    )
                                 .Features(
                                        Html.X().GroupingSummary()
                                            .ID("Grouping1")
                                            .GroupHeaderTplString("{columnName}: {name} ({[values.rows.length]} {[values.rows.length > 1 ? \"Items\" : \"Item\"]})")
                                            .HideGroupedHeader(true)
                                            .StartCollapsed(false)
                                            .ShowSummaryRow(true)
                                        ,
                                        Html.X().Summary()
                                            .ShowSummaryRow(true)
                                            .Dock(SummaryDock.Bottom)
                                    )
                                    
            )
    )
       
    
    <script>
    
        var getSummaryFeature = function (grid) {
            var summaryFeature;
    
            Ext.Array.each(grid.features, function (feature) {
                if (feature.ftype === "groupingsummary") {
                    summaryFeature = feature;
                    return false; // Stops "each" iterating
                }
            });
    
            return summaryFeature;
        };
        var ClearGrouping = function (grid) {
            if (grid.lockedGrid) {
                // You are dealing with a locking grid    
                var lockedSummary = getSummaryFeature(grid.lockedGrid),
                    normalSummary = getSummaryFeature(grid.normalGrid);
                if (lockedSummary != null) {
                    lockedSummary.disable();
                    lockedSummary.enable();
                }
                if (normalSummary != null) {
                    normalSummary.disable();
                    normalSummary.enable();
                }
            }
    
        }
    </script>
    
     }
    Last edited by susanz; Oct 09, 2015 at 4:32 PM. Reason: adding image
  8. #8
    Thank you. I've realized that calling a grouping feature's .disable() is not correct for clearing grouping.

    Please use this function.
    var ClearGrouping = function (grid) {
        if (grid.lockedGrid) {
            // You are dealing with a locking grid
            var lockedGrouping = grid.lockedGrid.groupingFeature,
                normalGrouping = grid.normalGrid.groupingFeature,
                currentGroupedHeader;
    
            if (lockedGrouping) {
                currentGroupedHeader = lockedGrouping.hideGroupedHeader && lockedGrouping.getGroupedHeader();
            }
    
            if (!currentGroupedHeader && normalGrouping) {
                currentGroupedHeader = normalGrouping.hideGroupedHeader && normalGrouping.getGroupedHeader();
            }
    
            grid.getStore().clearGrouping();
    
            if (currentGroupedHeader) {
                currentGroupedHeader.show();
            }
        }
    };
    I've updated the related examples accordingly. Here is an Issue:
    https://github.com/extnet/Ext.NET/issues/920
    Last edited by Daniil; Oct 14, 2015 at 12:41 PM.
  9. #9
    Thanks Daniil, it worked like a charm.
    -szhang

Similar Threads

  1. [CLOSED] renderer column index is wrong after column lock & unlock
    By susanz in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 16, 2015, 5:13 PM
  2. nl-NL date format displayed wrong
    By mturnhout in forum 2.x Help
    Replies: 9
    Last Post: Oct 24, 2014, 6:40 AM
  3. Replies: 1
    Last Post: Nov 23, 2013, 3:09 PM
  4. GridPanel lock Column and Header [0.8.2]
    By Born2Code in forum 1.x Help
    Replies: 0
    Last Post: May 19, 2010, 4:49 AM
  5. [CLOSED] GridView wrong number of records displayed
    By alexp in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 15, 2009, 11:03 AM

Posting Permissions