Listview (and other components) with Templates

[Mehdi Nabhani]

Hello!

Somehow using templates in components changes the behaviour of the file/page in a complete unwanted way. I found in this forum some discussions about it but no solution for myself so far.

When using templates, I face following issues:

- everything gets rerendered, which is a performance issue.

- unwanted scrolling

- selection does not work on first click

- selection does not trigger select={...} after second click

- selected item gets darker and darker until blacked out (see screenshot)

- functionality gets disabled until another item in the list gets selected

In the same page with the same listview, but no template, the functionality works fine and as expected.

Please see a sample code:

import React, { useState, useEffect } from "react";

import { ListView, ListViewComponent } from "@syncfusion/ej2-react-lists";

const ChildTask = ({

data,

setSelectedTaskId,

selectedContentId,

}) => {

console.log('ChildTask loaded....');

const filteredTasks = data.tasks.filter(

task => task.parent && task.parent.parentID === selectedContentId

);

// Reset the setSelectedTaskId when selectedContentId changes

useEffect(() => {

setSelectedTaskId(null);

}, [selectedContentId, setSelectedTaskId]);

let taskFields = { text: "title", id: "_id" }

const onTaskChange = (e) => {

console.log(e);

try {

const selectedID = e.data._id;

setSelectedTaskId(selectedID);

} catch (error) {

console.error("Error accessing event properties:", error);

setSelectedTaskId(prevState => null);

}

};

function listTemplate(filteredTasks) {

return (<div className='e-list-wrapper e-list-multi-line e-list-avatar'>

<span className="e-list-item-header">{filteredTasks.title}</span><br />

<span className="e-list-content">{filteredTasks.name}</span><br />

<span className="e-list-content">{filteredTasks.description}</span><br />

</div>);

}

return (

<div>

<h3>Tasks</h3>

<ListViewComponent

dataSource={filteredTasks}

fields={taskFields}

select={onTaskChange}

template={listTemplate}

cssClass='e-list-template'

/>

<ListViewComponent

dataSource={filteredTasks}

fields={taskFields}

/>

</div>

);

};

export default ChildTask;

Here is the screenshot:

[LeoLavanya Dhanaraj]

Hi Mehdi,

Greetings from Syncfusion support.

Currently, we are checking the mentioned React ListView component issue with the latest version. We need some additional time to check this issue and we will update you with further details by May 12, 2023. We appreciate your patience.

Regards,

Leo Lavanya Dhanaraj

[LeoLavanya Dhanaraj]

Hi Mehdi,

Greetings from Syncfusion support.

Issue 1 : Everything gets re-rendered, which is a performance issue.

Based on your shared details, we have prepared the React ListView sample with Template support. We suspect that the issue occurs due to the statelessTemplates property is not enabled in your shared ListView. If templates are defined in component parent tag, then pass the template name in statelessTemplates property.

To overcome the issue, we suggest binding the statelessTemplate property in the ListView component. For your reference, we included the sample and code snippets.

Sample : https://stackblitz.com/edit/react-ovcqhh-q2fsso?file=index.js,index.html

[index.js]

<ListViewComponent

    dataSource={flatList}

    fields={taskFields}

    statelessTemplates={['template']}

    template={listTemplate}

    ...

/>

Issue 2 : Unwanted scrolling

Based on the information provided, we are unclear about the specific issue you are experiencing with the ListView component. Is the issue related to the component or the browser? We have included a validated sample for your reference.

https://stackblitz.com/edit/react-ovcqhh-dgod3s?file=index.js,index.html

Could you please provide us with additional details regarding the issue you are facing? Once we have received this information, we will proceed with further validation on our end.

Issue 3 : Selection does not work on first click & selection does not trigger select={...} after second click & functionality gets disabled until another item in the list gets selected

We have validated the selection-related issue mentioned in the React ListView component. However, we were not able to replicate the issue on our end. The ListView component selections function properly, and the selected details are properly retrieved from the arguments. Please refer to the validated sample below.

Sample : https://stackblitz.com/edit/react-ovcqhh-libfbt?file=index.js,index.html

[index.js]

<ListViewComponent

    dataSource={flatList}

    fields={taskFields}

    statelessTemplates={['template']}

    showCheckBox={true}

    select={onTaskChange}

    template={listTemplate}

    cssClass="e-list-template"

/>

 

const onTaskChange = (e) => {

    console.log(e);

};

Issue 4 : selected item gets darker and darker until blacked out (see screenshot)

We have investigated the theme-related issue in the ListView component using the material dark theme. However, we were unable to reproduce the problem on our end. Have you encountered this issue with a particular theme? Please provide additional information to further verify this.

Sample : https://stackblitz.com/edit/react-ovcqhh-libfbt?file=index.js,index.html

Check out the shared sample at your end. If you are still facing an issue, replicate it in our shared sample or share the steps to replicate the issue(if possible, provide issue video footage and sample). It will help us validate and provide a prompt solution.

Regards,

Leo Lavanya Dhanaraj