EJ1 API migration in Angular ListView component

12 Sep 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
<ej-listview [dataSource]="data" [allowVirtualScrolling]='true' [virtualScrollMode]='normal' ></ej-listview> 		Property: enableVirtualization
<ejs-listview [dataSource]='data' [enableVirtualization]='true'></ejs-listview>
Checkbox Property: enableCheckMark
<ej-listview [dataSource]='data' [enableCheckMark]='true' ></ej-listview> 		Property: showCheckBox
<ejs-listview [dataSource]='data' [showCheckBox]='true'></ejs-listview>
Fields Property: fieldSettings
<ej-listview [dataSource]="data" [fieldSettings]="fieldsdata" [enableGroupList]="true"></ej-listview>

public fieldsdata = {text: 'textfield'}; 		Property: fields
<ejs-listview [dataSource]='data' [fields]='fieldsdata '></ejs-listview>

public fieldsdata = {enabled: 'enable_item', groupBy: 'groupByProp'};
Template Property: renderTemplate
<ej-listview [dataSource]='data' [renderTemplate]='true'>
<div>ddd</div>
</ej-listview > 		Property: template
<ejs-listview [dataSource]='data'>
<ng-template #template let-data="">
<div>string template</div>
</ng-template>
</ejs-listview>
Animation Not Applicable Property: animation
<ejs-listview [dataSource]='data' [animation]='aninmation'></ejs-listview>

public animation = { effect: 'SlideLeft', duration: 400, easing: 'ease' };
Enable Not Applicable Property: enable
<ejs-listview [dataSource]='data' [enable]="true"></ejs-listview>
Template for grouping Not Applicable Property: groupTemplate
<ejs-listview [dataSource]='data' [fields]='fieldsdata'>
<ng-template #groupTemplate let-data="">
<div>group template</div>
</ng-template>
</ejs-listview>

public fieldsdata = {groupBy: 'groupByProp'};
Template for header Not Applicable Property: headerTemplate
<ejs-listview [dataSource]='data' [showHeader]="true >
<ng-template #headerTemplate let-data="">
<div>header template</div>
</ng-template>
</ejs-listview>
HTML attributes Not Applicable Property: htmlAttributes
<ejs-listview [dataSource]='data' [htmlAttributes]="attribute" ></ejs-listview>

public attribute = {id: 'list_id', class: 'list_test'};
Clear Method: clear()
<ej-listview [dataSource]='data' #listViewInstance></ej-listview>

this.listViewInstance.widget.clear() 		Property dataSource
<ejs-listview [dataSource]='data' #listViewInstance></ejs-listview>

public data: [key: string]: Object }[] = [];
this.listViewInstance.destroy()
IsChecked Method: isChecked()
<ej-listview [dataSource]='data' #listViewInstance [enableCheckMark]='true'></ej-listview>

this.listViewInstance.widget.isChecked(2); 		Method: checkItem()
<ejs-listview [dataSource]='data' [showCheckBox]='true'></ejs-listview>

public isChecked(li: HTMLLIElement): boolean
{
return li.classList.contains('e-active');
}
Load Ajax Content Method: loadAjaxContent()
<ej-listview [dataSource]='data' #listViewInstance [enableAjax]='true'></ej-listview>

this.listViewInstance.widget.loadAjaxContent('load1.html'); 		Event: onSuccess
<ejs-listview [dataSource]='data' [template]="template"></ejs-listview>

public template: string;<br /> public ajax: Ajax = new Ajax('./template.html', 'GET', false);<br /> this.ajax.onSuccess= (e: string)=>{ <br /> this.template = e;<br /> }<br /> this.ajax.send();]
Remove CheckMark Method: removeCheckMark()
<ej-listview [dataSource]='data' #listViewInstance [enableCheckMark]='true'></ej-listview>

this.listViewInstance.widget.removeCheckMark(2); 		Method: uncheckItem()
<ejs-listview [dataSource]='data' #listViewInstance></ejs-listview>

this.listViewInstance.uncheckItem ({id:'2'});
Set Active Method: setActive()
<ej-listview [dataSource]='data' #listViewInstance [persistSelection]='true'></ej-listview>

this.listViewInstance.widget.setActive(2); 		Method: selectItem()
<ejs-listview [dataSource]='data' #listViewInstance></ejs-listview>

this.listViewInstance.selectItem({id:'2'});
Select Not Applicable Event: select
<ejs-listview [dataSource]='data' (select)="onSelect()"></ejs-listview>

public onSelect(){};
Ajax Before Load Event: ajaxbeforeLoad
<ej-listview [dataSource]='data' [enableAjax]='true' (ajaxBeforeLoad)= 'ajaxBeforeLoad()'></ej-listview>

public ajaxBeforeLoad(){}; 		Event: onSuccess
<ejs-listview [dataSource]='data' [template]="template"></ejs-listview>

public template: string;<br /> public ajax: Ajax = new Ajax('./template.html', 'GET', false);<br /> this.ajax.onSuccess= (e: string)=>{ <br /> this.template = e;<br /> }<br /> this.ajax.send();
Ajax Complete Event: ajaxComplete
<ej-listview [dataSource]='data' [enableAjax]='true' (ajaxComplete)= 'ajaxComplete()'></ej-listview>

public ajaxComplete(){}; 		Event: onSuccess
<ejs-listview [dataSource]='data' [template]="template"></ejs-listview>

public template: string;<br /> public ajax: Ajax = new Ajax('./template.html', 'GET', false);<br /> this.ajax.onSuccess= (e: string)=>{ <br /> this.template = e;<br /> }<br /> this.ajax.send();
Ajax Error Event: ajaxError
<ej-listview [dataSource]='data' [enableAjax]='true' (ajaxError)= 'ajaxError()'></ej-listview>

public ajaxError(){} 		Event: onError
<ejs-listview [dataSource]='data' [template]="template"></ejs-listview>

public template: string;<br /> public ajax: Ajax = new Ajax('./template.html', 'GET', false);<br /> this.ajax.onError= (e: string)=>{ <br /> this.template = e;<br /> }<br /> this.ajax.send();