using multiple itemtemplates in listview - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

using multiple itemtemplates in listview

  • using multiple itemtemplates in listview
  • 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
  • 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
  • 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
  • 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.

  • 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
     
  • Excellent Mike,

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

  • 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.

  • 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
     
  • 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.

  • 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.