Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in Angular ListView component
5 Apr 20255 minutes to read
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();
|