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(); |