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
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
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.