[CLOSED] Grouping in property grid

Page 2 of 3 FirstFirst 123 LastLast
  1. #11
    Well, OK. I made a sample and it works. Only what I want to ask you more, is there a better way to do this, because it seems that it reloading of grid takes more time then property grid.

    View:
        @Html.X().ResourceManager()
    
        @(
            Html.X().Panel().Layout(LayoutType.HBox).LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
            .Items
            (
                Html.X().GridPanel().ID("mainGrid").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('grid').getStore().reload(); }";
                })
    
                ,
                Html.X().GridPanel().Title("Properties").Flex(2)
                .Store
                (
                    Html.X().Store().GroupField("area")
                    .Model
                    (
                        Html.X().Model()
                        .Fields
                        (
                            new ModelField("area"),
                            new ModelField("fieldName"),
                            new ModelField("fieldValue")
                        )
                    )
                    .Proxy(Html.X().AjaxProxy().Url(Url.Action("FillProperties")).Reader(Html.X().JsonReader().Root("data")))
                    .Parameters
                    (
                        Html.X().StoreParameter().Name("selectedRows").Value("Ext.encode(App.mainGrid.getRowsValues({selectedOnly: true}))").Mode(ParameterMode.Raw)
                    )
                    
                )
                .ColumnModel
                (
                    Html.X().Column().Text("Name").DataIndex("fieldName").Flex(1).MenuDisabled(true).Sortable(false),
                    Html.X().Column().Text("Value").DataIndex("fieldValue").Flex(1).MenuDisabled(true).Sortable(false),
                    Html.X().Column().DataIndex("area").Hidden(true)
                )
                .Features(Html.X().Grouping().EnableGroupingMenu(false).GroupHeaderTplString("{name}"))
            )
        )
    Controller:
            public ActionResult FillProperties(string selectedRows)
            {
                List<Dictionary<string, string>> values = new List<Dictionary<string, string>>()
                {
                    new Dictionary<string, string>() { { "area", "General data" }, { "fieldName", "Company" }, { "fieldValue", "" } },
                    new Dictionary<string, string>() { { "area", "General data" }, { "fieldName", "Price" }, { "fieldValue", "" } },
                    new Dictionary<string, string>() { { "area", "Statistical data" }, { "fieldName", "Change" }, { "fieldValue", "" } },
                    new Dictionary<string, string>() { { "area", "Statistical data" }, { "fieldName", "Percent change" }, { "fieldValue", "" } },
                    new Dictionary<string, string>() { { "area", "Statistical data" }, { "fieldName", "Last Updated" }, { "fieldValue", "" } }
                };
    
                if (selectedRows != "[]")
                {
                    List<Dictionary<string, string>> rows = JSON.Deserialize<List<Dictionary<string, string>>>(selectedRows);
                    Dictionary<string, string> selected = rows[0];
                    values.Find(i => i.ContainsValue("Company"))["fieldValue"] = selected["company"];
                    values.Find(i => i.ContainsValue("Price"))["fieldValue"] = selected["price"];
                    values.Find(i => i.ContainsValue("Change"))["fieldValue"] = selected["change"];
                    values.Find(i => i.ContainsValue("Percent change"))["fieldValue"] = selected["pctChange"];
                    values.Find(i => i.ContainsValue("Last Updated"))["fieldValue"] = selected["lastChange"];
                }
                return this.Store(values); 
            }
  2. #12
    Well, with a PropertyGrid you were loading data locally (exclusively on client side), but now with a GridPanel you are loading data remotely with a request to server. Yes, it is more slowly.

    There is a Store's loadData() method that you can use to load data locally to a GridPanel's Store.
    http://docs.sencha.com/extjs/5.1/5.1...ethod-loadData
  3. #13
    Finally, I think I came to final solution. In case anyone need this, this would it be:
    View:
    <script>
           var refreshPropertyGrid = function (selModel, selected) {
    
                // all records with getRange()
                var records = App.props.getStore().getRange();
    
                // iteration of the store
                Ext.each(records, function (item, idx) {
                    // item.get to access a field in the record
                    item.beginEdit();
                    item.data.fieldValue = selected[0].data[item.data.fieldName];
                    item.endEdit();
                    item.commit();
                });
            };
        </script>
    
    @Html.X().ResourceManager()
    
        @(
            Html.X().Panel().Layout(LayoutType.HBox).LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
            .Items
            (
                Html.X().GridPanel().ID("mainGrid").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.Fn = "refreshPropertyGrid"; 
                })
    
                ,
                Html.X().GridPanel().ID("props").Title("Properties").Flex(2)
                .Store
                (
                    Html.X().Store().GroupField("area")
                    .Model
                    (
                        Html.X().Model()
                        .Fields
                        (
                            new ModelField("area"),
                            new ModelField("fieldName"),
                            new ModelField("fieldLabel"),
                            new ModelField("fieldValue")
                        )
                    )
                    .Proxy(Html.X().AjaxProxy().Url(Url.Action("FillProperties")).Reader(Html.X().JsonReader().Root("data")))
                )
                .ColumnModel
                (
                    Html.X().Column().Text("Name").DataIndex("fieldLabel").Flex(1).MenuDisabled(true).Sortable(false),
                    Html.X().Column().Text("Value").DataIndex("fieldValue").Flex(1).MenuDisabled(true).Sortable(false),
                    Html.X().Column().DataIndex("area").Hidden(true),
                    Html.X().Column().DataIndex("fieldName").Hidden(true)
                )
                .Features(Html.X().Grouping().EnableGroupingMenu(false).GroupHeaderTplString("{name}"))
            )
        )
    Controller
        public class HomeController : Controller
        {
            // GET: Home
            public ActionResult Index()
            {
                return View();
            }
    
            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);
            }
    
            public ActionResult FillProperties()
            {
                List<Dictionary<string, string>> values = new List<Dictionary<string, string>>()
                {
                    new Dictionary<string, string>() { { "area", "General data" }, { "fieldName", "company" }, { "fieldLabel", "Company" }, { "fieldValue", "" } },
                    new Dictionary<string, string>() { { "area", "General data" }, { "fieldName", "price" }, { "fieldLabel", "Price" }, { "fieldValue", "" } },
                    new Dictionary<string, string>() { { "area", "Statistical data" }, { "fieldName", "change" }, { "fieldLabel", "Change" }, { "fieldValue", "" } },
                    new Dictionary<string, string>() { { "area", "Statistical data" }, { "fieldName", "pctChange" }, { "fieldLabel", "Percent change" }, { "fieldValue", "" } },
                    new Dictionary<string, string>() { { "area", "Statistical data" }, { "fieldName", "lastChange" }, { "fieldLabel", "Last Updated" }, { "fieldValue", "" } }
                };
    
                return this.Store(values); 
            }
        }
    Danill, please check if something could be made better (i'm not sure about refreshPropertyGrid, I've got this idea from there). Thanks for help. Both this and that thread could be closed. Just please don't forget to check refreshPropertyGrid :)
  4. #14
    Do you think that item.beginEdit(); and item.endEdit(); calls are required? I used to think that it is only required if you use a record's .set() call.
  5. #15
    Indeed they're not needed (checked).
  6. #16
    Thank you for confirming. Now I don't quite have anything to suggest what might be improved:)
  7. #17
    Hmm, I moved this solution to my project and it's still slowwww :(. I mean setSource from property grid worked quite faster. In my property grid I have 39 properties. It takes 2.1 seconds to move from one row to another. :((
  8. #18
    I quite hope there is a way to improve performance, but I need a test case to reproduce. Could you, please, provide?
  9. #19
    This sample is even more extreme (although I don't understand why). Selection change takes more then 5 seconds! I played a bit with number of columns and only if I have around 10, performance is near to decent.

    Controller:
    public class PropertyGridController : Controller
    {
        const int colNumber = 40;
        const int colSep = 10;
        // GET: PropertyGrid
        public ActionResult Index()
        {
            ViewBag.colNum = colNumber;
            return View();
        }
    
        public ActionResult GetObjects()
        {
            var myObjects = new object[100];
            for (int i = 0; i < 100; i++)
            {
                var properties = new object[40];
                for (int j = 0; j < colNumber; j++)
                {
                    properties[j] = ((i + 1) * 100 + (j + 1)).ToString();
                }
                myObjects[i] = properties;
            }
            return this.Store(myObjects);
        }
    
        public ActionResult FillProperties()
        {
            List<Dictionary<string, string>> values = new List<Dictionary<string, string>>();
    
            string area = null;
            for (int i = 0; i < colNumber; i++)
            {
                Dictionary<string, string> attribute = new Dictionary<string, string>();
                if (i % colSep == 0)
                    area = String.Format("Attributes from {0} to {1}", i, i + colSep);
    
                attribute.Add("area", area);
                attribute.Add("fieldName", String.Format("attr_{0}", i));
                attribute.Add("fieldLabel", String.Format("Attribute{0}", i));
                attribute.Add("fieldValue", "");
                values.Add(attribute);
            }
    
                return this.Store(values);
        }
    }
    View:
    
    <script>
            var refreshPropertyGrid = function (selModel, selected) {
    
                // all records with getRange()
                var records = App.props.getStore().getRange();
    
                // iteration of the store
                Ext.each(records, function (item, idx) {
                    // item.get to access a field in the record
                    item.data.fieldValue = selected[0].data[item.data.fieldName];
                    item.commit();
                });
            };
    </script>
    
    @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(f =>
                    {
                        for (int i = 0; i < ViewBag.colNum; i++)
                        {
                            ModelField mf = new ModelField(String.Format("attr_{0}", i));
                            f.Add(mf);
                        }
    
                    })
                )
            )
            .ColumnModel(c => {
                Random r = new Random();
                for (int i = 0; i < ViewBag.colNum; i++)
                {
                    Column column = new Column();
                    column.Text = String.Format("Attribute{0}", i);
                    column.DataIndex = String.Format("attr_{0}", i);
                    column.Flex = 1;
                    if (r.Next(100) > 30)
                        column.Hidden = true;
                    c.Columns.Add(column);
                }
            })
            .Listeners(l =>
            {
                l.SelectionChange.Fn = "refreshPropertyGrid"; 
            })
    
            ,
            Html.X().GridPanel().ID("props").Title("Properties").Flex(2)
            .Store
            (
                Html.X().Store().GroupField("area")
                .Model
                (
                    Html.X().Model()
                    .Fields
                    (
                        new ModelField("area"),
                        new ModelField("fieldName"),
                        new ModelField("fieldLabel"),
                        new ModelField("fieldValue")
                    )
                )
                .Proxy(Html.X().AjaxProxy().Url(Url.Action("FillProperties")).Reader(Html.X().JsonReader().Root("data")))
            )
            .ColumnModel
            (
                Html.X().Column().Text("Name").DataIndex("fieldLabel").Flex(1).MenuDisabled(true).Sortable(false),
                Html.X().Column().Text("Value").DataIndex("fieldValue").Flex(1).MenuDisabled(true).Sortable(false),
                Html.X().Column().DataIndex("area").Hidden(true),
                Html.X().Column().DataIndex("fieldName").Hidden(true)
            )
            .Features(Html.X().Grouping().EnableGroupingMenu(false).GroupHeaderTplString("{name}"))
        )
    )
  10. #20
    Thank you for the test case.

    Please use:
    var refreshPropertyGrid = function (selModel, selected) {
        // all records with getRange()
        var records = App.props.getStore().getRange();
    
        // iteration of the store
        Ext.each(records, function (item, idx) {
            // item.get to access a field in the record
            item.data.fieldValue = selected[0].data[item.data.fieldName];
        });
    
        App.props.getView().refresh();
    };
Page 2 of 3 FirstFirst 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