Angular
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

EJ1 Migration in Angular ListView component

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