Ej1 api migration in EJ2 TypeScript ListView control

28 Jan 20255 minutes to read

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

Behavior API in Essential JS 1 API in Essential JS 2
Virtualization Property: allowVirtualScrolling
var listObj = new ej.ListView($(“#list”),{
dataSource: dataSrc,
allowVirtualScrolling: true,
virtualScrollMode: “normal”
});		 Property: enableVirtualization
let list: ListView = new ListView({
dataSource: data,
enableVirtualization: true
});
list.appendTo(‘#test’);
Checkbox Property: enableCheckMark
var listObj = new ej.ListView($(“#list”),{
dataSource: dataSrc,
enableCheckMark: true
});		 Property: showCheckBox
let list: ListView = new ListView({
dataSource: data,
showCheckBox: true
});
list.appendTo(‘#test’);
Fields Property: fieldSettings
enableGroupList [
<ul data-ej-grouplisttitle="Settings"></ul>
]
var listObj = new ej.ListView($(“#list”),{
dataSource: dataSrc,
fieldSettings:{‘text’:’textfield’},
enableGroupList: true
});		 Property: fields
Inner properties: child, enabled, groupBy htmlAttributes, iconsCss, id, isChecked, isVisible, sortBy, tableName, text, tooltip
let list: ListView = new ListView({
dataSource: data,
fields: { enabled: enable_item, groupBy: groupByProp,…}
});
list.appendTo(‘#test’);
Template Property: renderTemplate
<div id="lb">
<ul>
<li data-ej-templateid="target1"></li>
<li data-ej-templateid="target2"></li>
<li data-ej-templateid="target3"></li>
</ul>
</div>
<div id="target1">
<div> Template1 </div>
</div>
<div id="target2">
<div> Template2 </div>
</div>
<div id="target3">
<div> Template3 </div>
</div>
var listObj = new ej.ListView($(“#list”),{
dataSource: dataSrc,
renderTemplate: true
});		 Property: template
let list: ListView = new ListView({
dataSource: data,
template: “<div>string template</div>”
});
list.appendTo(‘#test’);
Animation Not Applicable Property: animation
let list: ListView = new ListView({
dataSource: data,
animation: { effect: ‘SlideLeft’, duration: 400, easing: ‘ease’ }
});
list.appendTo(‘#test’);
Enable Not Applicable Property: enable
let list: ListView = new ListView({
dataSource: data,
enable: true
});
list.appendTo(‘#test’);
Template for grouping Not Applicable Property: groupTemplate
let list: ListView = new ListView({
dataSource: data,
groupTemplate: ‘group template string’
});
list.appendTo(‘#test’);
Template for header Not Applicable Property: headerTemplate
let list: ListView = new ListView({
dataSource: data,
headerTemplate: ‘header template string’
});
list.appendTo(‘#test’);
HTML attributes Not Applicable Property: htmlAttributes
var attribute = {id: ‘list_id’, class: ‘.list_test’}
let list: ListView = new ListView({
dataSource: data,
htmlAttributes: this.attribute
});
list.appendTo(‘#test’);
Clear Method: clear()
var listObj = new ej.ListView($(“#list”),{dataSource: dataSrc });
listObj.ejListView(“clear”);		 Property dataSource
let emptyDataSrc: { [key: string]: Object }[] = [];
let list: ListView = new ListView({
dataSource: emptyDataSrc,
});
list.appendTo(‘#test’);
list.destory();
IsChecked Method: isChecked()
var listObj = new ej.ListView($(“#list”),{
enableCheckMark:true
});
listObj.ejListView(“isChecked”);		 Method: checkItem()
let list: ListView = new ListView({
dataSource: data,
});
list.appendTo(‘#test’);
list.checkItem({id:’2’});
Load Ajax Content Method: loadAjaxContent()
var listObj = new ej.ListView($(“#list”),{
enableAjax: true
});
listObj.ejListView(“loadAjaxContent”,”load1.html”);		 Event: onSuccess
let template: string;
let ajax: Ajax = new Ajax(‘./template.html’, ‘GET’, false);
ajax.onSuccess= (e: string)=>{
template = e;
}
ajax.send();
let list: ListView = new ListView({
dataSource: data,
template: template,
headerTitle: ‘Settings’,
showHeader: true
});
list.appendTo(‘#element’);
Remove CheckMark Method: removeCheckMark()
var listObj = new ej.ListView($(“#list”),{
enableCheckMark:true
});
listObj.ejListView(“removeCheckMark”,2);		 Method: uncheckItem()
let list: ListView = new ListView({
dataSource: data,
});
list.appendTo(‘#test’);
list. uncheckItem ({id:’2’})
Set Active Method: setActive()
var listObj = new ej.ListView($(“#list”),{
persistSelection:true
});
$(“#list”).ejListView(“setActive”,2);		 Method: selectItem()
let list: ListView = new ListView({
dataSource: data,
});
list.appendTo(‘#test’);
list.selectItem({id:’2’})
Select Not Applicable Event: select
let list: ListView = new ListView({
select: function(e: Event): void { }
});
list.appendTo(‘#test’);
Ajax Before Load Event: ajaxbeforeLoad
var listObj = new ej.ListView($(“#list”),{
enableAjax: true,
ajaxBeforeLoad: function (args) { }
});		 Event: onSuccess
let template: string;
let ajax: Ajax = new Ajax(‘./template.html’, ‘GET’, false);
ajax.onSuccess= (e: string)=>{
template = e;
}
ajax.beforeSend();
let list: ListView = new ListView({
dataSource: data,
template: template,
headerTitle: ‘Settings’,
showHeader: true
});
list.appendTo(‘#element’);
Ajax Complete Event: ajaxComplete
var listObj = new ej.ListView($(“#list”),{
enableAjax: true,
ajaxComplete: function (args) {}
});		 Event: onSuccess
let template: string;
let ajax: Ajax = new Ajax(‘./template.html’, ‘GET’, false);
ajax.onSuccess= (e: string)=>{
template = e;
}
ajax.send();
let list: ListView = new ListView({
dataSource: data,
template: template,
headerTitle: ‘Settings’,
showHeader: true
});
list.appendTo(‘#element’);
Ajax Error Event: ajaxError
var listObj = new ej.ListView($(“#list”),{
enableAjax: true,
ajaxError: function (args) {}
});		 Event: onError
let template: string;
let ajax: Ajax = new Ajax(‘./template.html’, ‘GET’, false);
ajax.onError = (e: string)=>{
template = e;
}
ajax.send();
let list: ListView = new ListView({
dataSource: data,
template: template,
headerTitle: ‘Settings’,
showHeader: true
});
list.appendTo(‘#element’);