Disable embedded resources and merge the js and css files

[Christian]

Hi guys,


We are using Telerik  ASP.NET Ajax Controls for some time without embedded resources by setting the appropriate configuration settings:


<add key="Telerik.EnableEmbeddedSkins" value="false"/>

<add key="Telerik.EnableEmbeddedBaseStylesheet" value="false"/>

<add key="Telerik.EnableEmbeddedScripts" value="false"/>        

 

We have only one JavaScript file, Telerik.js , that contains all java script files for all controls and one .css file, Common.css,  that contains all common styles for all controls. For each skin, we create a single css file with all  controls styles for that skin.

Our problem is when we update the Telerik framework, because we have to regenerate the files mentioned above. It seems that although we are following
the order specified in the documentation bellow,

http://www.telerik.com/help/aspnet-ajax/introduction-disabling-embedded-resources.html

when merging the java script files, we end up with Java Script errors.

We are looking for some help regarding the merging procedure or eventually a tool that, for instance, we’ll let us select the controls we want to use and will generate a single .js file  with all the scripts, and single .css file with all common styles.
 

Best regards,
Dan Ciobanu

[Slav]

Hi Dan,

If you do not want to use the resources that are embedded in the Telerik.Web.UI assembly and you disabled them as described in the help article you linked, it is recommended to add a script reference for each of the JavaScript files that are needed by the Telerik controls.

It is important to reference the exact same files that are listed for each control in the help article, because they will be easier to upgrade when a new version comes out instead of generating a new common file on each upgrade.

Also, as mentioned in the help article, the order in which the files are referenced needs to be kept, because there are dependencies between some of the files, which you could break when you place all scripts in a single file.

Overall, the merging of the resource files is a customization and it is not supported. I would recommend using the approach that is suggested in the documentation.

If there is a specific reason for merging the files, you could describe it so that I can suggest an alternative approach is such is possible.

Regards,
Slav
Telerik

 

 

[Christian]

Hi Slav,

We have tried also to use the approach suggested in documentation, but we end up with some errors as you can see in the attached files. The screenshots are from Chrome Developer Tools.

We've investigated the issue and found out that there are 2 files mentioned in the documentation that cannot be found in the Telerik package:

ListView/RadListViewDragScript.js
Grid/GridCellSelection.js

Other two files are there, but with the wrong name


AsyncUpload/RadAsyncUpload.js which should be AsyncUpload/RadAsyncUploadScripts.js

OrgChart/RadOrgChart.js  which should be OrgChart/RadOrgChartScripts.js 

Also, we had to include 

Common/jQueryInclude.js
Common/jQueryExternal.js

but it seems there are still files that are missing.

Merging all files in one js file, respecting the order from documentation and adding each file only once, should be the same as including them one by one using Script tags. 
We prefer one file, because for slower networks loading 1 file performs better than 60-70 files.

Best regards,
Dan Ciobanu

[Slav]

Hello Christian,

Indeed, it appears that some of the information in the Combining External Scripts help article is outdated. You are correct about the script files of AsyncUpload and OrgChart. As for the ListView and Grid controls, their script references need to be replaced as shown below:
RadListViewDragScript.js becomes RadListViewItemDragScript.js
GridCellSelection.js is replaced with GridCellSelection/Desktop.js and GridCellSelection/Mobile.js

The error with Scheduler that is shown in your screenshot most probably originates from the order of the script file registrations needed by the control, which is also changed. We will review the information in the help article in order to update the information about registering the script files and you will be notified when this task is completed.

Until the article is updated you could temporary use the scripts embedded in Telerik.Web.UI or you could clarify why your scenario requires manual registration of the scripts of the Telerik controls, so that I can suggest an alternative approach if such is possible.

The advantage of registering the script files separately is that when a new version comes out, you can update only by replacing the files. Even if there are scripts that need to be reordered, you can do so just by changing the location of the script reference. In case all scripts are located in a single file, however, you need to check for the order of the scripts each time you generate it when upgrading the Telerik controls.

Please accept my apologies for the caused inconvenience.

Regards,

Slav
Telerik

 

 

[Christian]

Thanks Slav,

I'd like to clarify our decision to use non embedded scripts and merge them in one .js file. The main reason is the network transfer optimization. 
We took this decision  back in 2010 because we had some customers that needed to access our app from locations with slow network transfer.  We found out that  this approach with one file will improve the application response time, except the first  round trip that was caching the big .js file.

We'll test again and compare the response times for embedded and non-embedded(with file merge) scenarios. If the results are very close we'll get back to using embedded resources.

Regards,
Dan 

[Slav]

Hello Dan,

In this case there are two alternative approaches that I can suggest:

• Enable the Telerik CDN as described in the following help article: http://www.telerik.com/help/aspnet-ajax/scriptmanager-cdn-support.html. The reduced latency, the compressed files and the caching should help you with the optimization.
  
  In addition, you can configure the RadScriptManager and RadStyleSheetManager controls to request a combined script file and a combined base style sheet file from CDN. For this purpose you can either enable the combined CDN resources per page:
  

  <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
      <CdnSettings TelerikCdn="Enabled" CombinedResource="Enabled" />
  </telerik:RadScriptManager>
  <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
      <CdnSettings TelerikCdn="Enabled" CombinedResource="Enabled" />
  </telerik:RadStyleSheetManager>

  or you could add the following keys in the appSettings section of web.config to enable the combined CDN resources for the whole application:

  <appSettings>
    <add key="Telerik.ScriptManager.TelerikCdn" value="Enabled" />
    <add key="Telerik.StyleSheetManager.TelerikCdn" value="Enabled" />
    <add key="Telerik.EnableEmbeddedBaseStylesheet" value="false" />
    <add key="Telerik.EnableEmbeddedScripts" value="false"/>
    <add key="Telerik.ScriptManager.TelerikCdn.CombinedScript" value="Enabled" />
    <add key="Telerik.StyleSheetManager.TelerikCdn.CombinedBaseSkin" value="Enabled" />
  </appSettings>

• The second approach is to use RadScriptManager and RadStyleSheetManager without enabled CDN to load the scripts and styles that are embedded in the Telerik assemblies. By default these controls combine the requests for all styles and scripts into a single styles request and a single script request, which should also be useful in your case:

  <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
  </telerik:RadScriptManager>
  <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
  </telerik:RadStyleSheetManager>

Regards,
Slav
Telerik

 

 

[Christian]

Thanks Slav,

We'll try your suggestions and chose whats more appropriate for us.

Best regards,
Dan Ciobanu