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

Something Creative with RadPanelBar.

4 Answers 29 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.
Ashim
Top achievements
Rank 1
Ashim asked on 02 Jun 2014, 06:55 AM
Hello Members,

I am using RadPanelBar and inside each panel some asp validators are there , now when the panel is close and someone clicks on the button outside the panel nothing shows up because the error message is inside the panel , so i was thinking about showing some red border on the particular panel where validation is failing.

Any Help?

4 Answers, 1 is accepted

Sort by
0
Hristo Valyavicharski
Telerik team
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">
 
<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>
                        <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.

 
0
Ashim
Top achievements
Rank 1
answered on 04 Jun 2014, 01:52 PM
it helped. but its showing red border on first item as expected from the script for pageload event.But i what i want is .. it should validate the page first in different panels different valdiations are there if any of them is failed i want to show red border on that panel .
How can i approach like this.
Thank you so much for your help.
0
Hristo Valyavicharski
Telerik team
answered on 04 Jun 2014, 02:21 PM
You could perform the entire validation on the client as you use custom validators. This line apply the red border only for the first panel bar:

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

You could modify it and display red border around every panel bar.

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.

 
0
Ashim
Top achievements
Rank 1
answered on 05 Jun 2014, 06:06 AM
thanks ... it helped a lot :)
Tags
General Discussions
Asked by
Ashim
Top achievements
Rank 1
Answers by
Hristo Valyavicharski
Telerik team
Ashim
Top achievements
Rank 1
Share this question
or