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: AllowVirtualScrolling

@Html.EJ().ListView("list").AllowVirtualScrolling(true)
.VirtualScrollMode(VirtualScrollMode.Continuous) 		Property: EnableVirtualization

@Html.EJS().ListView("list").DataSource((IEnumerable<object>)
ViewBag.dataSource).EnableVirtualization(true).Render()
Fields Property: FieldSettings

@Html.EJ().ListView("list").FieldSettings(e => e.Text("text")) 		Property: Fields

Inner properties: child, enabled, groupBy htmlAttributes, iconCss, id, isChecked etc.


@Html.EJS().ListView("list").DataSource((IEnumerable<object>)
ViewBag.dataSource).Fields(new Syncfusion.EJ2.Lists.ListViewFieldSettings { GroupBy="type"}).Render()
Template Property: RenderTemplate

@Html.EJ().ListView("list").RenderTemplate(true)
.TemplateId("template")

<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>"; }

@Html.EJS().ListView("list").DataSource((IEnumerable<object>)
ViewBag.dataSource).Template(template).Render()
Animation Not Applicable Property: Animation

List<object> animation = new List<object>();
animation.Add(new { effect = "SlideLeft", duration = "400", easing = "ease" });

@Html.EJS().ListView("list").DataSource((IEnumerable<object>)
ViewBag.dataSource).Animation(ViewBag.animation).Render()
Enable Not Applicable Property: Enable

@Html.EJS().ListView("list").DataSource((IEnumerable<object>)
ViewBag.dataSource).Enable(true).Render()
Template for grouping Not Applicable Property: GroupTemplate

@{ var groupTemplate = "<div class='template'>${text}</div>"; }

@Html.EJS().ListView("list").DataSource((IEnumerable<object>)
ViewBag.dataSource).GroupTemplate(groupTemplate).Render()
Template for header Not Applicable Property: HeaderTemplate

@{ var headerTemplate = "<div class='template'>${text}</div>"; }

@Html.EJS().ListView("list").DataSource((IEnumerable<object>)
ViewBag.dataSource).HeaderTemplate(headerTemplate).Render()
HTML attributes Not Applicable Property: HtmlAttributes

@{
IDictionary<string, object> htmlAttribute = new Dictionary<string, object>();
htmlAttribute.Add("class", "listViewCustom");
}

@Html.EJS().ListView("list").DataSource((IEnumerable<object>)
ViewBag.dataSource).HtmlAttributes(htmlAttribute).Render()
Clear Method: clear()

@Html.EJ().ListView("list").DataSource(ViewBag.data)

var listObj = $("#list").ejListView("instance");
listObj.clear(); 		Property clear

@Html.EJS().ListView("list").DataSource((IEnumerable<object>)
ViewBag.dataSource).Render()

var listObj = document.getElementById('list').ej2_instances[0];
listObj.clear();
isChecked Method: isChecked()

@Html.EJ().ListView("list").EnableCheckMark(true)

var listObj = $("#list").ejListView("instance");
listObj.isChecked(); 		Not Applicable
Load Ajax Content Property: EnableAjax

@Html.EJ().ListView("list").EnableAjax(true).Items(items => items.Add().Text("Data 1").Href("/html/template.html")) 		Event: onSuccess

@Html.EJS().ListView("list").ActionBegin("onBegin").Render()

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()

@Html.EJ().ListView("list").EnableCheckMark(true)

var listObj = $("#list").ejListView("instance");
listObj.removeCheckMark(2); 		Method: uncheckItem()

@Html.EJS().ListView("list").DataSource((IEnumerable<object>)
ViewBag.dataSource).Render()

var listObj = document.getElementById('list').ej2_instances[0];
listObj.uncheckItem({ id:'2' });
Set Active Method: setActive()

@Html.EJ().ListView("list").DataSource(ViewBag.data)

var listObj = $("#list").ejListView("instance");
listObj.setActive(2); 		Method: selectItem()

@Html.EJS().ListView("list").DataSource((IEnumerable<object>)
ViewBag.dataSource).Render()

var listObj = document.getElementById('list').ej2_instances[0];
listObj.selectItem({ id:'2' });
Select Not Applicable Event: select

@Html.EJS().ListView("list").DataSource((IEnumerable<object>)
ViewBag.dataSource).Select("onSelect").Render()

function onSelect() { }
Ajax Before Load Event: AjaxBeforeLoad

@Html.EJ().ListView("list").EnableAjax(true).Items(items => items.Add().Text("Data 1").Href("/html/template.html")).ClientSideEvents(e => e.AjaxBeforeLoad("onAjaxBefore"))

function onAjaxBefore() { } 		Event: beforeSend

@Html.EJS().ListView("list").ActionBegin("onBegin").Render()

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: AjaxComplete

@Html.EJ().ListView("list").EnableAjax(true).Items(items => items.Add().Text("Data 1").Href("/html/template.html")).ClientSideEvents(e => e.AjaxComplete("onAjaxComplete"))

function onAjaxComplete() { } 		Event: onSuccess

@Html.EJS().ListView("list").ActionBegin("onBegin").Render()

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: AjaxError

@Html.EJ().ListView("list").EnableAjax(true).Items(items => items.Add().Text("Data 1").Href("/html/template.html")).ClientSideEvents(e => e.AjaxError("onAjaxError"))

function onAjaxError() { } 		Event: onError

@Html.EJS().ListView("list").ActionBegin("onBegin").Render()

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();
}