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

Item with template and href link

Hi,
in ListView how to make HREF load link. Main items use template. How can the item to load link?


@Html.EJMobile().ListView("listView").EnableAjax(true).RenderMode(RenderMode.Windows).ShowHeader(false).AllowScrolling(true).AutoAdjustHeight(true).Items(items =>
{
        items.Add().RenderTemplate(true).TemplateId("template1").Href("Main/Home/1");
        items.Add().RenderTemplate(true).TemplateId("template2").Href("Main/Home/2");
})

3 Replies

DR Dhinesh Ravi Syncfusion Team February 5, 2016 09:17 AM UTC

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


EY Emil Yotov February 5, 2016 09:39 AM UTC

Thank you so much. Everything works.


DR Dhinesh Ravi Syncfusion Team February 8, 2016 07:22 AM UTC

Hi Emil,

Thanks for the update.

We are happy to hear that everything works well. Please get back to us if you have any other concern.



Regards,
Dhinesh R


Loader.
Live Chat Icon For mobile
Up arrow icon