Sliding Panel bar issue when postback occurs

2 posts, 0 answers
  1. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 12 Sep 2012 Link to this post

    Hi all I used the following example

    http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/defaultcs.aspx 

    every thing works fine but inside my panel bar I am having a RadioButton List  which causes a postback, due to this the sliding panel bar closes. How can I over come this error

    This is my design

    <div class="leftPanelBarContainer">
            <div id="slidingDiv" style="visibility: hidden" runat="server">
              
        <telerik:RadPanelBar runat="server" ID="rdpbSalary" ExpandMode="FullExpandedItem"
                    Skin="Vista" EnableEmbeddedSkins="false" Width="550px" Height="300px">
                    <Items>
                        <telerik:RadPanelItem Expanded="true" Text="Employee Salary Information" runat="server"
                            Selected="true">
                            <Items>
                                <telerik:RadPanelItem Value="SalaryInformation" runat="server">
                                    <ItemTemplate>
                                        <div style="float: right; font-family: Verdana; margin-right: 15px;">
                                            <span style="color: Red;">*</span> Denotes are Mandatory
                                        </div>
                                        <br />
                                        <div class="text" style="background-color: #ffffff">
                                            <ul class="formList" id="salaryinfo">
                                                <li>
                                                    <asp:Label Width="155px" runat="server" CssClass="label1" ID="lblSalaryPayRate" AssociatedControlID="rdbtnlstPayRate">What is the Pay Rate? <span style="color:Red">*</span></asp:Label>
                                                    <asp:RadioButtonList ID="rdbtnlstPayRate" runat="server" AutoPostBack="true" RepeatDirection="Horizontal"
                                                        OnSelectedIndexChanged="rdbtnlstPayRate_SelectedIndexChanged" Style="width: 155px"
                                                        ValidationGroup="salaryValidation1">
                                                        <asp:ListItem Value="S">Salary</asp:ListItem>
                                                        <asp:ListItem Value="H">Hourly</asp:ListItem>
                                                    </asp:RadioButtonList>
                                                    <asp:RequiredFieldValidator ID="rfvsalaryTypeID" runat="server" ControlToValidate="rdbtnlstPayRate"
                                                        CssClass="error" ErrorMessage="Please Select One Pay Rate" ValidationGroup="salaryValidation1"></asp:RequiredFieldValidator>
                                                </li>
                                                <li>
                                                    <asp:Label runat="server" Width="150px" CssClass="label1" ID="lblsalaryPeriodWages"
                                                        AssociatedControlID="txtsalaryPeriodWages">Period Wages <span style="color:Red">*</span></asp:Label>
                                                    <telerik:RadNumericTextBox runat="server" ID="txtsalaryPeriodWages" Width="200px"
                                                        ValidationGroup="salaryValidation" IncrementSettings-InterceptMouseWheel="false"
                                                        IncrementSettings-InterceptArrowKeys="false">
                                                    </telerik:RadNumericTextBox>
                                                    <asp:RequiredFieldValidator runat="server" ID="rqrdsalaryWages" ValidationGroup="salaryValidation"
                                                        ForeColor="Red" ControlToValidate="txtsalaryPeriodWages" ErrorMessage="Required Period Wages"></asp:RequiredFieldValidator>
                                                </li>
                                                <li>
                                                    <asp:Label runat="server" CssClass="label1" Width="150px" ID="lblsalaryRatePay" AssociatedControlID="txtsalaryRatePay">Rate of Pay <span style="color:Red">*</span></asp:Label>
                                                    <telerik:RadNumericTextBox runat="server" ID="txtsalaryRatePay" Width="200px" ValidationGroup="hourlyValidation"
                                                        IncrementSettings-InterceptMouseWheel="false" IncrementSettings-InterceptArrowKeys="false">
                                                    </telerik:RadNumericTextBox>
                                                    <asp:RequiredFieldValidator runat="server" ID="rqrdsalaryRatePay" ValidationGroup="hourlyValidation"
                                                        ForeColor="Red" ControlToValidate="txtsalaryRatePay" ErrorMessage="Required Rate of Pay "></asp:RequiredFieldValidator>
                                                </li>
                                                <li>
                                                    <asp:Label runat="server" CssClass="label1" Width="150px" ID="lblSalaryOthers" AssociatedControlID="txtsalaryOthers">Hours <span style="color:Red">*</span></asp:Label>
                                                    <telerik:RadNumericTextBox runat="server" ID="txtsalaryOthers" Width="200px" ValidationGroup="hourlyValidation"
                                                        IncrementSettings-InterceptMouseWheel="false" IncrementSettings-InterceptArrowKeys="false">
                                                    </telerik:RadNumericTextBox>
                                                    <asp:RequiredFieldValidator runat="server" ValidationGroup="hourlyValidation" ID="rqrdsalaryOther"
                                                        ControlToValidate="txtsalaryOthers" ErrorMessage="Required Other Hours Rate"
                                                        ForeColor="Red"></asp:RequiredFieldValidator>
                                                </li>
                                            </ul>
                                            <br />
                                            <asp:ValidationSummary runat="server" ID="validationSummary2" CssClass="validationSummary" />
                                            <table style="margin-left: 50px;">
                                                <tr>
                                                    <td>
                                                        <telerik:RadButton ID="rdbtnsalarySave" ValidationGroup="salaryValidation1" runat="server"
                                                            Text="Save & Next" OnClick="rdbtnsalarySave_Click">
                                                        </telerik:RadButton>
                                                          
                                                        <telerik:RadButton ID="rdbtnsalaryCancel" runat="server" Text="Cancel" OnClick="rdbtnsalaryCancel_Click">
                                                        </telerik:RadButton>
                                                        <br />
                                                    </td>
                                                </tr>
                                            </table>
                                            <br />
                                        </div>
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelBar>
         
                 
            </div>
            <telerik:RadCodeBlock ID="rdcode" runat="server">
                <script type="text/javascript">
                    var panelDomElement = $get('<%= rdpbSalary.ClientID %>');
                    var timage = $get('<%= lnkAdd.ClientID %>');
     
                    if (panelDomElement) {
                        SetUpAnimation(timage.id, Telerik.Web.UI.jSlideDirection.Center, panelDomElement);
                    }
     
     
                    function SetUpAnimation(image, direction, element) {
                        element.style.position = "relative";
                        var slider = document.getElementById(image);
     
                        var expanded = false;
     
                        var expandAnimation = new Telerik.Web.UI.AnimationSettings({});
                        var collapseAnimation = new Telerik.Web.UI.AnimationSettings({});
     
                        var slide = new Telerik.Web.UI.jSlide(element, expandAnimation, collapseAnimation, false);
     
                        slide.initialize();
     
                        slide.set_direction(direction);
     
                        slider.onclick = function () {
                            element.parentNode.style.visibility = "visible";
                            element.parentNode.style.display = "block";
                            if (!expanded) {
                                slide.expand();
                            }
                            else {
                                slide.collapse();
                            }
                            expanded = !expanded;
                            return false;
                        }
                    }
                </script>
            </telerik:RadCodeBlock>
        </div>
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 17 Sep 2012 Link to this post

    Hi Dorababu,

    When you have a post back of the page it is expected that the

    Here are few approaches that you can try out. The first one is to set the AutoPostBack="false" of the RadioButtonList, so that the page does not postback when you select an item from the RadioButtonList. Another one is to use the RadAjaxPanel and make an ajax request instead of a full postback of the page (for instance you can wrap the template in the RadPanelBar control).  
     
    Kind regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top