Grid ComponentColumn : How to increase render speed?

  1. #1

    Grid ComponentColumn : How to increase render speed?

    Hello

    I use Grid ComponentColumn only with 2x row but it render slow.

    How to increase render speed?

    Here is my example : https://drive.google.com/open?id=1lc04QvVNbEmNyCJyhlRV1uoc3bl7n9yg

    Thank you very much.
    Attached Thumbnails Grid_ComponentColumn.jpg  
  2. #2
    Hello,

    There are many factors that might be affecting this. Without being able to run a sample locally we won't be able to offer many concrete tips on how to improve.

    How much data is being sent in request and response? Can you post a copy of the full request and full response?

    Posting a full sample demonstrating how to reproduce would be helpful. You can review the forum guidelines for tips on how to create a sample, see

    https://forums.ext.net/showthread.ph...ing-New-Topics
    Geoffrey McGill
    Founder & CEO
  3. #3

    Thank you for support to me. Here is my example

    Index.cshtml
    @using Ext.Net.MVC;
    
    @model object[]
    
    @{
        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" />
        <style>
            /*  search-item
            -----------------------------------------------------------------------------------------------*/
            .search-item {
                font          : normal 11px tahoma, arial, helvetica, sans-serif;
                padding       : 3px 10px 3px 10px;
                border        : 1px solid #fff;
                border-bottom : 1px solid #eeeeee;
                white-space   : normal;
                color         : #555;
            }
    
            .search-item h3 {
                display     : block;
                font        : inherit;
                font-weight : bold;
                color       : #222;
                margin      :0px;
            }
    
            .search-item h3 span {
                float       : right;
                font-weight : normal;
                margin      : 0 0 5px 5px;
                width       : 100px;
                display     : block;
                clear       : none;
            }
        </style>
    </head>
    <body>
        @(Html.X().ResourceManager())
    
        @( Html.X().GridPanel()
                       .ID("DepartmentGridPanel")
                       .Height(600)
                       .Bin(Html.X().Store().AutoLoad(false)
                           .ID("DepartmentStore")
                           .Proxy(Html.X().AjaxProxy()
                               .Url(Url.Action("LookupData"))
                               .Reader(Html.X().JsonReader().RootProperty("data").TotalProperty("total")))
                           .Model(Html.X().Model()
                               .IDProperty("ID")
                               .Fields(
                                   new ModelField("ID", ModelFieldType.Int),
                                   new ModelField("Code", ModelFieldType.String),
                                   new ModelField("Description", ModelFieldType.String)
                               )
                           )
                           .Data(Model[1])
                       )
                       .Store(Html.X().Store()
                              .ID("EmployeeStore")
                              .Model(
                                  Html.X().Model()
                                      .IDProperty("ID")
                                      .Fields(
                                          new ModelField("ID", ModelFieldType.Int),
                                          new ModelField("Name", ModelFieldType.String),
                                          new ModelField("Surname", ModelFieldType.String),
                                          new ModelField("DepartmentId", ModelFieldType.String),
                                          new ModelField("DepartmentName", ModelFieldType.String),
                                          new ModelField("Salary", ModelFieldType.String)
                                          {
                                              Convert =
                                              {
                                                  Handler = @"var v = value + '';
                                                        v.replace(/\./g,'').replace(',', '.');
                                                        return Ext.util.Format.number(v, '0.000,00/i');"
                                              }
                                          },
                                          new ModelField("Birthday", ModelFieldType.Date)
                                      ))
                              .DataSource(Model[0])
                       )
                       .ColumnModel(cols =>
                       {
                           cols.Columns.Add(Html.X().ComponentColumn().Text("Name").DataIndex("Name").Sortable(false).Width(256).Editor(true).Component(
                               Html.X().TextField())
                           );
                           cols.Columns.Add(Html.X().ComponentColumn().Text("Surname").DataIndex("Surname").Sortable(false).Width(256).Editor(true).Component(
                               Html.X().TextField())
                           );
                           cols.Columns.Add(Html.X().ComponentColumn().Sortable(false).Text("Department").DataIndex("DepartmentId").Width(150).Editor(true).Component(
                                      Html.X().ComboBox()
                                          .DisplayField("Code")
                                          .ValueField("ID")
                                          .FieldStyle("text-transform: uppercase;")
                                          .TypeAhead(true)
                                          .MinChars(0)
                                          .PageSize(10)
                                          .SelectOnTab(true)
                                          .ForceSelection(true)
                                          .ValidateOnBlur(true)
                                          .ValidateOnChange(true)
                                          .ListConfig(Html.X().BoundList()
                                              .LoadingText("Searching...")
                                              .ItemTpl(Html.X().XTemplate()
                                                  .Html(@<text>
                                                            <tpl for=".">
                                                                <div class="search-item">
                                                                    <h3>{Code}</h3>
                                                                    {Name}
                                                                </div>
                                                            </tpl>
                                                        </text>))
                                              .MinWidth(400)
                                            )
                                            .StoreID("DepartmentStore")
                                          )
                                        .SilentSave(false)
                                        .Listeners(ls =>
                                        {
                                            ls.Edit.Handler = @"e.record.data.DepartmentName = e.cmp.findRecordByValue(e.cmp.getValue()).data.Name;";
                                        })
                               );
                           cols.Columns.Add(Html.X().Column().Text("Department Name").DataIndex("DepartmentName").Sortable(false).Width(256));
                           cols.Columns.Add(Html.X().ComponentColumn().ID("SalaryCol").Editor(true).Sortable(false).Width(100).DataIndex("Salary").Text("Salary").Component(
                               Html.X().TextField().SelectOnFocus(true).MaskRe(@"/[0-9\,\.]").Listeners(ls =>
                               {
                                   ls.Focus.Handler = @"this.setRawValue(this.getRawValue().replace(/\,/g,''))";
                                   ls.Blur.Handler = @"var v = this.getRawValue().replace(/\,/g,'');
                                                    this.setRawValue(Ext.util.Format.number(v, '0.000,00/i'));";
                               })));
                           cols.Columns.Add(Html.X().ComponentColumn().ID("BrithdayCol").Editor(true).Sortable(false).Width(125).DataIndex("Brithday").Text("Brithday").Component(
                               Html.X().DateField()));
                           cols.Columns.Add(Html.X().ComponentColumn().ID("SalaryCol2").Editor(true).Sortable(false).Width(100).DataIndex("Salary").Text("Salary").Component(
                               Html.X().TextField().SelectOnFocus(true).MaskRe(@"/[0-9\,\.]").Listeners(ls =>
                               {
                                   ls.Focus.Handler = @"this.setRawValue(this.getRawValue().replace(/\,/g,''))";
                                   ls.Blur.Handler = @"var v = this.getRawValue().replace(/\,/g,'');
                                                    this.setRawValue(Ext.util.Format.number(v, '0.000,00/i'));";
                               })));
                           cols.Columns.Add(Html.X().ComponentColumn().ID("BrithdayCol2").Editor(true).Sortable(false).Width(125).DataIndex("Brithday").Text("Brithday").Component(
                               Html.X().DateField()));
                       })
        )
    </body>
    </html>
    ExtNetController
    public class ExtNetController : Controller
        {
            public ActionResult Index()
            {
                List<Employee> emps = new List<Employee>();
                for (int i = 1; i < 30; i++)
                {
                    emps.Add( new Employee{ ID = i, Name = "AAAA", Surname  = "BBBB", DepartmentId = (i%2 == 0 ? 1 : 4), DepartmentName = (i%2 == 0 ? "Department 01" : "Department 04"), Salary = 300000, Birthday = DateTime.Now});
                }
    
                List<Department> deps = new List<Department>()
                {
                    new Department {ID = 1, Code = "01", Name = "Department 01"},
                    new Department {ID = 4, Code = "04", Name = "Department 04"},
                };
    
                return this.View(new object[]
                {
                    emps,
                    deps
                });
            }
    
            public ActionResult LookupData(StoreRequestParameters parameters)
            {
                var data = (from x in Department.GetAll()
                    where x.Code.Contains(parameters.Query)
                    select x).ToList();
                return this.Store(data, data.Count);
            }
    
            public class Employee
            {
                public int ID { get; set; }
                public string Name { get; set; }
                public string Surname { get; set; }
                public string DepartmentName { get; set; }
                public int DepartmentId { get; set; }
                public Decimal Salary { get; set; }
                public DateTime Birthday { get; set; }
            }
    
            public class Department
            {
                public int ID { get; set; }
    
                public string Code { get; set; }
    
                public string Name { get; set; }
    
                public static List<Department> GetAll()
                {
                    return new List<Department>
                    {
                        new Department {ID = 1, Code = "01", Name = "Department 01"},
                        new Department {ID = 2, Code = "02", Name = "Department 02"},
                        new Department {ID = 3, Code = "03", Name = "Department 03"},
                        new Department {ID = 4, Code = "04", Name = "Department 04"},
                        new Department {ID = 5, Code = "05", Name = "Department 05"},
                        new Department {ID = 6, Code = "06", Name = "Department 06"},
                        new Department {ID = 7, Code = "07", Name = "Department 07"},
                        new Department {ID = 8, Code = "08", Name = "Department 08"},
                        new Department {ID = 9, Code = "09", Name = "Department 09"},
                        new Department {ID = 10, Code = "10", Name = "Department 10"},
                    };
                }
            }
        }
    Here is my result : https://drive.google.com/open?id=1Nj...ExR0Az-X6RqaAV
  4. #4
    Hello, @anh34!

    Yes, this approach is going to make it very heavy. Component columns works best with simple components or limited grids.

    There are basically two approaches you can use to improve speed:

    (1) Use an editor to show the components
    (2) Paginate your grid to limit maximum number of components rendered at once.

    There is a possible third I can think of, that's about limiting the buffered renderer to less components, but it will still be both very heavy to scroll around and in some circumstances you won't be getting the column components rendered at all, so better avoid this one. Actually, your grid has buffered renderer enabled by default, so if you give it a .BufferedRenderer(false), you may see a performance increase for scrolling around big grids. But yet, that would be pretty far from best, as it would take a lot of resources to load the page alone.

    I'll give you an example on how to get started with approach (1) above.

    Just change each component column to simple .Column(), then the .Editor() will replace the false value with whatever you defined within the .Compoent() part. And also, set up RowEditor plug in in the grid.

    As for one column example, this one:

    cols.Columns.Add(Html.X().ComponentColumn().ID("BrithdayCol").Editor(true).Sortable(false).Width(125).DataIndex("Brithday").Text("Brithday").Component(
        Html.X().DateField()));
    Will become
    cols.Columns.Add(Html.X().Column().ID("BrithdayCol").Sortable(false).Width(125).DataIndex("Brithday").Text("Brithday").Editor(
        Html.X().DateField()));
    And to the grid, you'll bind the RowEditor PlugIn:

    .Plugins(Html.X().RowEditing())
    You'll notice then your listener in view line 129 will no longer work. You'd have to move it within the RowEditing() plug in. Something like this should do, but it would become better to maintain if you define a funcion and use ls.Edit.Fn = "myFunction" instead.

    .Plugins(
        Html.X().RowEditing()
            .Listeners(ls => ls.Edit.Handler = @"var cb = item.cmp.getColumns().find(function(col) { return col.dataIndex == ""DepartmentId""; }).getEditor(); e.record.data.DepartmentName = cb.findRecordByValue(cb.getValue()).data.Name; e.view.refreshNode(e.record);")
    )
    As you can see, the one-liner above is very hard to read. Something like that would ease your life:

    (...) in your page's <head /> section(...)
    <script type="text/javascript">
        var handleEdit = function (item, e) {
            var cmp = item.cmp,
                columns = cmp.getColumns(),
                depCol = columns.find(function (col) { return col.dataIndex == "DepartmentId"; }),
                depColCB = depCol.getEditor(),
                view = e.view;
    
            e.record.data.DepartmentName = depColCB.findRecordByValue(depColCB.getValue()).data.Name;
            view.refreshNode(e.record);
        }
    </script>
    (...) down to the listener in the RowEditor definition (...)
    Html.X().RowEditing().Listeners(ls => ls.Edit.Fn = "handleEdit")
    Click twice the row to start editing it. You can set it up for single click/tap.

    This way you'll be benefiting your grid in two aspects:
    - lighter and faster, as the components are drawn just when needed
    - cleaner view, removing all the clutter of components frames, arrows, colors...

    You will also need to adjust how the Salary column is filled, but should not be too big an issue. Let us know if otherwise.

    Well, I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    I will try to use grid row edit.

    Thanks for your support.

Similar Threads

  1. Replies: 3
    Last Post: Aug 03, 2016, 12:20 AM
  2. Replies: 0
    Last Post: Aug 23, 2013, 12:16 PM
  3. Increase font size of Grid Data. ?
    By vikram in forum 2.x Help
    Replies: 5
    Last Post: Aug 02, 2013, 6:46 AM
  4. [CLOSED] Question about chart render speed
    By feanor91 in forum 2.x Premium Help
    Replies: 29
    Last Post: Jun 11, 2012, 3:51 PM
  5. help to speed up rendering grid
    By Birgit in forum 1.x Help
    Replies: 0
    Last Post: Mar 17, 2011, 11:54 AM

Tags for this Thread

Posting Permissions