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

Page 1 of 2 12 LastLast
  1. #1

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

    Hi, I am using spreadsheet with row number enabled. When grouped by lock column, the grouping header is displayed in row number column. Since the number column so narrow, basically user cannot see the grouping header. I think you can easily reproduce it
    with your sample code. Let me know if you need me copy my code.
    Thanks
    -szhang
    Last edited by Daniil; Sep 08, 2016 at 8:37 AM. Reason: [CLOSED]
  2. #2
    Hello Susan Zhang!

    We can, in many situations, easily reproduce issues described. But by only following the description, chances are we are going to write it a different way than you did to reproduce the issue, and that's why we prefer to see exactly how you achieved the issue you are reporting, as this allows us an extra level of certainty in the responses we provide.

    In most situations there are more than one way to achieve a given described scenario, and reducing the mismatch chance only brings better understanding and clarity to the replies.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    No problem, Please find attached code for the issue.
    Thanks
    szhang

    //index.cshtml
    @using Ext.Net;
    @using Ext.Net.MVC;
    
    
    
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Ext.NET MVC Sample</title>    
    
        <link type="text/css" rel="stylesheet" href="http://speed.ext.net/www/intro/css/main.css" />
    </head>
    <body>
        @(Html.X().ResourceManager())
    
        <header>
            <a href="http://ext.net/"><img src="http://speed.ext.net/identity/extnet-logo-large.png" class="logo"/></a>
        </header>
        
    
        @(
         Html.X().Window()
            .Icon(Icon.Table)
            .Width(740)
            .Height(600)
            .Layout(LayoutType.Fit)
            .Title("Grid Window")
            .TopBarItem(
                Html.X().Button()
                    .Text("reconfig")
                    .Icon(Icon.Add)
                    .Handler ("RefreshColumns()")
                                    
            )
            .Items(
                Html.X().GridPanel().ID("Grid1")
                        .Frame(true)
                        .Store(
                            Html.X().Store()
                                    .RemotePaging(false)
                                    .AutoLoad(true)
                                    .Proxy(
                                        Html.X().AjaxProxy()
                                            .Url(Url.Action("LoadDynamicGridData", "ExtNet"))
                                            .Reader(Html.X().JsonReader().RootProperty("data").MessageProperty("message"))
                                    )
                                    .PageSize(10)
                                    .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").Renderer(RendererFormat.UsMoney),
                            Html.X().Column().Text("Change").DataIndex("change").Renderer("change"),
                            Html.X().Column().Text("pctChange").DataIndex("pctChange"),
                            Html.X().Column().Text("lastChange").DataIndex("lastchange")
                        )
                        .SelectionModel( Html.X().SpreadsheetSelectionModel().ID("selModel1").RowSelect(true))
                        .View( Html.X().GridView().StripeRows(true)    )
                        .Features (
                                Html.X().GroupingSummary()
                                .GroupHeaderTplString("{columnName}: {name} ({[values.rows.length]} {[values.rows.length > 1 ? \"Items\" : \"Item\"]})")
                                .HideGroupedHeader(true)
                                .ShowSummaryRow(true)
                                .StartCollapsed(true)
                                )
                        .Plugins(Html.X().CellEditing())
                        .BottomBar( Html.X().PagingToolbar())
                  )     
               )
        
     <script>
         var template = '<span style="color:{0};">{1}</span>';
    
         var change = function (value) {
             return Ext.String.format(template, (value > 0) ? "green" : "red", value);
         };
    
         var pctChange = function (value) {
             return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
         };
    
         var RefreshColumns = function () {
             Ext.net.DirectMethod.request({
                 url: '/ExtNet/RefreshColumns',
                 success: function (result) {
                     Ext.Msg.alert("Msg", "columns refreshed");
                 },
                 failure: function (result) {
                     Ext.Msg.alert("Error", result);
                 }
             });
    
    
         };
       
    </script>
       
    </body>
    </html>
    
    
    //ExtNetController.cs
    
    using System.Web.Mvc;
    using System.Collections.Generic;
    using Ext.Net;
    using Ext.Net.MVC;
    using ExtMVC4._1.Models;
    
    namespace ExtMVC4._1.Controllers
    {
        public class ExtNetController : Controller
        {
            public ActionResult Index()
            {
                ExtNetModel model = new ExtNetModel()
                {
                    Title = "Welcome to Ext.NET",
                    TextAreaEmptyText = ">> Enter a Message Here <<"
                };
    
                return this.View(model);
            }
    
            public ActionResult LoadDynamicGridData(string action, Dictionary<string, object> extraParams)
            {
               
                var 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" },
                   new { company = "3m Co 1", price = 71.72, change = 0.02, pctChange = 0.03, lastChange = "9/1 12:00am" },
                   new { company = "Alcoa Inc 1", price = 29.01, change = 0.42, pctChange = 1.47, lastChange = "9/1 12:00am" },
                   new { company = "Altria Group Inc 1", price = 83.81, change = 0.28, pctChange = 0.34, lastChange = "9/1 12:00am" },
                   new { company = "American Express Company 1", price = 52.55, change = 0.01, pctChange = 0.02, lastChange = "9/1 12:00am" },
                   new { company = "American International Group, Inc. 1", price = 64.13, change = 0.31, pctChange = 0.49, lastChange = "9/1 12:00am" },
                   new { company = "AT&T Inc. 1", price = 31.61, change = -0.48, pctChange = -1.54, lastChange = "9/1 12:00am" },
                   new { company = "Wal-Mart Stores, Inc.",  price = 45.45, change = 0.73, pctChange = 1.63, lastChange = "9/1 12:00am" }
                };
    
                return this.Store(data);
            }
    
        }
    }
  4. #4
    Hello!

    I think I get your issue here, thanks for the example. And I'm afraid this is still an unsupported feature although noted since at least this thread: Locking Multi Grouping Grid View.

    In fact, there's a design challenge when you enable locking grid -and- the grouping rows. Internally they are two different views: one locked and other non-locked, with their own scroller, container and all. Selectively overflowing the group lines is a feature still not implemented due to the design limitation principle of the locking grid.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi Fabricio, Thanks for your info. I think we are OK to not group locked column then. Is there a way to toggle the grouping ("Group by this column" item on column menu) when column lock status changed ?
    Thanks
    -szhang
  6. #6
    Hello Susan Zhang!

    This seems to be enough. Add this listener for every column definition in your column model:

    .Listeners(l => l.Move.Handler = "item.groupable=!item.locked;"),
    Then any column showing in the locked side of the view will no longer be groupable. Although.. maybe what you want is "if at least one column is locked, then disable grouping for all columns"? This will probably be harder to achieve. Well, if so, maybe disabling the grouping plugin completely should be the way to go. But I'm not sure this is what you need in your grid.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Great! That is exactly what I want. But I then noticed, after unlock columns, grouping on 1st column still have same issue event there no column locked.(group header is displayed on Num column) Any idea ? This only happend when grouping on the first column.
    Thanks
    -susan zhang
  8. #8
    Hello Susan Zhang!

    That's just because the first column (numberer) is still locked, and it is used as base for the grouping, then the group header cells are kept behind, inside the locked view.

    I am afraid you would need to turn off locking completely in order for grouping to work. Here's one of the few discussions about it: Groupingview with locked columns almost working.

    I have even tried playing with the CSS to see whether I could place the grouping header row above everything with no luck.
    Fabrício Murta
    Developer & Support Expert
  9. #9
    en...
    What is your advice at this point? These are our requirements: Be able to lock any column, be able to group by any column (require user to unlock the col before grouping is fine). Need row number when there is no grouping.
    How can I make user not seeing this display issue. Is there way to remove the row number on grouping and toggle row num back when grouping is cleared? I am not sure if this can solve the issue. Thanks for all your helps!
    -szhang
  10. #10
    I'll bring this matter to the attention of the other Ext.NET team members, let's see if we can come up with something feasible for you!
    Fabrício Murta
    Developer & Support Expert
Page 1 of 2 12 LastLast

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