Ej1 api migration in React Listview component

30 Jan 20233 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 id="default" allowVirtualScrolling={true}
virtualScrollMode="normal" dataSource={dataSourceItem}>
</EJ.ListView>
Property: enableVirtualization

<ListViewComponent id='ui-list' dataSource={this.dataSource} enableVirtualization={true} >
<Inject services={[Virtualization]} />
</ListViewComponent>
Fields Property: fieldSettings

<EJ.ListView id="default"
enableGroupList={true} dataSource={dataSourceItem}>
</EJ.ListView>
Property: fields

Inner properties: child, enabled, groupBy htmlAttributes, iconsCss, id, isChecked, isVisible, sortBy, tableName, text, tooltip.

public fields = { enabled: enable_items,
groupBy: groupByProp };

<ListViewComponent id='list'
dataSource={this.dataSource}
fields={this.fields}>
</ListViewComponent>
Template Property: renderTemplate

<EJ.ListView dataSource={this.dataSource}
renderTemplate={true}>
<div id="template">
<div> Template1 </div>
</div>
</EJ.ListView>

Property: template

private listTemplate(data: any): JSX.Element {
return (
<div className="template">Template Data</div>
);
}

<ListViewComponent id='list'
dataSource={this.dataSource}
template={this.listTemplate.bind(this)}>
</ListViewComponent>
Animation Not Applicable Property: animation

public animation = { effect: ‘SlideLeft’,
duration: 400, easing: ‘ease’ };

<ListViewComponent id='list' dataSource={this.dataSource}
animation={this.animation}>
</ListViewComponent>
Enable Not Applicable Property: enable

<ListViewComponent id='list' dataSource={this.dataSource}
enable={true}>
</ListViewComponent>
Template for grouping Not Applicable Property: groupTemplate

private listGroupTemplate(data: any): JSX.Element {
return (
<div className="template">Template Data</div>
);
}

<ListViewComponent id='list'
dataSource={this.dataSource}
groupTemplate={this.listGroupTemplate.bind(this)}>
</ListViewComponent>
Template for header Not Applicable Property: headerTemplate

private listHeaderTemplate(data: any): JSX.Element {
return (
<div className="template">Template Data</div>
);
}

<ListViewComponent id='list'
dataSource={this.dataSource}
headerTemplate={this.listHeaderTemplate.bind(this)}>
</ListViewComponent>
HTML attributes Not Applicable Property: htmlAttributes

public attributes = {id: ‘list_id’,
class: ‘.list_test’};

<ListViewComponent id='list' dataSource={this.dataSource}
htmlAttributes={this.attributes}>
</ListViewComponent>
Clear Method: clear()

<EJ.ListView id='listView' dataSource={this.dataSource}>
</EJ.ListView>

var listObj = $("#default").ejListView("instance");
listObj.clear();
Property dataSource

public emptyDataSrc: { [key: string]: Object }[] = [];

<ListViewComponent id='list' dataSource={this.emptyDataSrc}>
</ListViewComponent>

listObj.destroy();
Remove CheckMark Method: removeCheckMark()

<EJ.ListView id="default" dataSource={dataSourceItem}
enableCheckMark={true}>
</EJ.ListView>

var listObj = $("#default").ejListView("instance");
listObj.removeCheckMark(2);
Method: uncheckItem()

<ListViewComponent id='list' dataSource={this.dataSource}>
</ListViewComponent>

listObj.uncheckItem ({id:‘2’});
Set Active Method: setActive()

<EJ.ListView id="default" dataSource={dataSourceItem}
persistSelection={true}>
</EJ.ListView>

var listObj = $("#default").ejListView("instance");
listObj.setActive(2);
Method: selectItem()

<ListViewComponent id='list' dataSource={this.dataSource}>
</ListViewComponent>

listObj.selectItem({id:‘2’});
Select Not Applicable Event: select

<ListViewComponent id='list' dataSource={this.dataSource}
select={this.onSelect}>
</ListViewComponent>

private onSelect(args: Event): void { }