3 step panelbar with validaton, postback issues

[Christian]

Hi,

I have a RadPanel that has 3 radpanelitems, and for each of these panelitems i have a validation group that checks if all inputs on each panelitem is correct, if they are i want the user to hit a Next button that does the validation, so far all good.

If the validation goes trough in the first panelitem it does a postback and all values is lost, i only want it to validate and then enable and expand the second panelitem clientside, is this possible?

[Shinu]

Hello Christian,



You could use client side api to expand the RadPanelItem based on your requirement. Check the following documentation to know more about that.
RadPanelItem object


I suppose, the controls are placed in ItemTemplate of RadPanelItem. If so, to access the controls placed in RadPanelItem, follow the approach described in the documentation and validate using client code.
Accessing Controls Inside Templates



-Shinu.

[Christian]

Hello Shinu,

Thanks for your responce, i managed to find a way around it, since i dont want do do any postbacks i had to make javascripts for handling all the validations..

In the .Aspx i have set the second and third panelbaritems disabled, and when i do a control if the first validation group is valid i set the next panelbaritem enabled and expanded.

function checkStep1()
{
    if (Page_ClientValidate('Step1') == true)
    {
        var panelBar = $find("ctl00_phContent_pbCaseRegistration");
        var item = panelBar.findItemByText("2 - Beskrivning");
        item.enable();
        item.expand();
        item.focus();
    }
}

To prevent postback i also add an attribute to the button,

ui.btnStep2.Attributes.Add("OnClick", "checkStep1(); return false;");

But when doing this all the controls inside the second panelbaritem is still disabled, i guess this is inheritated by the panelbaritem (except for the texteditor which is still enabled for some reason) from the aspx values.

how do i set all underlaing controls enabled when setting the radpanelitem enabled (client side), without doing a postback?

Would i need to set All controls in the panelbaritem enabled using the javascript? seems lika alot of hassle and i think that if you enable the panelbaritem it should set all controls enabled aswell.

This should be possible, the aspx still is client code, so when setting the panelbaritem enabled trough javascript, it should render all controls enabled automaticly.

<telerik:RadPanelItem runat="server" Text="1 - Ärendeinformation" Expanded="true">
                <Items>
                    <telerik:RadPanelItem runat="server" Value="panCaseinfo">
                        <ItemTemplate>
                            <table class="text" style="padding:10px;" cellspacing=0 width="100%">
                            <tr>
                            <td align=center>
                                <asp:Image ID="imgCaseType" runat="server" ImageUrl="images/infoIcon2.jpg" /><asp:Label ID="labCaseTypeHeader" runat="server" Text="Ärendetyp"></asp:Label><br />

                                       <telerik:RadComboBox ID="cmbCaseType" runat="server" Skin="Windows7" Height="160px" Style="vertical-align: middle;" Width="225px">
                                            <ItemTemplate>
                                                <div id="div1">

                                                    <telerik:RadTreeView ID="tvCaseType" runat="server" CheckBoxes="True"
                                                        Height="160px" Width="100%" OnClientNodeChecked="nodeClicking">

                                                    </telerik:RadTreeView>
                                                </div>
                                            </ItemTemplate>
                                            <Items>
                                                <telerik:RadComboBoxItem Text="" />
                                            </Items>
                                          <CollapseAnimation Type="None" /><ExpandAnimation Type="None" />
                                        </telerik:RadComboBox><br />

                                        <asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="ClientValidate" ErrorMessage="CustomValidator" Display="Dynamic" ValidationGroup="Step1">Vänligen ange En ärendetyp</asp:CustomValidator>
                                        <br />
                                <asp:Image ID="imgCaseSeverity" runat="server" ImageUrl="images/infoIcon2.jpg" />
                                <asp:Label runat="server" ID="labCaseSeverityHeader" Text="Omfattning"></asp:Label><br />
                                <telerik:RadComboBox ID="cmbCaseSeverity" runat="server">
                                </telerik:RadComboBox>
                                <br />
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Vänligen ange omfattning" ControlToValidate="cmbCaseSeverity" ValidationGroup="Step1"></asp:RequiredFieldValidator>
                                <br />
                                <asp:Image ID="imgCharacter" runat="server" ImageUrl="images/infoIcon2.jpg" />
                                <asp:Label runat="server" ID="labCaseCharacterHeader" Text="Karaktär"></asp:Label><br />
                                <telerik:RadComboBox ID="cmbCaseCharacter" runat="server">
                                </telerik:RadComboBox>
                                <br />
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Vänligen ange karaktär" ValidationGroup="Step1" ControlToValidate="cmbCaseCharacter"></asp:RequiredFieldValidator>
                                <br />
                                <asp:Panel ID="panEmailNotification" runat="server">
                                    <asp:Image ID="imgEmailNotification" runat="server" ImageUrl="images/infoIcon2.jpg" />
                                    <asp:Label ID="labCaseNotificationHeader" runat="server"
                                        Text="Vill du ha löpande information om ditt ärende?"></asp:Label>
                                    <br />
                                    <asp:Label ID="label11" runat="server" Text="Skickas till: "></asp:Label>
                                    <asp:Label ID="labEmail" runat="server" Text="epostadress"></asp:Label>
                                    <br />
                                    <asp:RadioButton ID="rbEmailNotificationYes" runat="server" Text="Ja" GroupName="notification" Checked="True" />
                                    <asp:RadioButton ID="rbEmailNotificationNo" runat="server" Text="Nej" GroupName="notification" />
                                    <br />
                                </asp:Panel>
<%--                                <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="RequiredFieldValidator" ValidationGroup="Step1" ControlToValidate="cmbCaseCharacter"></asp:RequiredFieldValidator>
--%>                                <br />
                                <asp:Button ID="btnStep2" runat="server" Text="Nästa" ValidationGroup="Step1" OnClientClick="checkStep1()" />
                            </td>
                            </tr>
                            </table>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>

            <telerik:RadPanelItem runat="server" Text="2 - Beskrivning" Enabled="False">
                <Items>
                    <telerik:RadPanelItem runat="server" Value="panCaseDescription">
                        <ItemTemplate>
                            <table class="text" style="padding:10px;" cellspacing="0" width="100%">
                            <tr>
                            <td align="center">
                                <asp:Label ID="Label1" runat="server" Text="Rubrik"></asp:Label><br />
                                <telerik:RadTextBox ID="txtCaseHeader" runat="server" Width="250px">
                                </telerik:RadTextBox><br />
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="Vänligen ange en rubrik" ValidationGroup="Step2" ControlToValidate="txtCaseHeader"></asp:RequiredFieldValidator>
                                <br />
                                <asp:Label ID="Label10" runat="server" Text="Beskrivning"></asp:Label><br />
                                <telerik:RadEditor ID="edCaseText" runat="server" EditModes="Design" CssClass="text"
                                    Height="200px" Skin="Sitefinity" ToolsFile="~/BasicSetOfTools.xml" Width="100%" ContentAreaCssFile="EditorContentCSS.css">
                                    <CssFiles>
                                        <telerik:EditorCssFile Value="EditorCSS.css" />
                                    </CssFiles>
                                    <imagemanager deletepaths="~/images/NotiserTextEditor"
                                        searchpatterns="*.jpg,*.jpeg,*.gif,*.png" uploadpaths="~/images/NotiserTextEditor"
                                        viewpaths="~/images/NotiserTextEditor" />
                                    <Content>
                                    </Content>
                                </telerik:RadEditor><br />
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Vänligen ange en beskrivning" ValidationGroup="Step2" ControlToValidate="edCaseText"></asp:RequiredFieldValidator>
<br />
                                <asp:Button ID="btnStep3" runat="server" Text="Nästa" ValidationGroup="Step2" />

                            </td>
                            </tr>
                            </table>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>

[Christian]

I have tried to add another javascript to disable step 2 & 3 items, but i use contentpages and i dont seem to be able to get the onload event to fire.

i also tried to do this at the very end directly on the .aspx file, where the items should be rendered, but i get a javascript error telling me that the control os not avalible (null)

[Dimitar Terziev]

Hello Christian,

As you have noticed, setting a particular panelbar item enabled through javascript, is not affecting the controls in it. My suggestion is to enable it on server side and use an ajax postback, which would make it smooth and not so noticeable. What seems not right is, that you are loosing the values from the controls in the panelbar items upon postback. In general they should be saved in the ViewState, so in order to examine what is causing this behavior, please open a support ticket and send us a runnable version of your project.

Best wishes,
Dimitar Terziev
the Telerik team