This is a migrated thread and some comments may be shown as answers.

Something Creative with RadPanelBar.

4 Answers 46 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

4 Answers, 1 is accepted

answered on 04 Jun 2014, 11:49 AM

Hi Ashim,

This can be achieved as you change the border of the panel bars. Check this out:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

<style>

html .RadPanelBar .rpRootGroup {

border: 0;

}

.rpItem {

border-width: 1px 1px 0 1px;

border-style: solid;

border-color: #828282;

}

.rpLast {

border-width: 1px;

}

.rpItem .rpItem {

border: 0;

}

html .RadPanelBar .rpLink {

border-width: 0 0 1px 0 !important;

}

.rpItem.invalid {

border-color: red;

}

.rpItem.invalid + .rpItem {

border-top-color: red;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

function pageLoad() {

$('li.rpItem:first').addClass('invalid');

}

</script>

<telerik:RadPanelBar ID="RadPanelBar1" runat="server">

<Items>

<telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">

<Items>

<telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1"></telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Root RadPanelItem3">

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</form>

</body>

</html>

I hope this helps.

Regards,
Hristo Valyavicharski
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.