We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Listview (and other components) with Templates

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:

Screenshot 2023-04-21 at 18.30.38.png


2 Replies

LD LeoLavanya Dhanaraj Syncfusion Team May 9, 2023 05:58 PM UTC

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



LD LeoLavanya Dhanaraj Syncfusion Team May 16, 2023 11:40 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon