[CLOSED] Spreadsheet with row number enabled -- grouping header display issue

Page 2 of 2 FirstFirst 12
  1. #11
    Hi Fabricio, Great! Thank you. I am looking forward to hear from you.
    Thanks
    -susan zhang
  2. #12
    Hello, sorry for the delay, we're still looking after your issue! Can't assure you we're going to return with an effective solution, or just open a feature request, but we're going to provide you a better feedback soon!
    Fabrício Murta
    Developer & Support Expert
  3. #13
    Hello @susanz,

    Please give this sample a try. Does that behave as you need?

    I have simplified the initial sample and made it standalone to be able to focus on the key things.

    The solutions is:
    1. Ext.grid.feature.Grouping.override({ ... });
    2. events.GroupChange.Handler = ...

    It is a hack, but appears to be working as you need.

    Example
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Ext.NET 4 MVC Sample</title>
    
        <script>
            Ext.grid.feature.Grouping.override({
                onGroupMenuItemClick: function (menuItem, e) {
                    var me = this,
                        menu = menuItem.parentMenu,
                        hdr = menu.activeHeader,
                        grid = this.grid.ownerGrid;
    
                    // If there are only two columns - a row select one and a data one
                    if (grid.lockedGrid.columnManager.getColumns().length === 2) {
                        grid.unlock(grid.lockedGrid.columnManager.getColumns()[1]);
                        grid.normalGrid.groupingFeature.onGroupMenuItemClick(menuItem, e);
    
                        return false;
                    }
    
                    me.callParent(arguments);
                }
            });
        </script>
    </head>
    <body>
        @Html.X().ResourceManager()
    
        @(Html.X().GridPanel()
            .ID("GridPanel1")
            .Height(400)
            .Frame(true)
            .Store(
                Html.X().Store()
                    .Data(new List<object>
                    {
                       new { company = "3m Co", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = "9/1 12:00am" },
                       new { company = "Alcoa Inc", price = 29.01, change = 0.42, pctChange = 1.47, lastChange = "9/1 12:00am" },
                       new { company = "Altria Group Inc", price = 83.81, change = 0.28, pctChange = 0.34, lastChange = "9/1 12:00am" },
                       new { company = "American Express Company", price = 52.55, change = 0.01, pctChange = 0.02, lastChange = "9/1 12:00am" },
                       new { company = "American International Group, Inc.", price = 64.13, change = 0.31, pctChange = 0.49, lastChange = "9/1 12:00am" },
                       new { company = "AT&T Inc.", price = 31.61, change = -0.48, pctChange = -1.54, lastChange = "9/1 12:00am" }
                    })
                    .Model(Html.X().Model()
                        .Fields(
                            new ModelField("company"),
                            new ModelField("price", ModelFieldType.Float),
                            new ModelField("change", ModelFieldType.Float),
                            new ModelField("pctChange", ModelFieldType.Float),
                            new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt")
                        )
                    )
                )
            .ColumnModel(
                Html.X().Column().Text("Company").DataIndex("company").Locked(true),
                Html.X().Column().Text("Price").DataIndex("price"),
                Html.X().Column().Text("Change").DataIndex("change"),
                Html.X().Column().Text("pctChange").DataIndex("pctChange"),
                Html.X().Column().Text("lastChange").DataIndex("lastchange")
            )
            .SelectionModel(Html.X().SpreadsheetSelectionModel().RowSelect(true))
            .Features(
                Html.X().GroupingSummary()
                    .GroupHeaderTplString("{columnName}: {name} ({[values.rows.length]} {[values.rows.length > 1 ? \"Items\" : \"Item\"]})")
                    .HideGroupedHeader(true)
                    .ShowSummaryRow(true)
            )
            .Listeners(events =>
            {
                events.GroupChange.Handler = @"if (grouper) {
                                                 this.getSelectionModel().setRowSelect(false);
                                             } else {
                                                 this.getSelectionModel().setRowSelect(true);
                                             }";
            })
        )
    </body>
    </html>
  4. #14
    Hi Daniil, Thank you so much. It works great for me. One thing I noticed is that the column lock status was lost after group & clear group on the column. Other locked columns still remain locked. Is there a way we can keep the subject lock status after group/clear group on it?

    Overall, it does fix the header display issue. We appriciate all your helps!
    Thanks
    -susan zhang
  5. #15
    Please give this a try. That is the same sample, just with small adjustments within Ext.grid.feature.Grouping.override({ ... }) and events.GroupChange.Handler = ...;

    I didn't comprehensively test, but it appears to be working as you need.

    Example
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Ext.NET 4 MVC Sample</title>
    
        <script>
            Ext.grid.feature.Grouping.override({
                onGroupMenuItemClick: function (menuItem, e) {
                    var me = this,
                        menu = menuItem.parentMenu,
                        hdr = menu.activeHeader,
                        grid = this.grid.ownerGrid,
                        columns = grid.lockedGrid.columnManager.getColumns(),
                        column;
    
                    // If there are only two columns - a row select one and a data one
                    if (columns.length === 2) {
                        column = columns[1];
                        grid.unlock(column);
                        grid.lockOnGroupChange = column;
                        grid.normalGrid.groupingFeature.onGroupMenuItemClick(menuItem, e);
    
                        return false;
                    }
    
                    me.callParent(arguments);
                }
            });
        </script>
    </head>
    <body>
        @Html.X().ResourceManager()
    
        @(Html.X().GridPanel()
            .ID("GridPanel1")
            .Height(400)
            .Frame(true)
            .Store(
                Html.X().Store()
                    .Data(new List<object>
                    {
                       new { company = "3m Co", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = "9/1 12:00am" },
                       new { company = "Alcoa Inc", price = 29.01, change = 0.42, pctChange = 1.47, lastChange = "9/1 12:00am" },
                       new { company = "Altria Group Inc", price = 83.81, change = 0.28, pctChange = 0.34, lastChange = "9/1 12:00am" },
                       new { company = "American Express Company", price = 52.55, change = 0.01, pctChange = 0.02, lastChange = "9/1 12:00am" },
                       new { company = "American International Group, Inc.", price = 64.13, change = 0.31, pctChange = 0.49, lastChange = "9/1 12:00am" },
                       new { company = "AT&T Inc.", price = 31.61, change = -0.48, pctChange = -1.54, lastChange = "9/1 12:00am" }
                    })
                    .Model(Html.X().Model()
                        .Fields(
                            new ModelField("company"),
                            new ModelField("price", ModelFieldType.Float),
                            new ModelField("change", ModelFieldType.Float),
                            new ModelField("pctChange", ModelFieldType.Float),
                            new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt")
                        )
                    )
                )
            .ColumnModel(
                Html.X().Column().Text("Company").DataIndex("company").Locked(true),
                Html.X().Column().Text("Price").DataIndex("price"),
                Html.X().Column().Text("Change").DataIndex("change"),
                Html.X().Column().Text("pctChange").DataIndex("pctChange"),
                Html.X().Column().Text("lastChange").DataIndex("lastChange")
            )
            .SelectionModel(Html.X().SpreadsheetSelectionModel().RowSelect(true))
            .Features(
                Html.X().GroupingSummary()
                    .GroupHeaderTplString("{columnName}: {name} ({[values.rows.length]} {[values.rows.length > 1 ? \"Items\" : \"Item\"]})")
                    .HideGroupedHeader(true)
                    .ShowSummaryRow(true)
            )
            .Listeners(events =>
            {
                events.GroupChange.Handler = @"if (grouper) {
                                                 this.getSelectionModel().setRowSelect(false);
                                             } else {
                                                 this.getSelectionModel().setRowSelect(true);
    
                                                 if (this.lockOnGroupChange) {
                                                     this.lock(this.lockOnGroupChange);
                                                     delete this.lockOnGroupChange;
                                                 }
                                             }";
            })
        )
    </body>
    </html>
  6. #16
    Awesome! That is exactly what I need. Than you so much!
    -susan zhang
Page 2 of 2 FirstFirst 12

Similar Threads

  1. Replies: 4
    Last Post: May 13, 2016, 9:49 AM
  2. [CLOSED] Grouping Header displayed wrong when lock enabled
    By susanz in forum 3.x Legacy Premium Help
    Replies: 8
    Last Post: Oct 12, 2015, 6:42 PM
  3. [CLOSED] Number field display DP
    By CanopiusApplications in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Oct 17, 2014, 7:43 AM
  4. Replies: 2
    Last Post: Aug 28, 2012, 10:26 AM
  5. Replies: 3
    Last Post: Jul 04, 2011, 3:57 AM

Posting Permissions