Getting started in EJ2 JavaScript ListView control

7 May 202510 minutes to read

The Essential^® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers.

control Initialization

The Essential^® JS 2 JavaScript controls can be initialized by using either of the following ways.

Using local script and style references in a HTML page.
Using CDN link for script and style reference.

Using local script and style references in a HTML page

Step 1: Create an app foldermyapp for Essential^® JS 2 JavaScript controls.

Step 2: You can get the global scripts and styles from theEssential Studio^® JavaScript (Essential^® JS 2) build installed location.

Syntax:

Script:**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\dist\global\{PACKAGE_NAME}.min.js
Styles:**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\styles\material.css

Example:

Script:C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-lists\dist\global\ej2-lists.min.js
Styles:C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-lists\styles\material.css

The below located script and style file contains all Syncfusion^® JavaScript (ES5) UI control resources in a single file.

Scripts:**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js
Styles:**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\material.css

Step 3: Create a foldermyapp/resources and copy/paste the global scripts and styles from the above installed location tomyapp/resources location.

Step 4: Create a HTML page (index.html) inmyapp location and add the Essential^® JS 2 script and style references.

<!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>Essential JS 2 ListView</title><!-- Essential JS 2 material theme --><linkhref="resources/base/styles/material.css"rel="stylesheet"type="text/css"/><linkhref="resources/lists/styles/material.css"rel="stylesheet"type="text/css"/><!-- Essential JS 2 List's global and dependent scripts --><scriptsrc="resources/scripts/ej2-data.min.js"type="text/javascript"></script><scriptsrc="resources/scripts/ej2-base.min.js"type="text/javascript"></script><scriptsrc="resources/scripts/ej2-lists.min.js"type="text/javascript"></script></head><body></body></html>

Step 5: Now, add theListView element and initiate theEssential^® JS 2 ListView control in the index.html by using following code

<!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>Essential JS 2 ListView</title><!-- Essential JS 2 material theme --><linkhref="resources/base/styles/material.css"rel="stylesheet"type="text/css"/><linkhref="resources/lists/styles/material.css"rel="stylesheet"type="text/css"/><!-- Essential JS 2 List's global and dependent scripts --><scriptsrc="resources/scripts/ej2-data.min.js"type="text/javascript"></script><scriptsrc="resources/scripts/ej2-base.min.js"type="text/javascript"></script><scriptsrc="resources/scripts/ej2-lists.min.js"type="text/javascript"></script></head><body><!-- Add the HTML <div> element  --><divid='element'></div><script>//define the array of stringvararts=["Artwork","Abstract","Modern Painting","Ceramics","Animation Art","Oil Painting"];// Initialize Essential JS 2 JavaScript ListView controlvarlistviewInstance=newej.lists.ListView({//set the data to datasource propertydataSource:arts});//Render initialized ListViewlistviewInstance.appendTo("#element");</script></body></html>

Step 6: Now, run theindex.html in web browser, it will render theEssential^® JS 2 ListView control.

Using CDN link for script and style reference

Step 1: Create an app foldermyapp for the Essential^® JS 2 JavaScript controls.

Step 2: The Essential^® JS 2 control’s global scripts and styles are already hosted in the below CDN link formats.

Syntax:

Script:https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Styles:https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css

Example:

Script:https://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js
Styles:https://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css

Step 3: Create a HTML page (index.html) inmyapp location and add the CDN link references. Now, add theListView element and initiate theEssential^® JS 2 ListView control in the index.html by using following code.

//define the array of JSONvararts=[{text:'Artwork',id:'01'},{text:'Abstract',id:'02'},{text:'Modern Painting',id:'03'},{text:'Ceramics',id:'04'},{text:'Animation Art',id:'05'},{text:'Oil Painting',id:'06'}];//Initialize ListView controlvarlistviewInstance=newej.lists.ListView({//set the data to datasource propertydataSource:arts});//Render initialized ListViewlistviewInstance.appendTo("#element");

<!DOCTYPE html><htmllang="en"><head><title>Essential JS 2 for ListView</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metaname="description"content="Essential JS 2 for ListView UI Control"><metaname="author"content="Syncfusion"><linkhref="index.css"rel="stylesheet"><linkhref="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/material.css"rel="stylesheet"><linkhref="https://cdn.syncfusion.com/ej2/32.1.19/ej2-lists/styles/material.css"rel="stylesheet"><scriptsrc="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js"type="text/javascript"></script><scriptsrc="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"type="text/javascript"></script></head><body><divid="container"><divid="element"></div></div><script>varele=document.getElementById('container');if(ele){ele.style.visibility="visible";}</script><scriptsrc="index.js"type="text/javascript"></script><style>#element{display:block;max-width:350px;margin:auto;border:1pxsolid#dddddd;border-radius:3px;}</style></body></html>

#container{visibility:hidden;}#loader{color:#008cff;height:40px;width:30%;position:absolute;font-family:'Helvetica Neue','calibiri';font-size:14px;top:45%;left:45%;}

Step 4: Now, run theindex.html in web browser, it will render theEssential^® JS 2 ListView control.

Need to refer dependency control styles and scripts as like above example. We can also useCRG to generate combined control styles.

Movatterモバイル変換

Search docs