ListView template prop is empty

[Laurin S]

Hi,

I cannot define a template for my ListView items, since the "prop" parameter of my template-function is always empty, i.e. it does not contain the data of the current item to render.

I've attached an example (see the console.log(prop), line 16).

Thanks.

Attachment: reactkrfxmi_d988c96f.zip

[Sharon Sanchez Selvaraj]

Hi Laurin, 

 

Greetings from Syncfusion support. 

 

We have checked with your reported query in ListView. On further analysis with the provided sample, we had noticed that the data was not returned properly when using the JSONAdaptor.  

 

Refer to the modified code: 

 

 

export const Template = () => { 

  const data = new DataManager({ json: emails, adaptor: new JsonAdaptor }) 

                                .executeLocal(new Query().take(15)); 

 

  const template = props => { 

    console.log(props); /* "PROPS" IS ALWAYS EMPTY !!!! */ 

    return ( 

      <div className="e-list-wrapper e-list-multi-line email-sidebar-element"> 

        <div className="mb-1"> 

          <span className="fw-bold">{props.fromName}</span> 

          <span className="float-end"> 

            <ButtonComponent 

              cssClass="e-small e-outline border-0" 

              iconCss="las la-trash" 

              tooltip={'Delete'} 

            /> 

          </span> 

        </div> 

        <div className="mb-1"> 

          <span>{props.subject}</span> 

          <span>{props.date?.toString()}</span> 

        </div> 

        <div> 

          <p>{props.text}</p> 

        </div> 

      </div> 

    ); 

  }; 

 

Refer to the sample: 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ListViewReact-185802733 

 

Kindly check with the below link to more about Adaptors: 

 

https://ej2.syncfusion.com/react/documentation/data/adaptors/#json-adaptor 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Sharon Sanchez S. 

[Laurin S]

Ok, works, thanky ou.

However, I do not understand why the original line for the DataManager is not working for the listView in this way too, since for the GridComponent for example it works in that way?

I'm referring to the following line:

const data = new DataManager({ json: emails, adaptor: new JsonAdaptor });

Using this code line as datasource in a GridComponent for example does not give any problem, only in the ListView I have to add the executeLocal()-call... Why?

[Sharon Sanchez Selvaraj]

Hi Laurin, 

 

Most welcome.  

 

We would like to mention that the ListView component’s return type must be processed in a list format. In the above scenario, when executing the query, the processed data will be in the required list format and hence, the mapping would be proper.  

 

Refer to the below links to know more about ListView component: 

 

Documentation: https://ej2.syncfusion.com/react/documentation/listview/data-binding/ 

 

Demo: https://ej2.syncfusion.com/react/demos/#/material/listview/default.html 

 

Regards, 

Sharon Sanchez S.