using multiple itemtemplates in listview

Posted by Community Admin on 05-Aug-2018 13:12

using multiple itemtemplates in listview

All Replies

Posted by Community Admin on 02-Sep-2013 00:00

hello i have created a custom module, now editing the default template but i have items where i need to repeat 2 images which are seperated by many divs i can not place them in same div or ul so i am having issue i want to repeat items seperately here is template page code 

<telerik:RadListView ID="dynamicContentListView" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
    <LayoutTemplate>
     <div class="sliderkit photosgallery-captions delaycaptions-02">
    <div class="sliderkit-nav">
          <div class="sliderkit-nav-clip">
        <ul>
                 <asp:PlaceHolder ID="ItemsContainer" runat="server" />
            </ul>
          </div>
          <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a rel="nofollow" href="#" title="Previous line"><span>Previous line</span></a></div>
          <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a rel="nofollow" href="#" title="Next line"><span>Next line</span></a></div>
          <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous photo"><span>Previous photo</span></a></div>
          <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next photo"><span>Next photo</span></a></div>
     </div>
       <div class="sliderkit-panels">
            <div class="sliderkit-panel">
                    <a href="#" title="[title]"><img src="images/photos/sample-01.jpg" alt="[Alternative text]" /></a>
                    <div class="sliderkit-panel-textbox">
                            <div class="sliderkit-panel-text">
                                    <h4>sample-01.jpg</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
                            </div>
                            <div class="sliderkit-panel-overlay"></div>
                    </div>
            </div>
       </div>
     </div>
    </LayoutTemplate>
    <ItemTemplate>
        <li><a href="#" rel="nofollow" title="[link title]"><sf:ImageAssetsField runat="server" DataFieldName="thumb" IsThumbnail="True" /></a></li>
  </ItemTemplate>
</telerik:RadListView>


i need to repeast the div which has class "sliderkit-panel" i need to repeat that div too with each item i want to show an image from same source as in below at itemtemplate


anyone can help or suggestion ?

thanks

Posted by Community Admin on 09-Sep-2013 00:00

Hi Ashfaq,

I'll be happy to assist you with your question. Can you please tell me how exactly you are interacting with the code? In other words, are you creating a custom widget to work with your module or are you making your edits in the Design --> Templates --> Widget Templates section of the Sitefinity back-end?

I would, however, probably suggest that if you are doing heavy customization to the output of your module, then it would be better to go the the custom widget route. In this case you would use Sitefinity Thunder to create either a standard widget or mvc widget, use the Dynamic Modules api (modules builder) to get your data and then customize the output of the data in the widget however you'd like.   

Here's a great resource for learning how to do this:
Retrieving Data From Dynamic Modules Using the Module Builder API

Please let us know if you have any additional questions or if you need any clarification.

Regards,
David C
Telerik
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 09-Sep-2013 00:00

So you want to have 2 dataitem images PER "repeat"?

If I read that right, have you seen grouping?

http://www.sitefinitysteve.com/blog/code/2013/07/01/use-sitefinity-layout-controls-without-drag-drop

Posted by Community Admin on 26-Apr-2014 00:00

I know this post is 7+ months old at this point, but in case others find their way here, this is how I solved this.  I wanted to have a Theater Slide plus the Navigation and I wanted all of the data to come from same source module.  

First, I used a standard Widget Template, but I edited the top line to reference a Code Block, and then added a 2nd RadListView to the template with an id of dynamicContentListView2.  (Not going to post the RadListView code, but it's the same as the first one, except the markup is different to handle the theater navigation items, rather than the theater slides.)

 <%@ Control Language="C#" Inherits="SitefinityWebApp.CustomWidgets.TheaterSlideControl.TheaterSlide" %>

 Then I created the TheaterSlide class as follows, and in that class I inherited from a UserControl, grabbed the DataSource from the first RadListView which Sitefinity populates automatically, and added that as the DataSource for my second RadListView. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Telerik.Sitefinity.DynamicModules.Model;
using Telerik.Web.UI;
 
namespace SitefinityWebApp.CustomWidgets.TheaterSlideControl
    public class TheaterSlide : System.Web.UI.UserControl
    
        protected override void OnInit(EventArgs e)
        
            base.OnInit(e);
 
            RadListView container = (RadListView)this.FindControl("dynamicContentListView");
            List<DynamicContent> detailItems = (List<DynamicContent>)container.DataSource;
 
            RadListView container2 = (RadListView)this.FindControl("dynamicContentListView2");
            container2.DataSource = detailItems;
            container2.DataBind();
        
    

Then I just used standard databinding to bind the elements in the first (theater slides) or second (theater navigation items) RadListView as needed.

Posted by Community Admin on 30-Apr-2014 00:00

Hi Mike,

Thank you for sharing your solution with the community!
We are really grateful for your contribution.

Regards,
Ferdi Nebiev
Telerik

 
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
 

Posted by Community Admin on 20-Jun-2014 00:00

Excellent Mike,

You just saved my day! Kuddo's for you.

Posted by Community Admin on 10-May-2015 00:00

Hi I implemented the same solution, and it was working in previous version of sitefinity.

But i upgraded to sitefinity 8 this morning and its broken now.

In OnInit method on line # 4 where you get datasource of ListView, its now returning null :(

Anybody help please.

Posted by Community Admin on 13-May-2015 00:00

Hello Majid,

Can you please provide more details about the sample you are using on your end and the exact scenario? It would be also useful if you provide the sample code so that I can test the same scenario on my end.

Regards,
Sabrie Nedzhip
Telerik

 
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
 

Posted by Community Admin on 29-Jun-2015 00:00

Hi Sabrie,

 I encountered the same problem as Majid.

In the widget template: 

<telerik:RadListView ID="dynamicContentListView" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
      <LayoutTemplate>
                <asp:PlaceHolder ID="ItemsContainer" runat="server" />
      </LayoutTemplate>
      <ItemTemplate>
              <div class="caption">
                <h3><sf:DetailsViewHyperLink ID="DetailsViewHyperLink" TextDataField="Country" runat="server" data-sf-field="Country" data-sf-ftype="ShortText"/></h3>
              </div>
      </ItemTemplate>
    </telerik:RadListView>​

<!-- Some Markup Here-->

 

<telerik:RadListView ID="dynamicContentListViewMobile" ItemPlaceholderID="ItemsContainerMobile" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
      <LayoutTemplate>
                <asp:PlaceHolder ID="ItemsContainerMobile" runat="server" />
      </LayoutTemplate>
      <ItemTemplate>
              <span class="str"><asp:Literal runat="server" text='<%# Eval("CompanyName")%>'/></span>     

     </ItemTemplate>
    </telerik:RadListView>​​

 

As for code-behind, I used the same method as described in this post. The problem is for the line 

 

RadListView container = (RadListView)this.FindControl("dynamicContentListView");

            List<DynamicContent> detailItems = (List<DynamicContent>)container.DataSource; 

 

 

detailItems is NULL when assigned to ​Container2, hence Container2 is not showing anything.

Posted by Community Admin on 30-Jun-2015 00:00

FYI Here is the solution from Velizar Bishurov (Telerik)

Quoted: 

This is no longer possible on OnInit method. Instead it must be done in the ItemDataBound event like so:

protected void Page_Load(object sender, EventArgs e)

    RadListView radList = (RadListView)this.FindControl("dynamicContentListView");
    radList.ItemDataBound += new EventHandler<RadListViewItemEventArgs>(radList_ItemDataBound);


private void radList_ItemDataBound(object sender, RadListViewItemEventArgs e)

    RadListView radList = (RadListView)this.FindControl("dynamicContentListView");
    RadListView radList2 = (RadListView)this.FindControl("dynamicContentListViewMobile");

    var dataSource = radList.DataSource;

    radList2.DataSource = dataSource;
    radList2.DataBind();


First you get the first RadListView and subscribe to its ItemDataBound event. In the event handler you get the data source of the first view and bind it to the second.

This thread is closed