I have a page that uses an asp:Repeater control to display images and would like to turn it into a Telerik Image Gallery. I can't find any documentation online about how to do that and I am getting errors saying: Type 'System.Web.UI.WebControls.Repeater' does not have a public property named 'RadImageGallery'.
Can someone please point me in the direction I need to get this plugin built?

<telerik:RadListBox ID="radOrderID" runat="server" Width="900px" Height="200px" EmptyMessage="Select an Order" Skin="Outlook" SelectionMode="Multiple" AutoPostBack="true"> <ItemTemplate> <table cellspacing="0" cellpadding="0" class="multicomboBoxOrder"> <tr> <td class="col1"> <%#DataBinder.Eval(Container.DataItem, "OrderNo")%> </td> <td class="col2"> <%#DataBinder.Eval(Container.DataItem, "Description")%> </td> <td class="col3"> <%#DataBinder.Eval(Container.DataItem, "CustomerHeaderRef")%> </td> <td class="col4"> <%#DataBinder.Eval(Container.DataItem, "Department")%> </td> <td class="col5"> <%#Format(DataBinder.Eval(Container.DataItem, "OutstandingValueToInvoice"), "0.00")%> </td> <td class="col6"> <%#Format(DataBinder.Eval(Container.DataItem, "OutstandingValueToInvoiceShipped"), "0.00")%> </td> <td class="col7"> <%#DataBinder.Eval(Container.DataItem, "CurrencySell")%> </td> <td class="col8"> <%#DataBinder.Eval(Container.DataItem, "OrderSource")%> </td> </tr> </table> </ItemTemplate> </telerik:RadListBox>I want to use Accordion jquery for collapsing and expending nodes (when click on one parent node then other parent node should be Collapse).i am struggling for the same.
any suggestion ??
Thanks in advance.
This was working just fine until I decided to move the accordion onto the main page instead of having it on the user control.
The GridEditCommandColumn is not firing any events, even the NeedDataSource event.
The grid appears in a ModalPopUp, which worked fine until I moved the accordion to the main page.
I forced the PopUp to stay visible to check the grid and it is not re-binding, and not hitting any events when the GridEditCommandColumn is clicked.
Here is the main aspx page:
<%@ Register src="../../Common/Controls/SiteAdmin/ServiceType/ucServiceTypes.ascx" tagname="ucServiceTypes" tagprefix="uc1" %><asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <ajax:Accordion ID="Accordion1" runat="server" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" SelectedIndex="-1" FadeTransitions="true" SuppressHeaderPostbacks="true" TransitionDuration="250" FramesPerSecond="40" RequireOpenedPane="false" AutoSize="None" Width="100%"> </ajax:Accordion> </ContentTemplate> </asp:UpdatePanel></asp:Content>
The the code behind for the main aspx page:
protected void Page_Load(object sender, System.EventArgs e){ LoadUserControls();}private void LoadUserControls(){ string path = "~/Common/Controls/SiteAdmin/ServiceType/ucServiceTypes.ascx"; Common_Controls_SiteAdmin_ServiceType_ucServiceTypes uc; DataTable dt = GetServiceTypes(); for (int i = 0; i < dt.Rows.Count; i++) { uc = LoadControl(path) as Common_Controls_SiteAdmin_ServiceType_ucServiceTypes; uc.ID = "uc" + dt.Rows[i]["Name"].ToString(); uc.ServiceTypeID.Value = dt.Rows[i]["ServiceTypeID"].ToString(); Literal lit = new Literal(); AccordionPane pane = new AccordionPane(); pane.ID = "pane" + i.ToString(); lit = new Literal(); lit.Text = dt.Rows[i]["Name"].ToString(); pane.HeaderContainer.Controls.Add(lit); pane.ContentContainer.Controls.Add(uc); Accordion1.Panes.Add(pane); }}
Now for the user control:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucServiceTypes.ascx.cs" Inherits="Common_Controls_SiteAdmin_ServiceType_ucServiceTypes" %><asp:HiddenField ID="hdnServiceTypeID" runat="server" /><asp:HiddenField ID="hdnServiceDefID" runat="server" /><asp:Panel ID="pnlView" runat="server" Style="display: none;" CssClass="modalPopUpPanel">
<div style="height: 500px; overflow: auto;">
<asp:HiddenField ID="hdnViewPopUp" runat="server" />
<h3 style="text-align: center;" id="header">
<asp:Label ID="lblServiceDefName" runat="server"></asp:Label></h3>
<table style="width: 100%">
<tr>
<td style="text-align: left">
<telerik:RadGrid ID="rgServiceOptionDefs" runat="server" AutoGenerateColumns="False"
ResolvedRenderMode="Classic" AllowAutomaticUpdates="false" AllowAutomaticInserts="false"
OnItemCommand="rgServiceOptionDefs_ItemCommand" OnItemCreated="rgServiceOptionDefs_ItemCreated"
OnNeedDataSource="rgServiceOptionDefs_NeedDataSource" OnItemDataBound="rgServiceOptionDefs_ItemDataBound"
OnEditCommand="rgServiceOptionDefs_EditCommand" OnPreRender="rgServiceOptionDefs_PreRender"
OnUpdateCommand="rgServiceOptionDefs_UpdateCommand">
<MasterTableView DataKeyNames="ServiceOptionDefID" EditMode="InPlace" CommandItemDisplay="Top">
<Columns>
<telerik:GridEditCommandColumn />
<telerik:GridTemplateColumn HeaderText="Name" UniqueName="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%#DataBinder.Eval(Container, "DataItem.Name")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtName" runat="server" Text='<%#DataBinder.Eval(Container, "DataItem.Name")%>'></asp:TextBox>
</EditItemTemplate>
<ItemStyle VerticalAlign="Top" HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Type" UniqueName="Type">
<ItemTemplate>
<asp:Label ID="lblType" runat="server" Text='<%#DataBinder.Eval(Container, "DataItem.InputType")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<telerik:RadListBox ID="ddlType" runat="server"></telerik:RadListBox>
</EditItemTemplate>
<ItemStyle VerticalAlign="Top" HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</td>
</tr>
</table>
<p style="text-align: center;">
<asp:Button ID="btnCloseView" CssClass="Button" runat="server" Text="Close" CausesValidation="false" />
</p>
</div>
</asp:Panel>
<ajax:ModalPopupExtender ID="mpeView" runat="server" TargetControlID="hdnViewPopUp" PopupControlID="pnlView"
CancelControlID="btnCloseView" BackgroundCssClass="backgroundColor" DropShadow="true"
PopupDragHandleControlID="header">
</ajax:ModalPopupExtender>
And
protected void rgServiceOptionDefs_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e){ if (!string.IsNullOrEmpty(hdnServiceDefID.Value)) { int ServiceDefID = int.Parse(hdnServiceDefID.Value); DataTable dt = GetServiceOptionDefs(ServiceDefID); rgServiceOptionDefs.DataSource = dt; mpeView.Show(); }}protected void rgServiceOptionDefs_ItemCreated(object sender, GridItemEventArgs e){ if (e.Item is GridEditableItem && e.Item.IsInEditMode) { GridEditableItem editedItem = e.Item as GridEditableItem; mpeView.Show(); } else if (e.Item is GridDataItem) { GridDataItem dataItem = e.Item as GridDataItem; mpeView.Show(); }}protected void rgServiceOptionDefs_ItemDataBound(object sender, GridItemEventArgs e){ if (e.Item is GridDataItem && !e.Item.IsInEditMode) { } else if ((e.Item is GridDataItem || e.Item is GridEditableItem) && e.Item.IsInEditMode) { //mpeView.Show(); } if (e.Item is GridEditFormInsertItem || e.Item is GridDataInsertItem) { // insert item }}protected void rgServiceOptionDefs_ItemCommand(object sender, GridCommandEventArgs e){ mpeView.Show();}protected void rgServiceOptionDefs_UpdateCommand(object sender, GridCommandEventArgs e){ GridEditableItem item = e.Item as GridEditableItem; mpeView.Show();}protected void rgServiceOptionDefs_EditCommand(object sender, GridCommandEventArgs e){ mpeView.Show();}protected void rgServiceOptionDefs_PreRender(object sender, EventArgs e){ //if (!string.IsNullOrEmpty(hdnServiceDefID.Value)) // mpeView.Show();}
If anyone needs more information, I will provide it.
But I am at an end here trying to find out why this is happening.
And as can be seen, I've tried a few events.
Thanks.

I have Added ExpandCollapseColumn-CollapseImageUrl="../Images/1450530178_expand2.png"
ExpandCollapseColumn-ExpandImageUrl="../Images/1450530168_next.png">
for Expand and Collapse button image
it's working for Parent Grid,but not showing for Nested grid
css code and Aspx code as below ...
Css Code
.rgExpand {
background: url('../Images/1450530168_next.png') center center no-repeat !important;
}
.rgCollapse {
background: url('../Images/1450530178_expand2.png') center center no-repeat !important;
}
Aspx code
<telerik:RadGrid RenderMode="Lightweight" ID="radRequestStatus" runat="server" ShowStatusBar="true" MasterTableView-AllowPaging="true" AutoGenerateColumns="False"<br> PageSize="10" AllowSorting="True" AllowMultiRowSelection="False" AllowPaging="false"<br> OnDetailTableDataBind="radRequestStatus_DetailTableDataBind" OnNeedDataSource="radRequestStatus_NeedDataSource" OnItemDataBound="radRequestStatus_ItemDataBound"<br> OnPreRender="radRequestStatus_PreRender" OnPageIndexChanged="radRequestStatus_PageIndexChanged"><br> <PagerStyle Mode="NumericPages"></PagerStyle><br> <MasterTableView DataKeyNames="Request_Number" ExpandCollapseColumn-ButtonType="ImageButton"<br> ExpandCollapseColumn-CollapseImageUrl="../Images/1450530178_expand2.png"<br> ExpandCollapseColumn-ExpandImageUrl="../Images/1450530168_next.png"><br> <DetailTables><br> <telerik:GridTableView DataKeyNames="Br_Issu_Surr_Key" Name="Batches" Width="100%"><br> <HeaderStyle CssClass="InnerHeaderStyle" /><br> <ItemStyle CssClass="InnerItemStyle" /><br> <AlternatingItemStyle CssClass="InnerAlernatingItemStyle" /><br> <ExpandCollapseColumn ButtonType="ImageButton"></ExpandCollapseColumn><br> <DetailTables><br> <telerik:GridTableView DataKeyNames="Name" Name="Templetes" Width="100%"><br> <HeaderStyle CssClass="InnerHeaderStyle" /><br> <Columns><br> <telerik:GridTemplateColumn><br> <ItemTemplate><br> <%# Container.DataSetIndex+1 %><br> </ItemTemplate><br> </telerik:GridTemplateColumn><br><br> <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" HeaderText="Name" DataField="Name"><br> </telerik:GridBoundColumn><br> <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" HeaderText="Number" DataField="Number"><br> </telerik:GridBoundColumn><br> <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" HeaderText="Type" DataField="Type"><br> </telerik:GridBoundColumn><br> </Columns><br> </telerik:GridTableView><br> </DetailTables><br> <Columns><br> <telerik:GridTemplateColumn><br> <ItemTemplate><br> <%# Container.DataSetIndex+1 %><br> </ItemTemplate><br> </telerik:GridTemplateColumn><br> <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" HeaderText="sys" DataField="Sys"><br> </telerik:GridBoundColumn><br> <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" HeaderText="Version" DataField="Version"><br> </telerik:GridBoundColumn><br> <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" UniqueName="Status" HeaderText="Status" DataField="Status"><br> </telerik:GridBoundColumn><br> </Columns><br> </telerik:GridTableView><br> </DetailTables><br> <Columns><br> <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="5%" HeaderText="Req.No." DataField="Number"><br> </telerik:GridBoundColumn><br> <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="15%" HeaderText="C" DataField="C"><br> </telerik:GridBoundColumn><br> <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="15%" HeaderText="L" DataField="L"><br> </telerik:GridBoundColumn><br> <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="10%" HeaderText="D" DataField="D"><br> </telerik:GridBoundColumn><br> <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="10%" HeaderText="L4" DataField="L4"><br> </telerik:GridBoundColumn><br> <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="10%" HeaderText="L5" DataField="L5"><br> </telerik:GridBoundColumn><br> <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="20%" HeaderText="L6" DataField="L6"><br> </telerik:GridBoundColumn><br> <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Center" ItemStyle-Width="20%" HeaderText="Client" DataField="Client"><br> </telerik:GridBoundColumn><br> </Columns><br> </MasterTableView><br> </telerik:RadGrid>Hello.
I would like to get the child tabs below the parent tab and it should open only when the parent is clicked. Now , if any other parent tab is clicked , then earlier one should collapse and this parent tab should get open with its child tabs. I tried using ChildGroupCSSClass but it was not working. Moreover, also I would like to change the color, size of tab strip.
Please let me know how can I place the child tab below the parent one and apply the CSS.....

Hi,
I am using Radmenu with ImageSprites enabled to give selection options to users on the site. The problem is that the submenu items are overlapping on each other when used with vertical flow, while it works well with the horizontal flow being selected. I want the menu items (buttons/image sprites) to align vertically on top of each other.
Code for Horizontal Menu Style
01.<telerik:RadMenu ID="MenuQ3" runat="server" CssClass="RadMenu_Fixed2016" Flow="Vertical" CollapseDelay="10" EnableImageSprites="True">02.<Items>03.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSPrintMenu.png" BorderStyle="None">04.<Items>05.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSQuotation.png" Owner="" NavigateUrl="ZLPPrintSummary.aspx?refLPQ3=1">06.</telerik:RadMenuItem>07.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSCompatativeStatement.png" Owner="" NavigateUrl="ZLPPrintSummary.aspx?refLPQ3=2">08.</telerik:RadMenuItem>09.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSCFASanction.png" Owner="" NavigateUrl="ZLPPrintSummary.aspx?refLPQ3=3">10.</telerik:RadMenuItem>11.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSSupplyOrder.png" Owner="" NavigateUrl="ZLPPrintSummary.aspx?refLPQ3=4">12.</telerik:RadMenuItem>13.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSGFRCert.png" Owner="" NavigateUrl="ZLPPrintSummary.aspx?refLPQ1=11">14.</telerik:RadMenuItem>15.</Items>16.</telerik:RadMenuItem>17.</Items>18.<DefaultGroupSettings ExpandDirection="Left" Flow="Horizontal" RepeatDirection="Horizontal" OffsetX="1" OffsetY="1" />19.</telerik:RadMenu>
01.<telerik:RadMenu runat="server" CollapseDelay="1" EnableAutoScroll="True" EnableImageSprites="True">02.<Items>03.<telerik:RadMenuItem runat="server" ImageUrl="~/ImagesSys/swTSSPrintMenu.png">04.<GroupSettings ExpandDirection="Down" Flow="Vertical" RepeatDirection="Vertical" OffsetX="45" OffsetY="5" />05.<Items>06.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSQuotation.png">07.<GroupSettings OffsetX="45" OffsetY="5" />08.</telerik:RadMenuItem>09.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSCRV.png">10.<GroupSettings OffsetX="45" OffsetY="5" />11.</telerik:RadMenuItem>12.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSSupplyOrder.png">13.</telerik:RadMenuItem>14.<telerik:RadMenuItem runat="server" EnableImageSprite="True" ImageUrl="~/ImagesSys/swTSSGFRCert.png" Owner="">15.</telerik:RadMenuItem>16.</Items>17.</telerik:RadMenuItem>18.</Items>19.</telerik:RadMenu>CSS
01..RadMenu_Fixed201602. {03. position: fixed !important;04. height: 28px;05. width: 139px; /* link goes at the bottom of the page */06. top: 100%;07. margin-top: -120px; /*140 = height + preferred bottom margin */ /* link is moved to the right */08. right: 0%;09. margin-right: 2px; /* = half of width */10. cursor: hand !important;11. }Please help me with the code to stop the buttons in the vertical menu from over lapping on each other.