[CLOSED] GridPanel Rendering takes time

[RajivDutt]

In my Project a grid is taking around 30 seconds in rendering, given is some statistics.

Total records 200 approx.
Total Column 14 columns, 6 columns have renderer applied.

I was wondering how to provide the complete code as an example, but while I tried to bring 500 records in a grid. it takes 5 seconds to render.
Is it fair to take 5 seconds to render a grid with 500 records? Or there is a way to improve the rendering performance of the grid.


Given is the Screenshot, where its taking 6 seconds to render.



Given is the sample code.

View :

@model System.Collections.IEnumerable

@{
    ViewBag.Title = "Data Prepare - Ext.NET MVC Examples";
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
}

@section headtag
{
    <script>
            var prepareCity = function (value, record) {
                return record.get('Address').City;
            };

            var prepareStreet = function (value, record) {
                return record.get('Address').StreetAddress;
            };

                function afterrender() {
                    var currentdate = new Date();

                    var datetime = "Last Sync: " + currentdate.getDate() + "/" + (currentdate.getMonth() + 1)
                    + "/" + currentdate.getFullYear() + " - "
    + currentdate.getHours() + ":"
    + currentdate.getMinutes() + ":" + currentdate.getSeconds();

                    alert(datetime)
                }
    </script>
}

@section example
{    

    @(DateTime.Now)
    @(Html.X().GridPanel()
        .Title("Customers")
        .Width(630)
        .Height(300)
        .Listeners(l1 =>
            {
                l1.AfterRender.Handler = "afterrender();";
                l1.AfterRender.Delay = 10;
            })

        .Store(Html.X().Store()
            .Model(Html.X().Model()
                .Fields(
                    new ModelField("ID", ModelFieldType.Int),
                    new ModelField("FirstName"),
                    new ModelField("LastName"),
                    new ModelField("Company"),
                    new ModelField()
                    {
                        Name = "Address",
                        Type = ModelFieldType.Object
                    },
                    new ModelField()
                    {
                        Name = "City",
                        Convert =
                        {
                            Fn = "prepareCity"    
                        }
                    },
                    new ModelField()
                    {
                        Name = "Street",
                        Convert =
                        {
                            Fn = "prepareStreet"
                        }
                    }
                )
            )
            .DataSource(Model)
        )
        .ColumnModel(
            Html.X().Column().Text("ID").DataIndex("ID"),
            Html.X().Column().Text("FirstName").DataIndex("FirstName"),
            Html.X().Column().Text("LastName").DataIndex("LastName"),
            Html.X().Column().Text("Company").DataIndex("Company"),
            Html.X().Column().Text("City").DataIndex("City"),
            Html.X().Column().Text("Street").DataIndex("Street")
        )
    )

}

Controller :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Ext.Net.MVC.Examples.Areas.GridPanel_Data_Presentation.Data_Prepare.Controllers
{
    public class Data_PrepareController : Controller
    {
        public ActionResult Index()
        {
            return View(Customers.GetAll());
        }
    }
}

Model :

using System;
using System.Collections;
using System.Collections.Generic;

namespace Ext.Net.MVC.Examples.Areas.GridPanel_Data_Presentation.Data_Prepare
{
    public class Customer
    {
        public int ID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Company { get; set; }
        public Address Address { get; set; }
    }

    public class Address
    {
        public string StreetAddress { get; set; }
        public string City { get; set; }
    }

    public class Customers
    {
        public static IEnumerable GetAll()
        {
            List<Customer> list = new List<Customer>(500);

            for (int i = 1; i <= 500; i++)
            {
                Customer customer = new Customer
                {
                    ID = i,
                    FirstName = ("FirstName" + i),
                    LastName = ("LastName" + i),
                    Company = ("Company" + i)
                };

                Address address = new Address
                {
                    StreetAddress = ("Street" + i),
                    City = ("City" + i)
                };

                customer.Address = address;

                list.Add(customer);
            }

            return list;
        }
    }
}

[Baidaly]

Hello!

Could you say, in what browser are you testing?

[RajivDutt]

Hello!

Could you say, in what browser are you testing?

I am using IE 10

[Daniil]

@(DateTime.Now)

This is done on a server even before sending the page to a browser.

So, the time between

@(DateTime.Now)

and

.AfterRender.Handler = "alert(new Date().getSeconds())"

contains the time to construct the page on the server, the network latency to send the page to the browser, the network latency to load the JavaScript and CSS resources and, finally, the time to render the GridPanel and its rows.

I think the 500 rows should be rendered within a second, maybe, two.

[RajivDutt]

@(DateTime.Now)

This is done on a server even before sending the page to a browser.

So, the time between

@(DateTime.Now)

and

.AfterRender.Handler = "alert(new Date().getSeconds())"

contains the time to construct the page on the server, the network latency to send the page to the browser, the network latency to load the JavaScript and CSS resources and, finally, the time to render the GridPanel and its rows.

I think the 500 rows should be rendered within a second, maybe, two.

The network is not involved in this... i am trying to run on the standalone system. Although i have noticed it works fast on Chrome, but IE is my client's requirement. :(

[Daniil]

The network is not involved in this...

Please clarify why do you think so?

i am trying to run on the standalone system.

Please clarify what you mean.

Although i have noticed it works fast on Chrome, but IE is my client's requirement. :(

Yes, Chrome is faster than IE. Ok, your testing approach shows 6 seconds for IE. How much seconds does it show for Chrome?

Though, anyway, it won't give much, because your result time involves too many things as I listed above.

Also how much time does it take with the single record?

[RajivDutt]

Please clarify why do you think so?

Network is involved when i am hosting application on one box and accessing it on the different box. I am having IIS and Browser on the same box.


Please clarify what you mean.

Yes, Chrome is faster than IE. Ok, your testing approach shows 6 seconds for IE. How much seconds does it show for Chrome?

Though, anyway, it won't give much, because your result time involves too many things as I listed above.

Also how much time does it take with the single record?

You are right, Chrome is faster than IE. On Chrome its taking 2-3 seconds, on IE it takes 5-6 seconds.
I tested it with 50 records, it took 2 seconds in IE.

I have extended the example code, in the Grid Panel - Presenting Data section, its having 5 records... i have made it 500.

[Baidaly]

OK, I don't see any big lags in IE10. What I see is small difference between page render and actual load (2-3 seconds). But I agree that GridPanel's performance is not always good in IE. So what I can suggest to split each part and see what part causes the problems using the following code:

@{
    ViewBag.Title = "Data Prepare - Ext.NET MVC Examples";
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
}
 
@section headtag
{
    <script>
        var prepareCity = function (value, record) {
            return record.get('Address').City;
        };

        var prepareStreet = function (value, record) {
            return record.get('Address').StreetAddress;
        };

        var afterrender = function () {
            console.log("Grid is rendered at " + new Date());
        };
        
        var onSuccess = function (grid, data) {
            console.log("Data is received at " + new Date());
            grid.getStore().loadData(data);
            console.log("Data is loaded at " + new Date());
        };
    </script>
}
 
@section example
{    
    @(Html.X().GridPanel()
        .ID("GridPanel1")
        .Title("Customers")
        .Width(630)
        .Height(300)
        .Listeners(l1 =>
            {
                l1.AfterRender.Handler = "afterrender();";
                l1.AfterRender.Delay = 10;
            })
        .TopBar(Html.X().Toolbar()
            .Items(Html.X().Button()
                .Text("Load Data")
                .DirectEvents(de =>
                {
                    de.Click.Url = Url.Action("GetData");
                    de.Click.Before = "console.log('Data is requested at ' + new Date());";
                    de.Click.Success = "onSuccess(App.GridPanel1, result.data);";
                })
            )
        )
        .Store(Html.X().Store()
            .AutoLoad(false)
            .Model(Html.X().Model()
                .Fields(
                    new ModelField("ID", ModelFieldType.Int),
                    new ModelField("FirstName"),
                    new ModelField("LastName"),
                    new ModelField("Company"),
                    new ModelField()
                    {
                        Name = "Address",
                        Type = ModelFieldType.Object
                    },
                    new ModelField()
                    {
                        Name = "City",
                        Convert =
                        {
                            Fn = "prepareCity"   
                        }
                    },
                    new ModelField()
                    {
                        Name = "Street",
                        Convert =
                        {
                            Fn = "prepareStreet"
                        }
                    }
                )
            )
            .Reader(Html.X().JsonReader())
        )
        .ColumnModel(
            Html.X().Column().Text("ID").DataIndex("ID"),
            Html.X().Column().Text("FirstName").DataIndex("FirstName"),
            Html.X().Column().Text("LastName").DataIndex("LastName"),
            Html.X().Column().Text("Company").DataIndex("Company"),
            Html.X().Column().Text("City").DataIndex("City"),
            Html.X().Column().Text("Street").DataIndex("Street")
        )
    )
}

Controller:

public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetData()
        {
            return this.Store(Customers.GetAll());
        }