+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / using multiple itemtemplates in listview

using multiple itemtemplates in listview

10 posts, 0 answered
  1. Ashfaq
    Ashfaq avatar
    4 posts
    Registered:
    22 Aug 2013
    02 Sep 2013
    Link to this post
    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
  2. David C
    David C avatar
    33 posts
    Registered:
    02 Dec 2015
    09 Sep 2013
    Link to this post
    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
  3. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    09 Sep 2013 in reply to David C
    Link to this post
    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
  4. Mike
    Mike avatar
    10 posts
    Registered:
    19 Feb 2014
    26 Apr 2014 in reply to Ashfaq
    Link to this post

    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.

  5. Ferdi Nebiev
    Ferdi Nebiev avatar
    7 posts
    Registered:
    01 Aug 2016
    30 Apr 2014
    Link to this post
    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
     
  6. Silvain
    Silvain avatar
    3 posts
    Registered:
    22 Aug 2007
    20 Jun 2014 in reply to Mike
    Link to this post

    Excellent Mike,

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

  7. Majid
    Majid avatar
    10 posts
    Registered:
    17 Jan 2012
    10 May 2015
    Link to this post

    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.

  8. Sabrie Nedzhip
    Sabrie Nedzhip avatar
    534 posts
    Registered:
    02 Dec 2016
    13 May 2015
    Link to this post
    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
     
  9. Bizappt
    Bizappt avatar
    3 posts
    Registered:
    04 Jul 2011
    29 Jun 2015 in reply to Sabrie Nedzhip
    Link to this post

    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.

  10. Bizappt
    Bizappt avatar
    3 posts
    Registered:
    04 Jul 2011
    30 Jun 2015 in reply to Bizappt
    Link to this post

    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.
10 posts, 0 answered