Dependencies

13 Jun 202324 minutes to read

Other than the above specified assemblies, Scripts and StyleSheets are the two essential requirements to render the Syncfusion components. The components mainly relies on the following 3 common libraries.

jQuery 1.7.1 and later versions
JsRender
jQuery.easing

jsRender script file is required to render the templates.

jQuery.easing script file is required, so as to support the animation effects in the components.

Scripts

All the required scripts for rendering a component is available in a minified format in the following specified location.

(installed location)\Syncfusion\Essential Studio\24.2.3\ JavaScript\assets

For example, If you have installed the Essential Studio package within C:\Program Files(x86), navigate to the below location.
C:\Program Files (x86)\Syncfusion\Essential Studio\24.2.3\JavaScript\assets
When you navigate to the above location, you can see the folder named external, where the common script libraries (like jQuery, jQuery.easing, JsRender, and so on) are available and in the scripts folder, the Syncfusion components UI scripts are available in a minified format. You can copy the required scripts from the location depicted below and use it in your application.

StyleSheet

The stylesheets required for supporting the theming and styling of the Syncfusion components (both mobile and web) is available in a minified format in the following specified location.

(installed location)\Syncfusion\Essential Studio\24.2.3\ JavaScript\assets\css

For example, If you have installed the Essential Studio package within C:\Program Files (x86), navigate to the following location,
C:\Program Files (x86)\Syncfusion\Essential Studio\24.2.3\JavaScript\assets\css
When you navigate to the above location, you can see 2 folders namely mobile and web. The mobile related CSS files are present within the mobile folder and all the CSS files related to web components are available within the web folder. You can copy the required CSS files from the location depicted below and use it in your application.

NOTE

From the 2018 Volume 2 release, the scripts and css files will be shipped in installed location based on platform. For example, C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript\24.2.3\JavaScript\assets\css

EJ Icon Package

The Essential Studio for JavaScript provides a set of icons that can be utilized in your application by applying the class names in element. To make it simple and standard, the EJ Icon class names are followed by “e-icon e-{icon name}“ syntax.

How to use EJ icons in your application?

Step 1:

To use the icon fonts in your application, you need to maintain the folder structure of the theme files and the corresponding images for icons.

You have to include the common-images folder in the specified theme folder for displaying icons and refer theme files in your application.

For example:

The “default-theme” folder CSS contains the “ej.widgets.all.min.css/ej.web.all.min.css” and “ej.theme.min.css” files. The “ej.widgets.core.min.css” file is outside the default theme folder as shown in the following:

Icons

Theme files are available in the following location:

(Installed location)\Syncfusion\Essential Studio\24.2.3\JavaScript\assets\css\web\default-theme.

Step 2:

The following example showcases to display the EJ Icon by using their corresponding class names.

HTML
CSS
<!doctype html>
<html>
<head>
    <title>Essential Studio for JavaScript : EJ Icon Package</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"  />
    <link href="Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" />
</head>
<body>
  <div class="icons">
   <ul>
     <li>
       <div class="e-icon e-search"></div>
     </li>
     <li>
       <div class="e-icon e-settings"></div>
     </li>
     <li>
       <div class="e-icon e-upload"></div>
     </li>
     <li>
       <div class="e-icon e-font"></div>
     </li>
   </ul>
   <ul>
      <li>
        <div class="e-icon e-indent"></div>
      </li>
      <li>
        <div class="e-icon e-outdent"></div>
      </li>
      <li>
        <div class="e-icon e-redo"></div>
      </li>
      <li>
        <div class="e-icon e-undo"></div>
      </li>
     </ul>
  </div>
</body>
</html>
<style type="text/css" class="cssStyles">
   div.icons li
        {
            display: inline-block;
            vertical-align: middle;
            padding: 20px;
            list-style: none;
           
        }
</style>

NOTE

Make sure the CSS file (ej.widgets.all.min.css/ej.web.all.min.css) is referred in your application.

Execute the above code to render the following output.

IconLibrary

Step 3:

The complete list of EJ icons are listed in the following table. You have to use the following class names prefix with e- in your application.

shrink	enlarge	key	list	list-numbered
list-numbered_01	indent	indent_01	outdent	outdent_01
close	close_01	undo	undo_01	redo
redo_01	video	video_01	cross-circle	clean-brush
delete-column	delete-column_01	delete-row	delete-row_01	insert-column-left
insert-column-left_01	insert-column-left_02	insert-column-right	insert-column-right_01	insert-column-right_02
insert-row-below	insert-row-below_01	insert-row-below_02	insert-row-above	insert-row-above_01
insert-row-above_02	table	table_01	table_02	sigma
sigma_01	uppercase	uppercase_01	lowercase	lowercase_01
background-color	superscript	superscript_01	subscript	subscript_01
restore	upload	download	save	save_01
save_02	mail/message	arrowhead-right	arrowhead-right_01	arrowhead-left
arrowhead-left_01	arrowhead-up	arrowhead-down	arrow-sans-right	arrow-sans-right_01
arrow-sans-left	arrow-sans-left_01	arrow-sans-up	arrow-sans-down	datetime
datetime_01	calendar	calendar_01	calendar-plus	calendar-edit
chevron-right	chevron-right_01	chevron-right_02	chevron-left	chevron-left_01
chevron-left_02	chevron-up	chevron-up_01	chevron-down	chevron-down_01
chevron-circle-right	chevron-circle-left	font	strikethrough	strikethrough_01
bold	bold_01	italic	italic_01	underline
underline_01	reply	forward	export	user
clipboard	home	clear	resize-handle	link
link_01	unlink	unlink_01	external-link	external-link_01
clock	settings	cut	cut_01	copy
copy_01	copy_02	paste	paste_01	star
pointer	sort direct	shopping cart	shopping cart_01	cursor
warning	zoom-out	zoom-out_01	zoom-out_02	zoom-in
zoom-in_01	zoom-in_02	arrow-circle-left	arrow-circle-left_01	arrow-circle-left_02
arrow-circle-right	arrow-circle-right_01	arrow-circle-right_02	arrow-circle-up	arrow-circle-down
edit	edit_01	edit_02	edit_03	edit_04
edit_05	notification	notification_01	info	smiley
check mark	check mark_01	media-play	media-pause	media-eject
media-next	media-previous	media-forward	media-forward_01	media-forward_02
media-forward_03	media-forward_04	media-backward	media-backward_01	media-backward_02
media-backward_03	media-backward_04	play-circle	full-screen-expand	full-screen-expand_01
full-screen-collapse	full-screen-collapse_01	bullets	bullets_01	filter
filter_01	filter none	filternone_01	filter-settings	align-right
align-right_01	align-left	align-left_01	align-justify	align-justify_01
align-center	align-center_01	align-none	search	search_01
image	image_01	plus	plus_01	minus
minus_01	code	e-code_01	code-hexagon	file-code
file-html	palette	reload	delete	delete_01
delete_02	delete_03	delete_04	delete_05	pin
unpin	stop	power-cord	full borders	3d
file-excel	file-text	file-text_01	file-mdx	file-empty
file-list	file-delete_01	file-settings	circle-square	diagonal-square
hexagon-square	pentagon-square	globe	globe_01	vertical-bar chart
vertical-bar chart_01	horizontal-bar chart	horizontal-bar chart_01	pie-chart	triangle
inverted-triangle	pyramid	inverted-pyramid	comments	folder
folder_01	folder-open	folder-open_01	folder-add	signal
sort-alpha-desc	sort-alpha-desc_01	sort-alpha-asc	sort-alpha-asc_01	print
print_01	print_02	print_03	word	word_01
word-export	PDF	PDF_01	pdf-export	excel
excel_01	excel-export	powerpoint-export	IE	exit
document	documents	question	film	volume-up
circle-one	circle-two	circle-three	circle-four	arrow-right
arrow-left	arrow-left_01	arrow-up	arrow-down	arrow-down_01
sync	sync-disabled	paper clip	paper clip_01	circle
circle_01	th-list	th-large	th	th-small
view-details	file-resize-four-direction	file-resize-horizontal

CDN

In case, if the users need to make use of the CDN links instead of the normal above specified scripts and stylesheet references in their application, then have a look at the link here.