PanelBar Child Item Validation

[Bruce]

Hello, I need to basically create validation to occur depending on the users selection of a RadPanelBar Child Item Selection.

So my issue is this. The user selects a button to move on to the next page, however, if they don't choose a child item of the panelbar then it causes an error when rendering the next page, so I would like to either disable the button depending on if the user has chosen a child item of the panel bar or display an error message that they need to select a child item in the panelbar before moving on, or both.

I assume that in order to accomplish this I am going to have to use Javascript? If so can anyone give me an idea of the code that I need to produce to accomplish my goal? I thank you for your help in advance.

[Peter]

Hello Bruce,

Here is one possible solution.

<script type="text/javascript">
        function OnClientItemClicked(sender, args) {
            var button = $find('<%=RadButton1.ClientID %>');
            if (args.get_item().get_level() > 0) {
                button.set_enabled(true);
            }
            else {
                button.set_enabled(false);
            }
        }
        function pageLoad() {
            var panelBar = $find('<%=RadPanelBar1.ClientID %>');
            var button = $find('<%=RadButton1.ClientID %>');
            for (var i = 0; i < panelBar.get_allItems().length; i++) {
                var item = panelBar.get_allItems()[i];
                if ((item.get_level() > 0) && item.get_selected()) {
                    button.set_enabled(true);
                    return;
                }
                button.set_enabled(false);
            }
        }
    </script>
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server"
        OnClientItemClicked="OnClientItemClicked" >
        <Items>
            <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1" Expanded="true">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2" Selected=true>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2" Expanded="true">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Root RadPanelItem3">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>
    <telerik:RadButton ID="RadButton1" runat="server" OnClick="RadButton1_Click" Text="RadButton">
    </telerik:RadButton>

You can use the client API chapter in the help for reference -
http://www.telerik.com/help/aspnet-ajax/panelbar-client-side-basics.html


Best wishes,
Peter
the Telerik team