Grid Performance in IE

[Maurus Beurskens]

Hello,

We are using the Syncfusion grid in an asp.net mvc application but since we have applied templates on several cells we have seen a drop in performance. The performance drops mainly when building the grid but also the scrolling goes choppy.

What we also notice is that the performance in chrome is acceptable to good but in internet explorer (version 11) it really performs a lot worse.

Is there a way to get IE to perform the same as chrome or at least improve the performance in IE?

 

Here is our code:

<script type="text/x-jsrender" id="columnStatus">

    <span class="icon-div">

        {{if Active}}

            <span class="glyphicon glyphicon-ok"></span>

        {{/if}}

    </span>

    <span class="icon-div">

        {{if Electrical}}

            <span class="glyphicon glyphicon-flash"></span>

        {{/if}}

    </span>

    <span class="icon-div">

        {{if Parent}}

            <span class="glyphicon glyphicon-user"></span>

        {{/if}}

    </span>

    <span class="icon-div">

        {{if ItemDocuments}}

            <span class="glyphicon glyphicon-file"></span>

        {{/if}}

    </span>

</script>

 

<script type="text/x-jsrender" id="columnArticleStatus">

    <span class="icon-div">

        {{if ArticleDocuments}}

            <span class="glyphicon glyphicon-file"></span>

        {{/if}}

    </span>

    <span class="icon-div">

        {{if HasSubArticles}}

        <span class="glyphicon glyphicon-user"></span>

        {{/if}}

    </span>

</script>

 

<script type="text/x-jsrender" id="columnArticleCode">

    <a onclick="atas.article.clickArticle('{{:ArticleId}}')">{{:ArticleCode}}</a>

</script>

 

<script type="text/x-jsrender" id="columnItemNumber">

    <a onclick="atas.item.clickItem('{{:ItemId}}')">{{:ItemNumber}}</a>

</script>

 

@(Html.EJ().Grid<ItemArticleSearch>

    ("Grid")

    .Datasource(x => x.URL("/Main/Datasource").Adaptor("UrlAdaptor"))

    .AllowSorting()

    .AllowScrolling()

    .ScrollSettings(scroll => scroll.AllowVirtualScrolling().Height(415).Width(0))

    .ClientSideEvents(eve => eve.ActionBegin("begin").Load("load"))

    .EnableRowHover(false)

    .Columns(col =>

    {

        col.Field("Active").HeaderText("Status").Width(110).Template(true).TemplateID("#columnStatus").Add();

        col.Field("ItemNumber").HeaderText("Item Number").Width(95).Template(true).TemplateID("#columnItemNumber").Add();

        col.Field("ItemName").HeaderText("Item Name").Width(175).Add();

        col.Field("SpaceCode").HeaderText("Space").Width(70).Add();

        col.Field("SpaceName").HeaderText("Space Name").Width(150).Add();

        col.Field("SupplierName").HeaderText("Supplier").Width(100).Add();

        col.Field("FoundationCode").HeaderText("Fnd").Width(40).Add();

        col.Field("AccessibilityCode").HeaderText("Acc").Width(40).Add();

        col.Field("Seperator").HeaderText("-").CssClass("seperator").Width(20).Add();

        col.Field("Active").HeaderText("").Width(60).Template(true).TemplateID("#columnArticleStatus").Add();

        col.Field("ArticleCode").HeaderText("Article Code").Template(true).TemplateID("#columnArticleCode").Width(95).Add();

        col.Field("ArticleName").HeaderText("Article Name").Width(175).Add();

    })

)

[Ragavee U S]

Hi Maurus,

We have analyzed the reported issue and we are sorry to let you know that we are unable to reproduce the issue at our end. We have checked the performance of our grid with 832 records and 12 columns.

Please refer the below table for performance of Grid(with virtual scrolling enabled) in IE and chrome browser.

Action	Time in Milliseconds (Chrome browser)	Time in Milliseconds (IE11)
Initial Load	~27	~29
Paging	~82	~169
Sorting	~64	~74

For your convenience, we have attached the sample and it can be downloaded from the following location:

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/118301/Sample-1857015.zip

Please provide us the code corresponding to the ActionBegin and Load events of the grid in your project. Also, please share your controller code with us. The provided information will be helpful for us to analyze the reason for the vitiate in performance when loading the grid and thus provide you response accordingly.

Please let us know if you have any queries.

Regards,

Ragavee U S

[Maurus Beurskens]

Hi,

Attached a solution based on the solution you provided. We modified the VIEW a little bit, added a pagesetting.pagesize to the load event of the grid. 

We encountered the following behavior:

• When you scroll with the mouse wheel through the grid, you will see that the page loadings time increase dramatically in Internet Explorer, in Chrome the increase is a little. Every page load takes longer and longer in IE. We assume the JSON result becomes bigger and bigger after each page loading.

• When you move the slider in the scroll bar in Internet Explorer to i.e. the half of the scroll bar and then you go further scrolling with the mouse wheel, you see the page number decrease first instead of increase and a lot of loading events fires shortly after each other. This behavior doesn’t occur in Chrome. We think the JSON result become too big for the grid too handle it efficient in IE.

• When the pagesetting.pagesize in the load event is set to a number higher than i.e. 300 the build time of the grid is far longer than Chrome. Again I think the grid cannot handle larger JSON result in IE.

It looks like the grid (with virtual scrolling?) cannot handle large JSON results in Internet Explorer. The performance decreases drastically when this becomes larger.

Questions:

• Can you confirm that the larger JSON result cannot be handled fast in the grid, when this is displayed in Internet Explorer.

• Is it possible to make the grid workable in IE. Here is an idea: Perhaps it is possible to limit the total/max size of the JSON result. 

For example lets say the max size of the JSON result should be 300 records and we set pagesetting.pagesize to 100 records. The idea is that when the user is on page 4 the JSON result set only contains record 301 till 600. Record 1 till 300 have been removed from the JSON result set to retain the limit of 300. Don’t know if 300 is the right size, perhaps it must be smaller. This possible solution means when the user scrolls back to page 2, that the records must be retrieved again.

Bottom-line we would like to see a grid with virtual scrolling that performs in IE, even with large result sets.

Attachment: SyncSample1857015_Maurus_89bfb75e.zip

[Ragavee U S]

Hi Maurus,

We have considered “Reverse Paging occurs when scrolling using mouse drag and later using mouse wheel” as a bug and “Retrieving and maintaining only records corresponding to the requested page” as a feature. A support incident has been created under your account accordingly to track the status of these. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards

Ragavee U S