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 -->
<!-- Essential Studio for JavaScript script references -->
<!-- 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
