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. Image for the cookie policy date

Help page is confusing on which js files to include MVC 5

Hi, in the help page on getting started there are 3 conflicting set of instructions on which files to include. I am creating a
2 sections in the Bundle, one general for all SF controls and another only Grid, and tree grid. I am using this help page https://help.syncfusion.com/aspnetmvc/getting-started which is contradicting itself as you keep following the ASP MVC 5 path.

In some sections it says I need only one web.all..., while in another further down section its says responsive is mandatory in another place

<link rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.web.all.min.css" rel="stylesheet" />
<link rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/responsive-css/ej.responsive.css" rel="stylesheet" />


Scripts bottom of Page before closing body in once again some confusion.

<script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>
<script
src="~/lib/syncfusion-javascript/Scripts/jsrender.min.js"></script> <script src="~/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js"></script>

My question is as follows
  1. Which styles/scripts and CSS are mandatory for all controls?
  2. Which styles/scripts are mandatory for only Grid , TreeGrid?
  3. do I need to include grid-responsive as well?
  4. Are these cascading includes, for e.g. does the main responsive include the grid responsive?
  5. what boot strap classes is it expecting?


Thanks in advance.





10 Replies

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team February 15, 2017 05:52 PM UTC

Hi Megatron, 


Thanks for contacting syncfusion support. 


To render the syncfusion controls in your application with styles and themes, you need to know the difference between referring individual scripts and boiler plate script. 


Method :-1 
 

1.        To get started, you can use the “ej.web.all.min.js file that encapsulates all the ej controls and frameworks in one single file.  
 
2.        Adding the required JavaScript files into your application plays an important role, without which the Syncfusion controls cannot be created. It requires the following mandatory common script files, 
                 jquery-3.1.1.min.js 
                         jquery.globalize.min.js 
                 jsrender.min.js 
 
 
The complete boilerplate script code be like 
 
<head> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="Essential Studio for JavaScript"> 
    <meta name="author" content="Syncfusion"> 
    <title></title> 
    <!-- Essential Studio for JavaScript  theme reference --> 
    <link rel="stylesheet" rel='nofollow' href="http://cdn.syncfusion.com/13.2.0.29/js/web/flat-azure/ej.web.all.min.css" /> 
 
    <!-- Essential Studio for JavaScript  script references --> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <!-- Add your custom scripts here --> 
 
</head> 
<body> 
 
</body> 
</html> 

Method:-2 # Individual Scripts reference 


Instead of referring ej.web.all.min.js” , you can refer the individual script files to render the syncfusion controls. 
 
Please refer to this document for referring the individual grid dependencies  
 
 
 
Replace the ej.web.all.min.js  with the dependencies file. For example refer ej.grid.min.js and ej.treegrid.min.js file  along with the dependencies file like ej.core.min.js,  ej.data.min.js etc.. files mentioned in the  above link to render Grid and treeGrid control when you use the individual script file otherwise you can use ej.web.all.min alone to render the control. 
 
 
Responsive:- 
 
 
The grid control has support for responsive behavior based on client browser’s width. To render the Grid control responsive, enable responsive. To enable responsive, isResponsive property should be true. Min Width is used to maintain minimum width for the Grid. To enable Min Width, minWidth should be defined. If the grid width is less than minWidth then the scrollbar will be displayed to maintain minimum width. 
 
 
Please refer to the UG documentation about responsive and minWidth:- 
 
 
 
 
 
To render the grid control appropriately in mobile devices, ejgrid.responsive.css file needs to be referred separately along with the other CSS and script file references. When we refer the ej.grid. responsive file , we  can able to set the priority for the columns. 

 
 
 
You need to refer these files for responsive:- 
 
 
 
     
     
 
CSG:- 
 
You can use customScript Generator  to create custom script file with required controls and its dependencies only. Please refer to the link about CSG  



From this you can also create the control based script files  by select the checkbox on the corresponding control  (for example ej.Grid )in the desktop tab and select the output file either to be generate as minified or non-minified and finally click on the Generate button. Thus you can generate the script and theme files required for the control. 


Bootstrap theme:- 
 
 
When we apply our bootstrap theme for the Syncfusion widgets, its CSS styles will not be overridden by the bootstrap layout. For bootstrap, you can get it from the below mentioned location. 
 
 
(Installed location)\Syncfusion\Essential Studio\15.1.0.33\ JavaScript\samples\web\content\bootstrap.min.css 
 
 
Please get back to us if you need any further assistance. 
 
 
Regards, 

Farveen sulthana T  



ME Megatron February 15, 2017 07:51 PM UTC

so looks like separate CSS for mobile, and the responsive will be auto referred in the global css is that correct?

In code , how to detect if mobile and change the CSS for that


ME Megatron February 16, 2017 08:48 AM UTC

Hi when do you need to include Ej Widgets - I think it will be helpful if you can include a picture showing which scenarios need which files, like  MindMap or FLowchart.


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team February 16, 2017 06:39 PM UTC

Hi Magetron, 


If you want to render the mobile grid, we have the separate framework in our syncfusion control. You need to refer the same css files as like that of Grid. There is no separate CSS files to render the mobile grid. All of our syncfusion controls has same css reference file. If you need to render the grid inside the mobile devices , please refer to the following documentation link for mobile grid. 






Also please refer to the online demo link:- 



Regards, 


Farveen sulthana T. 



ME Megatron February 21, 2017 12:42 AM UTC

Mr Farveen,

Your answers do not really correspond to the question I asked, and hard to follow, they're more cut and paste from the help page, which I have already read!

I asked "when do you need to include Ej Widgets" - a Little flow chart on if these SF controls & mobile, then include these files or, if all controls then include this... would help or at least one definite page
In the browser I get errors from JS lint, like widgets from obtrusive

For e.g. In some help samples I have received previously, some include both (the CSS and JS) ej.widgets & ej.web.all.js, while others only include the ej.web.all.js, and I get both in the nuget add.

Thanks


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team February 21, 2017 04:52 PM UTC

Hi  Megatron, 

Query # 1:- Which styles/scripts and CSS are mandatory for all controls? 
 
To render the syncfusion controls in your application with styles and themes, the following files you need to refer  
 

1.        To get started, you can use the “ej.web.all.min.js file that encapsulates all the ej controls and frameworks in one single file. So ej.web.all.min.js file need to be refer in your script section. 
 
2.        Adding the required JavaScript files into your application plays an important role, without which the Syncfusion controls cannot be created. It requires the following mandatory common script files, 
                 jquery-3.1.1.min.js 
                 jsrender.min.js 
 
       3.    To include CSS  in your application to render syncfusion control, you have to refer “ej.web.all.min.css” file. By referring  this file you can get  necessary themes for our controls .You can get this “ej.web.all.min.css” file from the below build location. 
 
 
     (installed location)\Syncfusion\Essential Studio\15.1.0.33\ JavaScript\assets\css\web\default-theme 
 
 
The complete boilerplate script code be like 
 
<head> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="Essential Studio for JavaScript"> 
    <meta name="author" content="Syncfusion"> 
    <title></title> 
    <!-- Essential Studio for JavaScript  theme reference --> 
    <link rel="stylesheet" rel='nofollow' href="http://cdn.syncfusion.com/15.1.0.33/js/web/flat-azure/ej.web.all.min.css" /> 
 
    <!-- Essential Studio for JavaScript  script references --> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <!-- Add your custom scripts here --> 
 
</head> 
<body> 
 
</body> 
</html> 


Please refer to the getting Started document :- 

 
Query#2:- Which styles/scripts are mandatory for only Grid , TreeGrid? 
 
You can refer “ej.web.all.min.js” file to render both Grid and TreeGrid.  Otherwise instead of referring ej.web.all.min.js” , you can also refer the individual script files to render the individual syncfusion control. 
Replace the ej.web.all.min.js  with the dependencies file. For example refer ej.grid.min.js and ej.treegrid.min.js file  along with the dependencies file like ej.core.min.js,  ej.data.min.js etc.. files mentioned in the  below link to render Grid and treeGrid control when you use the individual script file otherwise you can use ej.web.all.min alone to render the control 
 
 
Please refer to this document for referring the individual grid dependencies   
 
In this below link, under the internal dependencies section, you can find those file. 
 
 

Under the Requires section you can get the dependencies file 

 
 
Also you can get the script files from the below mentioned build location. 
 
(installed location)\Syncfusion\Essential Studio\15.1.0.33\ JavaScript\assets\scripts\web 
 
 
CSG:- 
 
You can use customScript Generator  to create custom script file with required controls and its dependencies file . Please refer to the link about CSG  


From this you can also create the control based script files  by select the checkbox on the corresponding control  (for example ej.Grid )in the desktop tab and select the output file either to be generate as minified or non-minified and finally click on the Generate button. Thus you can generate the script and theme files required for the control. 

Query#3 and #4:- Do I need to include grid-responsive as well? Are these cascading includes, for e.g. does the main responsive include the grid responsive? 
 
No, you need not refer responsive files to render grid control. To render the grid control appropriately in mobile layout, ej.grid.responsive.css file is be referred separately along with the other CSS and script file references. It can be enabled by defining “enableResponsiveRow” property as true.  
 

Please refer the link about enableResponsive row:- 
 
 
 
When we refer the ej.grid.responsive file , we  can able to set the priority for the columns. 
 
 
 
You need to refer these files for responsive:- 
 
 
 
 
You need to include the responsive files to make the grid responsive. To render the Grid control responsive, enable responsive. To enable responsive, isResponsive property should be true. Min Width is used to maintain minimum width for the Grid. To enable Min Width, minWidth should be defined. If the grid width is less than minWidth then the scrollbar will be displayed to maintain minimum width. 
 
 
Please refer to the UG documentation about responsive and minWidth:- 
 
 
 
 
Query# 5:- What boot strap classes is it expecting?. 
 
Bootstrap theme is not necessary to render the syncfusion control.ie. syncfusion controls are not dependent on bootstrap theme. However, our controls do support bootstrap. When we apply our bootstrap theme for the Syncfusion widgets, its CSS styles will not be overridden by the bootstrap layout. For that purpose bootstrap theme has been used. If you want bootstrap file, you can get it from the below mentioned location. 
 
 
(Installed location)\Syncfusion\Essential Studio\15.1.0.33\ JavaScript\samples\web\content\bootstrap.min.css 
 

Query#6 :-When do you need to include Ej Widgets 
 
 
If you want to use both syncfusion web control and mobile control, you need to refer “ej.widget.all.min.js” file. Instead when you use all syncfusion web (desktop)controls “ej.web.all.min.js” file is enough and for  all  mobile controls you can use “ej.mobile.all.min.js” file separately. Otherwise if you want to render individual controls, please check response  about individual script reference and CSG on query#2. 


Please get back to us if you need any further assistance. 


Regards, 

Farveen sulthana T 



ME Megatron February 24, 2017 12:59 AM UTC

So including ej.web.min includes everything else correct?

What is the difference between ej.unobtrusive.min.js vs jquery.unobtrusive, and microsoft ajax jquery?
If I am using the jquery or microsoft version, do I still need to include this. In the diff of the files I see many similar functions.


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team February 25, 2017 06:46 AM UTC

Hi Megatron, 


Query#1:- So including ej.web.min includes everything else correct? 
 
 
Yes, Including  ej.web.min.js” file is necessary to render our syncfusion control as explained in the previous update. 

  
Query#2:- What is the difference between ej.unobtrusive.min.js vs jquery.unobtrusive, and microsoft ajax jquery? 
 
 
ej.unobtrusive and jquery.unobtrusive are nothing but just similar ones. Microsoft ajax jquery is CDN providers. 


Refer the link about Microsoft Ajax jquery:- 



 
Please refer to the help document:- 





If you want to render the Grid with partialView you can either use unobtrusive and non-unobtrusive mode. If we are rendering partial view with non-unobtrusive mode, then we need to add Syncfusion ScriptManager in the corresponding partial view. there is no need to refer the ScriptManager(). Please refer to the below help document:-  




Please get back to us if you need any further assistance. 


Regards, 

Farveen sulthana T 



ME Megatron February 28, 2017 04:00 AM UTC

Hi if I use jquery.unobtrusive then I do not need to use ej.unobtrusive? also microsoft has another unobtrusive with their Ajax helpers, if you search on nuget or add any of ms winjs compnents along side it adds that unotrusive.

Base on your reply I will use only jquery.unobtrusive and that should be fine correct?


TS Thavasianand Sankaranarayanan Syncfusion Team March 1, 2017 02:00 PM UTC

Hi Megatron, 

We have analyzed your query and “jquery.unobtrusive.js” file is for jquery validation in the unobtrusive mode in the project. Similarly for the Syncfusion controls we have the “ej.unobtrusive.min.js” file to render ej conrols in unobtrusive. So, both are different. 

In the previous update we have updated wrongly. So, sorry for the inconvenience caused. 

We need to refer “ej.unobtrusive.min.js” in unobtrusive project. 

Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon