Something Creative with RadPanelBar.

5 posts, 0 answers
  1. Ashim
    Ashim avatar
    3 posts
    Member since:
    Aug 2013

    Posted 02 Jun 2014 Link to this post

    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?
  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 04 Jun 2014 Link to this post

    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.

     
  3. Ashim
    Ashim avatar
    3 posts
    Member since:
    Aug 2013

    Posted 04 Jun 2014 in reply to Hristo Valyavicharski Link to this post

    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.
  4. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 04 Jun 2014 Link to this post

    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.

     
  5. Ashim
    Ashim avatar
    3 posts
    Member since:
    Aug 2013

    Posted 05 Jun 2014 in reply to Hristo Valyavicharski Link to this post

    thanks ... it helped a lot :)
Back to Top