Hi Emil,
Thanks for contacting Syncfusion Support.
Templates are user defined elements used to customize the individual list items. When the templates are used inside ListView, the control will just fetch and renders the given templates as list items. Hence we need to align the templates and provide functionality to the respective list items. To achieve your requirement, i.e. to navigate to other pages, we suggest you to use,
TouchEnd event of ListView. Refer to the following code example.
[cshtml]
@Html.EJMobile().ListView("grouplist").ShowHeader(true).HeaderTitle("Template List").ClientSideEvents(evt => evt.TouchEnd("touch"))
|
Once the list item is selected, TouchEnd event will be triggered. In the event, we navigate to any view pages in the application using App.transferPage.
In the example, we have used ID and class for the templates, in order to navigate to another view page based on the selected template list item. Refer to the following code example.
[cshtml]
<div id="template1" class="template">Template 1</div>
<div id="template2" class="template">Template 2</div>
<div id="template3" class="template">Template 3</div>
<div id="template4" class="template">Template 4</div>
<script>
function touch(args) {
//returns the id of the template from the list item selected
var viewPage = args.item.find(".template").attr('id');
//Navigates to view page of respective template id
App.transferPage(App.activePage, "/home/" + viewPage);
}
</script>
|
Once
id is retrieved, we can navigate to another view page using the function,
App.transferPage(fromPage, toPage) as explained in above code example.
Likewise, we can navigate to any viewpage based on the list item selected using
App.transferPage.
We have created simple sample for the requirement. Refer to the sample in the following attachment.
Sample
Help Documentation Link :
http://help.syncfusion.com/mobilejs/introduction/control-initialization
Regards,
Dhinesh R