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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  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

Similar Threads

  1. Replies: 4
    Last Post: May 13, 2016, 9:49 AM
  2. Replies: 8
    Last Post: Oct 12, 2015, 6:42 PM
  3. [CLOSED] Number field display DP
    By CanopiusApplications in forum 2.x 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