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