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.
Unfortunately, activation email could not send to your email. Please try again.

Item with template and href link

Thread ID:

Created:

Updated:

Platform:

Replies:

121898 Feb 4,2016 01:58 PM Feb 8,2016 02:22 AM ASP.NET MVC 3
loading
Tags: ListView(Mobile)
Emil Yotov
Asked On February 4, 2016 01:58 PM

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");
})

Dhinesh Ravi [Syncfusion]
Replied On February 5, 2016 04:17 AM

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

Emil Yotov
Replied On February 5, 2016 04:39 AM

Thank you so much. Everything works.

Dhinesh Ravi [Syncfusion]
Replied On February 8, 2016 02:22 AM

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;