[CLOSED] Grouping in property grid

Page 1 of 3 123 LastLast
  1. #1

    [CLOSED] Grouping in property grid

    I need a feature of categorizing (grouping, see the picture) properties in property grid. I saw possibility which was suggested in this thread, but it doesn't seem to work. I guess it is because it was a sample for Ext.NET 1.x. Maybe in 2.5.x there is some other way?

    Click image for larger version. 

Name:	propertygrid.png 
Views:	154 
Size:	15.3 KB 
ID:	24278
    Last edited by Daniil; Nov 10, 2015 at 11:59 AM. Reason: [CLOSED]
  2. #2
    Hi @ingbabic,

    Maybe in 2.5.x there is some other way?
    Maybe, there is an other way, but I doubt it would be a better way.

    I tend to think a GetRowClass approach is going to work for v2 as well, but CSS probably needs adjusting.
  3. #3
    ...but CSS probably needs adjusting
    Could you please help me in that?
  4. #4
    Yes. I would recommend to start inspecting HTML elements (group rows) and looking for the "my-class" CSS class.

    Pretty much the same process as demonstrated in this video:
    CSS Change TabPanel Header Color - Ext.NET on Vimeo
  5. #5
    I'm not sure if I did it right but class for separator row is: x-grid-row my-class x-grid-data-row,

    while for other "normal rows" class is x-grid-row x-grid-data-row and x-grid-row x-grid-row-alt x-grid-data-row alternatively.

    Separator row looks like other rows however (even the class is not the same as for other rows)
  6. #6
    Please provide a full test case with your adjustments of CSS rules. Meanwhile, while expecting HTML elements, do you see those rules are being applied?
    Last edited by Daniil; Oct 19, 2015 at 4:58 PM.
  7. #7
    No, rules are not applied. Here is complete sample. There you will see three problems. Before select change occurs separator isn't painted well. After select change next problem is (unwanted) appearance of id in property grid and (unwanted) disappearing of separator. For this second problem I thought that solution might be not to just simply setSource with selected.data[0], but to recreate it.

        <style>
             .x-props-grid .x-grid3-body .x-grid3-row.my-class td {
                background-color: Red !important;
                border-right-color: Red;
            }               
            
            .x-props-grid .x-grid3-row.my-class .x-grid3-td-name .x-grid3-cell-inner {
                background-image: none !important;
            }
    
        </style>
    
        @Html.X().ResourceManager()
    
        @(
            Html.X().Panel().Layout(LayoutType.HBox).LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
            .Items
            (
                Html.X().GridPanel().Title("GridPanel with PropertyGrid").Flex(8)
                .Store
                (
                    Html.X().Store().AutoLoad(true).Proxy(Html.X().AjaxProxy().Url(Url.Action("GetObjects")).Reader(Html.X().ArrayReader().Root("data")))
                    .Model
                    (
                        Html.X().Model()
                        .Fields
                        (
                            new ModelField("id", ModelFieldType.Int),
                            new ModelField("company"),
                            new ModelField("price", ModelFieldType.Float),
                            new ModelField("change", ModelFieldType.Float),
                            new ModelField("pctChange", ModelFieldType.Float),
                            new ModelField("lastChange", ModelFieldType.Date)
                        )
                    )
                )
                .ColumnModel
                (
                    Html.X().Column().Text("Company").DataIndex("company").Flex(1),
                    Html.X().Column().Text("Price").DataIndex("price").Width(75).Renderer(RendererFormat.UsMoney),
                    Html.X().Column().Text("Change").DataIndex("change").Width(75),
                    Html.X().Column().Text("Change").DataIndex("pctChange").Width(75),
                    Html.X().DateColumn().Text("Last Updated").DataIndex("lastChange").Width(85).Format("H:mm:ss")
                )
                .Listeners(l =>
                {
                    l.SelectionChange.Handler = "if (selected[0]) { this.next('propertygrid').setSource(selected[0].data); }";
                })
    
                ,
                Html.X().PropertyGrid().Editable(false).SortableColumns(false).Flex(2).Title("Properties")
                .Source(s =>
                {
                    PropertyGridParameter pgpString = new PropertyGridParameter(new PropertyGridParameter.Config() { DisplayName = "Company", Name = "company" });
                    PropertyGridParameter pgpBoolean = new PropertyGridParameter(new PropertyGridParameter.Config() { DisplayName = "Price", Name = "price" });
                    PropertyGridParameter pgpSep = new PropertyGridParameter("separator", "");
                    PropertyGridParameter pgpDate = new PropertyGridParameter(new PropertyGridParameter.Config() { DisplayName = "Change", Name = "change" });
                    PropertyGridParameter pgpInt = new PropertyGridParameter(new PropertyGridParameter.Config() { DisplayName = "Percent Change", Name = "pctChange" });
                    PropertyGridParameter pgpFloat = new PropertyGridParameter(new PropertyGridParameter.Config() { DisplayName = "Last Change", Name = "lastChange" });
    
                    s.AddRange(new PropertyGridParameter[] { pgpString, pgpBoolean, pgpSep, pgpDate, pgpInt, pgpFloat });
                })
                .View
                (
                    Html.X().GridView().GetRowClass(grc => grc.Handler = "return record.data.name == 'separator' ? 'my-class' : '';"))
                )
            )
        )
    An GetObjects is
    public ActionResult GetObjects()
            {
                DateTime now = DateTime.Now;
    
                var myObjects = new object[]
                {
                    new object[] { 1, "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { 2, "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { 3, "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { 4, "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { 5, "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { 6, "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { 7, "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { 8, "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { 9, "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { 10, "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { 11, "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { 12, "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { 13, "General Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { 14, "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { 15, "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { 16, "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { 17, "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { 18, "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { 19, "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { 20, "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { 21, "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { 22, "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { 23, "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { 24, "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { 25, "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { 26, "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { 27, "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { 28, "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { 29, "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
                return this.Store(myObjects);
            }
  8. #8
    Before select change occurs separator isn't painted well.
    Before you've found out that there is x-grid-row, but not x-grid3-row. I don't see you've applied this change for CSS rules.

    Also were you able to find x-props-grid while inspecting HTML elements? As far as I can see it has been renamed to x-property-grid since v1. Just to clarify - I didn't know that, but found out it by inspecting HTML elements.

    So, with the changes I mentioned above, the resulting CSS rules are:
    .x-property-grid .x-grid-body .x-grid-row.my-class td {
        background-color: Red !important;
        border-right-color: Red;
    }
    
    .x-property-grid .x-grid-row.my-class .x-grid-td-name .x-grid-cell-inner {
        background-image: none !important;
    }
    They appear to be working.

    After select change next problem is (unwanted) appearance of id
    Okay, from this post in another thread I remember that removing the id property from selected[0].data is not appropriate for your scenario, because you need the id later dealing with the PropertyGrid.

    I have an idea on a possible solution. Please give it a try.
    Html.X().GridView().GetRowClass(grc => grc.Fn = "getRowClass"))
    var getRowClass = function (record, rowIndex, rowParams, store) {
        var cls = "";
    
        if (record.data.name === "separator") {
            cls = "my-class";
        } else if (record.data.name === "id") {
            cls = "x-hidden";
        }
    
        return cls;
    };
    By the way, do you really need a presence of id in the PropertyGrid (not visually, but in the source)? Please clarify how did you remove an id from selected[0].data? I think the data should be cloned first.
    var data = Ext.clone(selected[0].data);
    delete data.id;
    In this was the id will stay in a GridPanel's record.

    (unwanted) disappearing of separator
    I think a separator is going to be be injected manually. But... there is actually no guarantee in the properties order. So, there is a possibility the approach fails. Still you can try to inject a separator property manually.

    There is also an alternative approach - adding a wider bottom border for the Price property. But with this approach I don't see a way to add a text label for such a separator.

    Example
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ext.Net.MVC v2 Example</title>
    
        <style>
            .x-property-grid .x-grid-body .x-grid-row.my-separator td {
                border-bottom-color: red;
                border-bottom-width: 10px;
            }
        </style>
    
        <script>
            var getRowClass = function (record, rowIndex, rowParams, store) {
                var cls = "";
    
                if (record.data.name === "price") {
                    cls = "my-separator";
                }
    
                return cls;
            };
    
            var onSelectionChange = function (selModel, selected) {
                var data;
    
                if (selected[0]) {
                    data = Ext.clone(selected[0].data);
                    delete data.id;
                    this.next('propertygrid').setSource(data);
                }
            };
        </script>
    
    </head>
    <body>
        @Html.X().ResourceManager()
    
        @(Html.X().Panel()
            .LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
            .Items
            (
                Html.X().GridPanel()
                .Title("GridPanel with PropertyGrid")
                .Flex(4)
                    .Store
                    (
                        Html.X().Store()
                            .AutoLoad(true)
                            .Proxy(Html.X().AjaxProxy()
                                .Url(Url.Action("GetObjects"))
                                .Reader(Html.X().ArrayReader()
                                .Root("data"))
                            )
                            .Model
                            (
                                Html.X().Model()
                                .Fields
                                (
                                    new ModelField("id", ModelFieldType.Int),
                                    new ModelField("company"),
                                    new ModelField("price", ModelFieldType.Float),
                                    new ModelField("change", ModelFieldType.Float),
                                    new ModelField("pctChange", ModelFieldType.Float),
                                    new ModelField("lastChange", ModelFieldType.Date)
                                )
                            )
                    )
                    .ColumnModel
                    (
                        Html.X().Column().Text("Company").DataIndex("company").Flex(1),
                        Html.X().Column().Text("Price").DataIndex("price").Width(75).Renderer(RendererFormat.UsMoney),
                        Html.X().Column().Text("Change").DataIndex("change").Width(75),
                        Html.X().Column().Text("Change").DataIndex("pctChange").Width(75),
                        Html.X().DateColumn().Text("Last Updated").DataIndex("lastChange").Width(85).Format("H:mm:ss")
                    )
                    .Listeners(l =>
                    {
                        l.SelectionChange.Fn = "onSelectionChange";
                    }),
                
                Html.X().PropertyGrid()
                    .Editable(false)
                    .SortableColumns(false)
                    .Flex(1)
                    .Title("Properties")
                    .Source(s =>
                    {
                        PropertyGridParameter pgpString = new PropertyGridParameter(new PropertyGridParameter.Config() { DisplayName = "Company", Name = "company" });
                        PropertyGridParameter pgpBoolean = new PropertyGridParameter(new PropertyGridParameter.Config() { DisplayName = "Price", Name = "price" });
                        PropertyGridParameter pgpDate = new PropertyGridParameter(new PropertyGridParameter.Config() { DisplayName = "Change", Name = "change" });
                        PropertyGridParameter pgpInt = new PropertyGridParameter(new PropertyGridParameter.Config() { DisplayName = "Percent Change", Name = "pctChange" });
                        PropertyGridParameter pgpFloat = new PropertyGridParameter(new PropertyGridParameter.Config() { DisplayName = "Last Change", Name = "lastChange" });
    
                        s.AddRange(new PropertyGridParameter[] { pgpString, pgpBoolean, pgpDate, pgpInt, pgpFloat });
                    })
                    .View
                    (
                        Html.X().GridView().GetRowClass(grc => grc.Fn = "getRowClass"))
                    )
            )
        )
    </body>
    </html>
    Meanwhile, will you need expanding/collapsing of groups?
  9. #9
    Before you've found out that there is x-grid-row, but not x-grid3-row. I don't see you've applied this change for CSS rules.

    Also were you able to find x-props-grid while inspecting HTML elements? As far as I can see it has been renamed to x-property-grid since v1. Just to clarify - I didn't know that, but found out it by inspecting HTML elements.
    Well it's true, I don't understand how these things (about CSS and so) are working, thanks for explanation. Of course I don't want that separator is red and I struggled to change it but no matter what color I put I am not satisfied with the appearance. Closest color to what I want is #f0f0f0, but appearance is flat. Also in different theme (Access for example) it doesn't look well. I don't know what to do.

    Both solutions what you've proposed for hiding ID are working, thanks. However my case is little more complicated. In property grid I would like to have only those fields which are configured (as in data I have more then ID which I would not like to show). Fields which I want to show in property grid are configured and I read that configuration and presenting it in UI (some fields in grid, much more in property grid, but there are some system fields, which aren't needed in UI). Back in time when I was working in desktop you could configure property grid to show only what you want, not more, not less. I try to explain in pseudo code what would be cool :)
    if (config != null){
      foreach(field in data)
        if (config.contains(field))
          fillOnlyValue(field,data[field])
    } else {
      createPropertyGridFromScratch(data);
    }
    Meanwhile, will you need expanding/collapsing of groups?
    Well that would be perfect. Actually our desktop solution which we are porting to web has that feature...
    Last edited by ingbabic; Oct 21, 2015 at 12:43 PM.
  10. #10
    Well that would be perfect. Actually our desktop solution which we are porting to web has that feature...
    I am afraid we won't get it working with a PropertyGrid. It looks like it is time to switch to a GridPanel:
    http://forums.ext.net/showthread.php...l=1#post275547
Page 1 of 3 123 LastLast

Similar Threads

  1. Replies: 6
    Last Post: Feb 24, 2014, 10:48 AM
  2. Replies: 1
    Last Post: Jan 17, 2014, 3:43 PM
  3. Grid grouping
    By batchmm76 in forum 1.x Help
    Replies: 1
    Last Post: May 21, 2012, 11:04 AM
  4. Grid to grid Drag and Drop grouping issue
    By bobs in forum 1.x Help
    Replies: 0
    Last Post: Feb 10, 2009, 7:13 AM

Tags for this Thread

Posting Permissions