Ej1 api migration in EJ2 JavaScript 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
$(“#list”).ejListView ({
dataSource: dataSrc,
allowVirtualScrolling: true,
virtualScrollMode: “normal”
});		 Property: enableVirtualization
let list: ListView = new ej.lists.ListView({
dataSource: data,
enableVirtualization: true
});
list.appendTo(‘#test);
Checkbox Property: enableCheckMark
$(“#list”).ejListView ({
dataSource: dataSrc,
enableCheckMark: true
});		 Property: showCheckBox
let list: ListView = new ej.lists.ListView({
dataSource: data,
showCheckBox: true
});
list.appendTo(‘#test);
Fields Property: fieldSettings
enableGroupList [
<ul data-ej-grouplisttitle="Settings"></ul>
]
$(“#list”).ejListView ({
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 ej.lists.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>
$(“#list”).ejListView ({
dataSource: dataSrc,
renderTemplate: true
});		 Property: template
let list: ListView = new ej.lists.ListView({
dataSource: data,
template: “<div>string template</div>”
});
list.appendTo(‘#test);
Animation Not Applicable Property: animation
let list: ListView = new ej.lists.ListView({
dataSource: data,
aninmation: { effect: ‘SlideLeft’, duration: 400, easing: ‘ease’ }
});
list.appendTo(‘#test);
Enable Not Applicable Property: enable
let list: ListView = new ej.lists.ListView({
dataSource: data,
enable: true
});
list.appendTo(‘#test);
Template for grouping Not Applicable Property: groupTemplate
let list: ListView = new ej.lists.ListView({
dataSource: data,
groupTemplate: ‘group template string’
});
list.appendTo(‘#test);
Template for header Not Applicable Property: headerTemplate
let list: ListView = new ej.lists.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 ej.lists.ListView({
dataSource: data,
htmlAttributes: this.attribute
});
list.appendTo(‘#test);
Clear Method: clear()
$(“#list”).ejListView({dataSource: dataSrc });
$(“#lb”).ejListView(“clear”);		 Property dataSource
let emptyDataSrc: { [key: string]: Object }[] = [];
let list: ListView = new ej.lists.ListView({
dataSource: emptyDataSrc,
});
list.appendTo(‘#test);
list.destory();
IsChecked Method: isChecked()
$(“#list”).ejListView({enableCheckMark:true});
$(“#lb”).ejListView(“isChecked”);		 Method: checkItem()
let list: ListView = new ej.lists.ListView({
dataSource: data,
});
list.appendTo(‘#test);
list.checkItem({id:’2’});
Load Ajax Content Method: loadAjaxContent()
$(“#list”).ejListView ({ enableAjax: true });
$(“#list”).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 ej.lists.ListView({
dataSource: data,
template: template,
headerTitle: ‘Settings’,
showHeader: true
});
list.appendTo(‘#element’);
Remove CheckMark Method: removeCheckMark()
$(“#list”).ejListView({enableCheckMark:true});
$(“#list”).ejListView(“removeCheckMark”,2);		 Method: uncheckItem()
let list: ListView = new ej.lists.ListView({
dataSource: data,
});
list.appendTo(‘#test);
list. uncheckItem ({id:’2’})
Set Active Method: setActive()
$(“#list”).ejListView({persistSelection:true});
$(“#list”).ejListView(“setActive”,2);		 Method: selectItem()
let list: ListView = new ej.lists.ListView({
dataSource: data,
});
list.appendTo(‘#test);
list.selectItem({id:’2’})
Select Not Applicable Event: select
let list: ListView = new ej.lists.ListView({
select: function(e: Event): void { }
});
list.appendTo(‘#test);
Ajax Before Load Event: ajaxbeforeLoad
$(“#list”).ejListView({
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 ej.lists.ListView({
dataSource: data,
template: template,
headerTitle: ‘Settings’,
showHeader: true
});
list.appendTo(‘#element’);
Ajax Complete Event: ajaxComplete
$(“#list”).ejListView({
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 ej.lists.ListView({
dataSource: data,
template: template,
headerTitle: ‘Settings’,
showHeader: true
});
list.appendTo(‘#element’);
Ajax Error Event: ajaxError
$(“#list”).ejListView({
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 ej.lists.ListView({
dataSource: data,
template: template,
headerTitle: ‘Settings’,
showHeader: true
});
list.appendTo(‘#element’);