Dependencies

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\17.2.0.28\ 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\17.2.0.28\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.

    Dependencies

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\17.2.0.28\ 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\17.2.0.28\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.

    Styles

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\17.2.0.28\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\17.2.0.28\JavaScript\assets\css\web\default-theme.

Step 2:

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

<!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.