enumerate an array inside a item list

[Marco Salvatori]

now i have an itemlist template like this. valid for the first image ( AllegatoList[0].PathDoc  ).

<script id="chatTemplate" type="text/x-jsrender">

        <div class='settings'>

            <div class="row">

                ${if(UserId == 'me')}

                <div class="col-9">

                    <div class="me-message-col">

                        <div class="list-short-div fontdata-list">${moment(Data).format('DD MMM YYYY HH:mm')}</div>

                        ${if(Titolo != null)}

                        <div class="list-short-div titolo-list">${Titolo}</div>

                        ${/if}

                        <div class="list-short-div fontnormal-list">${Nota}</div>

                        ${if(haveDocument)}

                        ${if(isImageFirstDocument)}

                        <div style="height:100px; width:200px">

                            <img id="taskImage" src="${AllegatoList[0].PathDoc }" style="object-fit:scale-down;height:100px; width:200px" ondblclick="imgClick(this)">

                        </div>

                        ${/if}

                        ${/if}

                    </div>

                </div>

                <div class="col-3 message-offset-col">

                </div>

                ${else}

                <div class="col-3 message-offset-col">

                </div>

                <div class="col-9">

                    <div class="me-message-col">

                        <div class="list-short-div fontdata-list">${moment(Data).format('DD MMM YYYY HH:mm')}</div>

                        ${if(Titolo != null)}

                        <div class="list-short-div titolo-list">${Titolo}</div>

                        ${/if}

                        <div class="list-short-div fontnormal-list">${Nota}</div>

                        ${if(haveDocument)}

                        ${if(isImageFirstDocument)}

                        <div style="height:100px; width:200px">

                            <img id="taskImage" src="${AllegatoList[0].PathDoc }" style="object-fit:scale-down;height:100px; width:200px" ondblclick="imgClick(this)">

                        </div>

                        ${/if}

                        ${/if}

                    </div>

                </div>

                ${/if}

            </div>

        </div>

    </script>

how could I extend it to all the list of images?

[Sharon Sanchez Selvaraj]

Hi Marco, 

 

Greetings from Syncfusion Support. 

 

We have checked with your provided template code and created a similar sample here for your reference. By specifying the required path in your mapped data, the required scenario can be achieved. 

 

Refer to the following sample. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ListView-Template790896662.zip 

 

If we have misunderstood your requirement, kindly provide a video else modify the above sample along with exact details on the issue so that we can provide a prompt solution.  

 

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

 

Regards, 

 

Sharon Sanchez S. 

[Marco Salvatori]

ok, but I would like to enumerate n data ...

    <div class="col-9">

        <div class="me-message-col">

            <div class='clearfix desc e-list-wrapper e-list-multi-line e-list-avatar'>

                <img class='e-avatar' src=${AllegatoList[0].PathDoc}>

                <span class='e-list-item-header'>${Name} </span>

            </div>

        </div>

    </div>

    <div class="col-9">

        <div class="me-message-col">

            <div class='clearfix desc e-list-wrapper e-list-multi-line e-list-avatar'>

                <img class='e-avatar' src=${AllegatoList[1].PathDoc}>

                <span class='e-list-item-header'>${Name} </span>

            </div>

        </div>

    </div>

........................................

    <div class="col-9">

        <div class="me-message-col">

            <div class='clearfix desc e-list-wrapper e-list-multi-line e-list-avatar'>

                <img class='e-avatar' src=${AllegatoList[n-1].PathDoc}>

                <span class='e-list-item-header'>${Name} </span>

            </div>

        </div>

    </div>

    <div class="col-9">

        <div class="me-message-col">

            <div class='clearfix desc e-list-wrapper e-list-multi-line e-list-avatar'>

                <img class='e-avatar' src=${AllegatoList[n].PathDoc}>

                <span class='e-list-item-header'>${Name} </span>

            </div>

        </div>

    </div>

[Sharon Sanchez Selvaraj]

Hi Marco, 

 

We understand that you are trying to update the images of the list items from an array. However, it would be really helpful if you could provide us a sample of the JSON format returned in your end. Also, please elaborate your exact use case requirement. If possible, kindly modify the above sample similar to your scenario to serve you better. 

 

Regards, 

 

Sharon Sanchez S.