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
>
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.
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
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
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();