I have a PanelBar that I am using an ItemTemplate with. I am populating the template with a table that has images and text in it. I cannot for the life of me find the right css to set the background color of the selected item. Any help would be greatly appreciated.
Thanks.
Thanks.
5 Answers, 1 is accepted
0
Hello Samantha,
Could you, please, post an example of the template and a small mock up showing what exactly do you need to achieve?
Thanks!
Regards,
Nikolay Tsenkov
the Telerik team
Could you, please, post an example of the template and a small mock up showing what exactly do you need to achieve?
Thanks!
Regards,
Nikolay Tsenkov
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Samantha
Top achievements
Rank 1
Rank 1
answered on 20 May 2011, 06:28 PM
<telerik:RadPanelBar ID="surveyAccordian" Runat="server" Skin="Insignia" Width="100%" ExpandMode="SingleExpandedItem" onitemclick="surveyAccordian_ItemClick" EnableEmbeddedSkins="False" > <ItemTemplate> <table id="tblSurveyInfo" width="100%"> <tr id="tblRowSurveyInfo" runat="server"> <td> <asp:Image ID="imgSurveyPage" runat="server" ImageUrl="~/images/surveyImages/surveyPage.png" /> </td> <td id="tblColSurveyName"> <asp:Label ID="lblSurveyName" CssClass="fl_fontBold" runat="server"></asp:Label> <asp:Panel ID="pnlDefault" runat="server" Visible="false"><asp:Label ID="lblDefault" Visible="true" runat="server" Text=" - Default"></asp:Label></asp:Panel> </td> </tr> <tr id="tblRowImages" runat="server"> <td> </td> <td> <asp:ImageButton ID="imgBTNCompleteSurvey" runat="server" ImageUrl="~/images/surveyImages/surveyComplete.png" OnClick="imgBTNCompleteSurvey_Click" AlternateText="Complete survey" ToolTip="Complete survey" /> <asp:ImageButton ID="imgBTNPreviewSurvey" runat="server" ImageUrl="~/images/surveyImages/surveyPreview.png" OnClick="imgBTNPreviewSurvey_Click" AlternateText="Preview survey" ToolTip="Preveiw survey"/> <asp:ImageButton ID="imgBTNHistorySurvey" runat="server" ImageUrl="~/images/surveyImages/surveyHistory.png" OnClick="imgBTNHistorySurvey_Click" AlternateText="View history" ToolTip="View history"/> <asp:ImageButton ID="imgBTNScheduleSurvey" runat="server" ImageUrl="~/images/surveyImages/surveySchedule.png" OnClick="imgBTNScheduleSurvey_Click" AlternateText="Schedule survey" ToolTip="Schedule survey"/> </td> </tr> </table> </ItemTemplate>0
Hi Samantha,
You may use jQuery:
Kind regards,
Helen
the Telerik team
You may use jQuery:
<script type="text/javascript">function pageLoad() {var $ = $telerik.$;$("div.rpTemplate").mouseover(function () { $(this).css("background-color", "red"); });$("div.rpTemplate").mouseout(function () { $(this).css("background-color", ""); });}</script>Kind regards,
Helen
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Samantha
Top achievements
Rank 1
Rank 1
answered on 25 May 2011, 06:29 PM
That suggestion will work well for mouseover and mouseout, but how will it help me with the selected item?
0
Hi Samantha,
Please find a sample code below:
Regards,
Helen
the Telerik team
Please find a sample code below:
<head runat="server"> <title></title> <style type="text/css"> .highlight { background: red; } </style></head><body> <form id="form1" runat="server"> <div><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><telerik:RadPanelBar ID="surveyAccordian" Runat="server" Skin="Insignia"Width="100%" ExpandMode="SingleExpandedItem"EnableEmbeddedSkins="False"> <ItemTemplate> <table id="tblSurveyInfo" width="100%"> <tr id="tblRowSurveyInfo" runat="server"> <td> <asp:Image ID="imgSurveyPage" runat="server" ImageUrl="~/images/surveyImages/surveyPage.png" /> </td> <td id="tblColSurveyName"> <asp:Label ID="lblSurveyName" CssClass="fl_fontBold" runat="server"></asp:Label> <asp:Panel ID="pnlDefault" runat="server" Visible="false"><asp:Label ID="lblDefault" Visible="true" runat="server" Text=" - Default"></asp:Label></asp:Panel> </td> </tr> <tr id="tblRowImages" runat="server"> <td> </td> <td> <asp:ImageButton ID="imgBTNCompleteSurvey" runat="server" ImageUrl="~/images/surveyImages/surveyComplete.png" AlternateText="Complete survey" ToolTip="Complete survey" /> <asp:ImageButton ID="imgBTNPreviewSurvey" runat="server" ImageUrl="~/images/surveyImages/surveyPreview.png" AlternateText="Preview survey" ToolTip="Preveiw survey"/> <asp:ImageButton ID="imgBTNHistorySurvey" runat="server" ImageUrl="~/images/surveyImages/surveyHistory.png" AlternateText="View history" ToolTip="View history"/> <asp:ImageButton ID="imgBTNScheduleSurvey" runat="server" ImageUrl="~/images/surveyImages/surveySchedule.png" AlternateText="Schedule survey" ToolTip="Schedule survey"/> </td> </tr> </table> </ItemTemplate> <Items> <telerik:RadPanelItem></telerik:RadPanelItem> <telerik:RadPanelItem ></telerik:RadPanelItem> <telerik:RadPanelItem ></telerik:RadPanelItem> <telerik:RadPanelItem ></telerik:RadPanelItem> <telerik:RadPanelItem ></telerik:RadPanelItem> </Items> </telerik:RadPanelBar> <script type="text/javascript"> function pageLoad() { var $ = $telerik.$; var last; var templates = $("div.rpTemplate"); templates.click(function () { if (last) if (last == this) return; else $(last).removeClass("highlight"); $(this).addClass("highlight"); last = this; }); } </script> </div> </form></body></html>Regards,
Helen
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.