Migration from Essential JS 1

17 Feb 20225 minutes to read

This article describes the API migration process of ListView component from Essential JS 1 to Essential JS 2

Behaviour API in Essential JS 1 API in Essential JS 2
Virtualization Property: allow-virtual-scrolling
<ej-list-view id="list" allow-virtual-scrolling="true" virtual-scroll-mode="Normal"></ej-list-view> 		Property: enableVirtualization
<ejs-listview id="list" dataSource="ViewBag.data" enableVirtualization="true"></ejs-listview>
Fields Property: fieldSettings
<ej-list-view enable-group-list=true>
<e-field-settings text="text"/>
</ej-list-view> 		Property: fields
Inner properties: child, enabled, groupBy htmlAttributes, iconCss, id, isChecked, isVisible, sortBy, tableName, text, tooltip.

<ejs-listview id="list" dataSource="ViewBag.data">
<e-listview-fieldsettings groupBy="category" />
</ejs-listview>
Template Property: render-template
<ej-list-view id="list" render-template="true" template-id="template"></ej-list-view>

<div id="template"><div>Data 1</div><div>Data 2</div><div>Data 3</div> </div> 		Property: template
@{ var template = "<div class='template'>${text}</div>"; }

<ejs-listview id="list" dataSource="ViewBag.data" template=@template />
Animation Not Applicable Property: animation
List<object> animation = new List<object>();
animation.Add(new { effect = "SlideLeft", duration = "400", easing = "ease" });

<ejs-listview id="list" dataSource="ViewBag.data" animation="ViewBag.animation" />
Enable Not Applicable Property: enable
<ejs-listview id="list" dataSource="ViewBag.data" enable="true" />
Template for grouping Not Applicable Property: groupTemplate
@{ var groupTemplate = "<div class='template'>${text}</div>"; }

<ejs-listview id="list" dataSource="ViewBag.data" groupTemplate="@groupTemplate" />
Template for header Not Applicable Property: headerTemplate
@{ var headerTemplate = "<div class='template'>${text}</div>"; }

<ejs-listview id="list" dataSource="ViewBag.data" headerTemplate="@headerTemplate" />
HTML attributes Not Applicable Property: htmlAttributes
@{
IDictionary<string, object> htmlAttribute = new Dictionary<string, object>();
htmlAttribute.Add("class", "listViewCustom");
}

<ejs-listview id="list" dataSource="ViewBag.data" htmlAttributes="htmlAttribute" />
Clear Method: clear()
<ej-list-view id="list" datasource="Model"></ej-list-view>

var listObj = $("#list").ejListView("instance");
listObj.clear(); 		Property dataSource
<ejs-listview id="list" dataSource="ViewBag.data" />

var listObj = document.getElementById('list').ej2_instances[0];
listObj.clear();
isChecked Method: isChecked()
<ej-list-view id="list" datasource="Model" enable-check-mark="true"></ej-list-view>

var listObj = $("#list").ejListView("instance");
listObj.isChecked(); 		Not Applicable
Load Ajax Content Property: enable-ajax
<ej-list-view id="list" enable-ajax="true">
<e-list-view-items>
<e-list-view-item href="/html/template.html" text="Data 1"></e-list-view-item>
</e-list-view-items>
</ej-list-view> 		Event: onSuccess
<ejs-listview id="list" actionBegin="onBegin" />

function onBegin() {
var ajax = new ejs.base.Ajax("/html/template.html", "GET", false);
ajax.onSuccess = function (value) {
var listObj = document.getElementById('list').ej2_instances[0];
listObj.template = value;
listObj.dataSource = @Json.Serialize(ViewBag.data);
}
ajax.send();
}
Remove CheckMark Method: removeCheckMark()
<ej-list-view id="list" enable-check-mark="true"></ej-list-view>
var listObj = $("#list").ejListView("instance");
listObj.removeCheckMark(2); 		Method: uncheckItem()
<ejs-listview id="list" dataSource="ViewBag.data" />

var listObj = document.getElementById('list').ej2_instances[0];
listObj.uncheckItem({ id:'2' });
Set Active Method: setActive()
<ej-list-view id="list"></ej-list-view>
var listObj = $("#list").ejListView("instance");
listObj.setActive(2); 		Method: selectItem()
<ejs-listview id="list" dataSource="ViewBag.data" />

var listObj = document.getElementById('list').ej2_instances[0];
listObj.selectItem({ id:'2' });
Select Not Applicable Event: select
<ejs-listview id="list" dataSource="ViewBag.data" select="onSelect" />

function onSelect() { }
Ajax Before Load Event: ajax-before-load
<ej-list-view id="list" enable-ajax="true" ajax-before-load="onAjaxBefore">
<e-list-view-items>
<e-list-view-item href="html/template.html" text="Data 1"></e-list-view-item>
</e-list-view-items>
</ej-list-view>

function onAjaxBefore() { } 		Event: beforeSend
<ejs-listview id="list" actionBegin="onBegin" />

function onBegin() {
var ajax = new ejs.base.Ajax("/html/template.html", "GET", false);
ajax.onSuccess = function (value) {
var listObj = document.getElementById('list').ej2_instances[0];
listObj.template = value;
listObj.dataSource = @Json.Serialize(ViewBag.data);
}
ajax.beforeSend = function (value) { }
ajax.send();
}
Ajax Complete Event: ajax-complete
<ej-list-view id="list" enable-ajax="true" ajax-complete ="onAjaxComplete">
<e-list-view-items>
<e-list-view-item href="html/template.html" text="Data 1"></e-list-view-item>
</e-list-view-items>
</ej-list-view>

function onAjaxComplete() { } 		Event: onSuccess
<ejs-listview id="list" actionBegin="onBegin" />

function onBegin() {
var ajax = new ejs.base.Ajax("/html/template.html", "GET", false);
ajax.onSuccess = function (value) {
var listObj = document.getElementById('list').ej2_instances[0];
listObj.template = value;
listObj.dataSource = @Json.Serialize(ViewBag.data);
}
ajax.send();
}
Ajax Error Event: ajax-error
<ej-list-view id="list" enable-ajax="true" ajax-error="onAjaxError">
<e-list-view-items>
<e-list-view-item href="html/template.html" text="Data 1"></e-list-view-item>
</e-list-view-items>
</ej-list-view>

function onAjaxError() { } 		Event: onError
<ejs-listview id="list" actionBegin="onBegin" />

function onBegin() {
var ajax = new ejs.base.Ajax("/html/template.html", "GET", false);
ajax.onSuccess = function (value) {
var listObj = document.getElementById('list').ej2_instances[0];
listObj.template = value;
listObj.dataSource = @Json.Serialize(ViewBag.data);
}
ajax.onError = function (value) { }
ajax.send();
}