Template not working properly

[Renz Mancenido]

Hi I was trying to set a custom template to use a custom element for my ListView Item but instead of displaying the custom element, the items displayed in the ListView are all emtpy. Did anyone encounter this and know how to fix? Thank you in advance.

ListView declaration:

private list1: ListViewComponent;

My Template:

listTemplate(data): JSX.Element {

        return (<div className="list-tem">

            <span>SAMPLE SAMPLE</span>

        </div>);

    }

This is my how I used the ListView component:

<ListViewComponent

     id="list5"

     fields={this.listFields}

     ref={ref => (this.list1 = ref)}

     dataSource={this.state.model["displayedUnassignedList"]}

     template={this.listTemplate.bind(this)}

     className="listview mb-3"

></ListViewComponent>

[Sowmiya Padmanaban]

Hi Renz Mancenido,  

 

Greetings from Syncfusion support. 

 

We have checked your reported problem and unable to replicate the issue in ListView component. 

 

Please, refer to the below sample link. 

 

https://stackblitz.com/edit/react-ydmh4c-uauwwm?file=package.json 

 

We suspect that your reported problem may be due to the reason, datasource is changed using state variable. We suggest you to add the delayUpdate as true in the ListView component. 

 <ListViewComponent 

          id="list5" 

          ref={ref => (this.list1 = ref)} 

          dataSource={this.state.data} 

          delayUpdate={true} 

          template={this.listTemplate.bind(this)} 

          className="listview mb-3" 

        /> 

 

Please, refer to the below link. 

 

https://ej2.syncfusion.com/react/documentation/common/how-to/resolve-react-template-issues/ 

 

If the issue still persists, please share the below details. 

 

1.     If possible, replicate the issue in attached sample. 

2.     Share us the video footage of your reported problem. 

3.     Share us the datasource bind to the ListView component. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P