ASP.NET Core
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

EJ1 Migration in ASP.NET Core ListView control

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