We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Performance in IE

Thread ID:

Created:

Updated:

Platform:

Replies:

118301 Feb 23,2015 11:49 AM UTC Mar 6,2015 01:08 PM UTC ASP.NET MVC 3
loading
Tags: Grid
Maurus Beurskens
Asked On February 23, 2015 11:49 AM UTC

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 [Syncfusion]
Replied On February 24, 2015 12:48 PM UTC

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
Replied On March 4, 2015 11:00 AM UTC

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 [Syncfusion]
Replied On March 6, 2015 01:08 PM UTC

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



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;