3 step panelbar with validaton, postback issues

5 posts, 0 answers
  1. Christian
    Christian avatar
    64 posts
    Member since:
    Apr 2008

    Posted 25 Feb 2011 Link to this post

    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?

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 01 Mar 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Christian
    Christian avatar
    64 posts
    Member since:
    Apr 2008

    Posted 01 Mar 2011 Link to this post

    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>


  5. Christian
    Christian avatar
    64 posts
    Member since:
    Apr 2008

    Posted 01 Mar 2011 Link to this post

    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)
  6. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 07 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017