how to create a datatemplate as below and selecteditem?

[Emil]

Hi,

I started using your .net core solution and it looks really awesome but I am having hard time to get even some simple things. I appreciate if you can provide me a nice sample for template I would like to achieve as below from UWP app listview. so it should have 3 item  horizontally each item with image and text.

Beside that how to get selecteditem and route to the details action? 

thanks

 

[Balaji M]

Hi Emil, 

Thanks for contacting Syncfusion support. 

We have achieved your requirement with ListView template property. In ListView template, we have designed an image of person and their details which is showed using card Component in ListView. 

For your kind information, by default getSelectedItems method will return the data while we mapping the dataSource text and id in fields property. So, In this application we have mapped dataSource text and id to fetch the details while selecting the list item through select event. Refer to the below code snippet to bind select event in Listview. 

function onSelect() { 

        // the dataSource must have 'text' field to work with getSelectedItems() method. 

        let selecteditem = document.getElementById('element').ej2_instances[0].getSelectedItems(); 

        let valEle = document.getElementById('val'); 

        valEle.innerHTML = '<b>Selected Item:</b>' + selecteditem.text; 

    } 

 

For your convenience we have prepared a sample and attached below. Refer to the below sample link. 

Sample  

 

ListView UG : https://ej2.syncfusion.com/aspnetcore/documentation/list-view/customizing-templates.html 

Card UG : https://ej2.syncfusion.com/aspnetcore/documentation/card/header&content.html 

 

Please let us know if you have any queries. 

Regards, 

M. Balaji