ItemTemplate and Selected Item color

6 posts, 0 answers
  1. Samantha
    Samantha avatar
    9 posts
    Member since:
    Apr 2011

    Posted 18 May 2011 Link to this post

    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.
  2. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 20 May 2011 Link to this post

    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

    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Samantha
    Samantha avatar
    9 posts
    Member since:
    Apr 2011

    Posted 20 May 2011 Link to this post

    <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>
  5. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 25 May 2011 Link to this post

    Hi Samantha,

    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.

  6. Samantha
    Samantha avatar
    9 posts
    Member since:
    Apr 2011

    Posted 25 May 2011 Link to this post

    That suggestion will work well for mouseover and mouseout, but how will it help me with the selected item?
  7. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 26 May 2011 Link to this post

    Hi Samantha,

    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.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017