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.
Unfortunately, activation email could not send to your email. Please try again.

Slow Control Rending in Chrome

Thread ID:

Created:

Updated:

Platform:

Replies:

132062 Aug 10,2017 10:07 AM Aug 14,2017 01:09 AM ASP.NET Core 3
loading
Tags: DatePicker
Greg Gum
Asked On August 10, 2017 10:07 AM

I am using the DatePicker in an ASP.net core application like this:

 <ej-date-picker value="DateTime.UtcNow" id="statDate"></ej-date-picker> 

It works fine in Internet Explorer.

However, when I open the site in Chrome, it takes 5 full seconds before the datepicker is rendered.

In other words, for five seconds, the end user sees an empty input box.  Then the javascript kicks in and it changes to the datepicker.  It then works fine.

Is there a way to make it render more quickly in Chrome?  

The site is very simple - only two datepicker controls and two text boxes.  It was created as part of an aspnetcore site from the VS17 skeleton.

The site is running on Azure.

Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On August 11, 2017 06:32 AM

  
Hi Greg, 
Thanks for contacting Syncfusion Support. 
We have checked with your query. On initial rendering, if you have used large script file for your web site then it will take some time to load entire scripts during that time the HTML element of EJ DatePicker will appear in the webpage before its script gets loaded. To overcome this issue,please set the visibility as hidden to EJ DatePicker parent element and make it visible after the EJ DatePicker has been created. Please refer to the following code example:  
 
[cshtml] 
<div id="hiddenTag" style="visibility:hidden">  <!--hide the DatePicker div--> 
    <ej-date-picker id="DatePick" value="DateTime.Today" create="OnCreate"></ej-date-picker> 
</div> 
 
 
 
[scripts] 
<script> 
    function OnCreate() {  // DatePicker 'create' event  
        $("#hiddenTag").css("visibility", "visible"); //Show Case the DatePicker element  
    } 
</script> 
 
 
You can also make use of CSG to create own script files for the required controls. Custom Script Generator (CSG) will create a single file that packs together only the required scripts and CSS files together. This helps in reduce the script loading time or application loading time. Please follow the mentioned steps in the below link to use CSG. 
  
To generate custom script files please login by using the below link.  
Please, let us know if you need any further assistance. 
  
Regards, 
Shameer Ali Baig S. 


Greg Gum
Replied On August 11, 2017 03:23 PM

Hi Shameer,

I used the Custom Script Generator to generate a script for only the datepicker and used that instead of the "all" file.

The rendering is now extremely fast in Chrome and IE.

Thank you very much.

Greg


Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On August 14, 2017 01:09 AM

Hi Greg, 
 
Thanks for the update. We are happy to hear that the issue is resolved at your end. Please get back to us if you need any further assistance on this. 
 
Regards, 
Shameer Ali Baig 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.

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.

;