Rad Button Losing Toggle State On Post Back

6 posts, 1 answers
  1. Tracy
    Tracy avatar
    118 posts
    Member since:
    Nov 2010

    Posted 22 Jul 2013 Link to this post

    Hi,

    I have a rad button inside a command item template of a rad grid.  This button is used to show/hide the filter row of the grid.  My problem is that the button seems to lose its toggle state on post back. 

    For example, if the current toggle state index of the button is 1 and then I do any action that causes a post back, the toggle state index of the button reverts back to 0.  How can I get it to maintain the same selected index.

    Below is my code.

    Thank you for your help.
    Tracy

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="IPS_Gateway.WebForm2" %>
     
    <!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>
     
    </head>
     
    <script type="text/javascript">
       function ShowHideFilter(sender, args) {
        var radGrid = $find("<%= rgvMainGrid.ClientID %>");
        var masterTable = radGrid.get_masterTableView();
        var toggleList = sender.get_selectedToggleStateIndex();
           switch (toggleList) {
              case 0:
                   sender.set_toolTip('Show Filter Row');
                   masterTable.hideFilterItem();
                   break;
              case 1:
                   sender.set_toolTip('Hide Filter Row');
                   masterTable.showFilterItem();
                   break;
        }
    }
    </script>
    <body onkeydown="javascript:if(window.event.keyCode == 13) window.event.keyCode = 9;" >
        <form id="form1" runat="server">
        <act:ToolkitScriptManager ID="tsmManager"  runat="server"  EnablePartialRendering="true" AsyncPostBackTimeOut="600" />
         <telerik:RadAjaxManager  ID="ajaxManager" runat="server"
           <ClientEvents  />
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="rgvMainGrid"   >
                 
                    <UpdatedControls>                    
                        <telerik:AjaxUpdatedControl ControlID="rgvMainGrid" LoadingPanelID="ralpTimer" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
     
        <telerik:RadAjaxLoadingPanel ID="ralpTimer" runat="server" Skin="WebBlue"  EnableEmbeddedSkins="true"  BackgroundPosition="Center" >
            <wuc5:TimerControl ID="wucTimer" runat="server"  />    
        </telerik:RadAjaxLoadingPanel
     
        <asp:SqlDataSource ID="SQLDS_ArgusDBID"             runat="server"  ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>"  SelectCommandType="StoredProcedure" SelectCommand="[Company].[DSP_CompanyMaster-Sel-Ins-Upd-Del]" />
        <asp:SqlDataSource ID="SQLDS_SecurityType"          runat="server"  ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>"  SelectCommandType="StoredProcedure" SelectCommand="[Security].[DSP_SecurityIdentifiers-Sel-Ins-Upd-Del]" />
        <asp:SqlDataSource ID="SQLDS_SecurityUsers"         runat="server"  ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>"  SelectCommandType="StoredProcedure" SelectCommand="[Security].[DSP_SecurityUsers-Sel-Ins-Upd-Del]" />
        <asp:SqlDataSource ID="SQLDS_SavedSettings"         runat="server"  ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>"  SelectCommandType="StoredProcedure" SelectCommand="[System].[DSP_SavedSettings-Sel-Ins-Upd-Del]" />
                    <asp:UpdatePanel ID="uppGrid" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <telerik:RadGrid ID="rgvMainGrid"       runat="server"                  DataSourceID="SQLDS_SecurityUsers"  
                                 EnableEmbeddedSkins="true"         Skin="Office2010Silver"         Height="550px"  Width="1230px"
                                 EnableViewState="true"             AutoGenerateColumns="false"     AllowMultiRowSelection="false"     
                                 AllowFilteringByColumn="true"      EnableHeaderContextMenu="true"  EnableHeaderContextFilterMenu="true"    
                                 AllowAutomaticDeletes="false"      AllowAutomaticInserts="false"   AllowAutomaticUpdates="false"                                  
                                 AllowSorting="true"                EnableLinqExpressions="false"   AllowPaging="true"  PageSize="100" >                                 
                                <ItemStyle              Wrap="false"  />
                                <AlternatingItemStyle   Wrap="false" />
                                <ActiveItemStyle        BackColor="CornflowerBlue" />
                                <HeaderStyle            HorizontalAlign="Center"  />
                                <PagerStyle             AlwaysVisible="true"        Mode="NextPrevNumericAndAdvanced"/>
                                <EditItemStyle      BackColor="CornflowerBlue" />     
                                <ClientSettings     AllowColumnsReorder="true"      ReorderColumnsOnClient="true"       EnablePostBackOnRowClick="false"    EnableRowHoverStyle="false"  
                                    <ClientEvents    />
                                    <Resizing       AllowColumnResize="true"        EnableRealTimeResize="true"         ResizeGridOnColumnResize="true"  AllowRowResize="false"/>
                                    <Selecting      AllowRowSelect="true"    />
                                    <Scrolling      AllowScroll="true"              UseStaticHeaders="true" />                       
                                </ClientSettings>
                                <GroupHeaderItemStyle Font-Size="11px" Font-Names="calibri" Font-Bold="true"  Height="12px"/>
                                <ExportSettings Excel-FileExtension="xls"
                                                Excel-Format="Biff"      OpenInNewWindow="true"
                                                ExportOnlyData="true" IgnorePaging="true" UseItemStyles="true">
                                    
                                </ExportSettings>
                                <MasterTableView    Name="Users"                    DataSourceID="SQLDS_SecurityUsers"  DataKeyNames="UserID"           ClientDataKeyNames="UserId"
                                                    Width="1213px"                  EnableViewState="true"              EditMode="InPlace"              CommandItemDisplay="Top"
                                                     >                                                                                                             
                                    <CommandItemTemplate>
                                        <div style="padding: 1px 0px 7px 0px;height:18px;">
                                            <telerik:RadButton ID="rbtAdd"              runat="server" SkinId="skn_RadGrid_Add"     CommandName="InitInsert"     />
                                            <telerik:RadButton ID="rbtEdit"             runat="server" SkinId="skn_RadGrid_Edit"    CommandName="EditSelected"   />
                                            <telerik:RadButton ID="rbtDelete"           runat="server" SkinId="skn_RadGrid_Delete"  CommandName="DeleteSelected" />
                                            <telerik:RadButton ID="rbtCancel"           runat="server" SkinId="skn_RadGrid_Cancel"  CommandName="CancelAll"      />
                                            <telerik:RadButton ID="rbtSaveNew"          runat="server" SkinId="skn_RadGrid_Save"    CommandName="PerformInsert"  />
                                            <telerik:RadButton ID="rbtSave"             runat="server" Skinid="skn_RadGrid_SaveNew" CommandName="UpdateEdited"   />
                                            <div  style="position:absolute;left:1037px;">
                                            <telerik:RadButton ID="rbtFilters"          runat="server" SkinId="skn_RadGrid_Filter"  ButtonType="StandardButton" ToggleType="CustomToggle" AutoPostBack="false"  EnableViewState="true"    OnClientToggleStateChanged="ShowHideFilter" >
                                                <ToggleStates>
                                                    <telerik:RadButtonToggleState   PrimaryIconUrl="<%$ Resources:Images,FilterExpand16%>"     />
                                                    <telerik:RadButtonToggleState   PrimaryIconUrl="<%$ Resources:Images,FilterCollapse16%>"    />
                                                </ToggleStates>
                                            </telerik:RadButton>                                    
                                        </div>
                                        </div>
                                    </CommandItemTemplate>
                                    <Columns>  
                                        <telerik:GridBoundColumn     DataField="UserId"          UniqueName="UserId"         HeaderText="Id"             HeaderStyle-Width="60px"     SortExpression="UserId"           FilterControlWidth="40px"  FilterImageUrl="<%$ Resources:Images,FilterGray16%>"   ReadOnly="true" />
                                        <telerik:GridBoundColumn     DataField="EmployeeLogin"   UniqueName="EmployeeLogin"  HeaderText="Login Id"       HeaderStyle-Width="150px"    SortExpression="EmployeeLogin"    FilterControlWidth="130px" FilterImageUrl="<%$ Resources:Images,FilterGray16%>" />
                                        <telerik:GridBoundColumn     DataField="EmployeeNumber"  UniqueName="EmployeeNumber" HeaderText="Emp #"          HeaderStyle-Width="80px"     SortExpression="EmployeeNumber"   FilterControlWidth="60px"  FilterImageUrl="<%$ Resources:Images,FilterGray16%>" ReadOnly="true" />                                     
                                        <telerik:GridBoundColumn     DataField="UserName"        UniqueName="UserName"       HeaderText="User Name"      HeaderStyle-Width="190px"    SortExpression="UserName"         FilterControlWidth="170px" FilterImageUrl="<%$ Resources:Images,FilterGray16%>" />
                                        <telerik:GridBoundColumn     DataField="EmailAddress"    UniqueName="EmailAddress"   HeaderText="Email Address"  HeaderStyle-Width="190px"    SortExpression="EmailAddress"     FilterControlWidth="170px" FilterImageUrl="<%$ Resources:Images,FilterGray16%>" />
                                        <telerik:GridDropDownColumn  DataField="SecurityType"    UniqueName="SecurityType"   HeaderText="Sec Type"       HeaderStyle-Width="100px"    SortExpression="SecurityType"     FilterControlWidth="70px"  FilterImageUrl="<%$ Resources:Images,FilterGray16%>"   DataSourceID="SQLDS_SecurityType" DefaultInsertValue="Group" DropDownControlType="DropDownList" ListTextField="LevelCode"  ListValueField="LevelCode"/>
                                        <telerik:GridDropDownColumn DataField="DefaultDBID"     UniqueName="DefaultDBID"    HeaderText="Default DBID"    HeaderStyle-Width="90px"     SortExpression="DefaultDBID"      FilterControlWidth="70px"  FilterImageUrl="<%$ Resources:Images,FilterGray16%>" DefaultInsertValue="IPSMAIN"  DataSourceID="SQLDS_ArgusDBID"      DropDownControlType="DropDownList"    ListTextField="ArgusDBID"  ListValueField="ArgusDBID" />                                                       
                                        <telerik:GridBoundColumn    DataField="CompanyCode"     UniqueName="CompanyCode"    HeaderText="Company"         HeaderStyle-Width="80px"     SortExpression="CompanyCode"      FilterControlWidth="60px"  FilterImageUrl="<%$ Resources:Images,FilterGray16%>" ReadOnly="true"/>                          
                                        <telerik:GridBoundColumn    DataField="EmployeeStatus"  UniqueName="EmployeeStatus" HeaderText="Employee Status" HeaderStyle-Width="110px"    SortExpression="EmployeeStatus"   FilterControlWidth="90px"  FilterImageUrl="<%$ Resources:Images,FilterGray16%>" ReadOnly="true"/>
                                        <telerik:GridBoundColumn    DataField="CreatedBy"       UniqueName="CreatedBy"      HeaderText="Created By"      HeaderStyle-Width="160px"    SortExpression="CreatedBy"        FilterControlWidth="140px" FilterImageUrl="<%$ Resources:Images,FilterGray16%>" Display="false"  ReadOnly="true"/>                          
                                        <telerik:GridBoundColumn    DataField="CreatedDate"     UniqueName="CreatedDate"    HeaderText="Created Date"    HeaderStyle-Width="160px"    SortExpression="CreatedDate"      FilterControlWidth="140px" FilterImageUrl="<%$ Resources:Images,FilterGray16%>" Display="false"  ReadOnly="true"/>                          
                                        <telerik:GridBoundColumn    DataField="UpdatedBy"       UniqueName="UpdatedBy"      HeaderText="Updated By"      HeaderStyle-Width="160px"    SortExpression="UpdatedBy"        FilterControlWidth="140px" FilterImageUrl="<%$ Resources:Images,FilterGray16%>" Display="false"  ReadOnly="true"/>                         
                                        <telerik:GridBoundColumn    DataField="UpdatedDate"     UniqueName="UpdatedDate"    HeaderText="Updated Date"    HeaderStyle-Width="160px"    SortExpression="UpdatedDate"      FilterControlWidth="140px" FilterImageUrl="<%$ Resources:Images,FilterGray16%>" Display="false"  ReadOnly="true"/>                        
                                        <telerik:GridBoundColumn    DataField="ActiveFlag"      UniqueName="ActiveFlag"     Visible="false"              />                          
                                         
                                    </Columns>
                                </MasterTableView>
                            </telerik:RadGrid>
                       </ContentTemplate>
                    </asp:UpdatePanel>
     
    </form>
    </body>
    </html>
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 25 Jul 2013 Link to this post

    Hi Tracy,

    I have tried to reproduce the mentioned issue but to no avail. You can find a short video with the test in the attached archive and then notify me what I am missing.

    Could you please try to reproduce the issue with the attached VS example and then tell me what changes you have made, so that I can make an investigation locally? Note that I have replaced the current RadGrid's datasource as it was not provided with the Northwind datasource which can be found in the installation folder of the Live Demos (e.g. C:\Program Files (x86)\Telerik\RadControls for ASP.NET AJAX Q3 2012\Live Demos\App_Data\Northwind.mdf).

    We are looking forward to receiving your answer.

    Regards,
    Danail Vasilev
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tracy
    Tracy avatar
    118 posts
    Member since:
    Nov 2010

    Posted 25 Jul 2013 Link to this post

    Hi Danail,

    Thank you for your response.

    I don't think I explained my scenario correctly in my original post.  The difference between your example and my code is that your button that is causing the postback is outside the command item template and isn't executing one of the built in commands (ie. InitInsert, EditSelected, CancelAll) of the grid.

    To reproduce my problem, click the Cancel button that is inside the command item template so that the built in command, CancelAll is executed, this will reproduce the behavior I am experiencing.

    <telerik:RadButton ID="rbtCancel" runat="server" SkinID="skn_RadGrid_Cancel" CommandName="CancelAll" />

    Thanks for your help.
    Tracy


  5. Tracy
    Tracy avatar
    118 posts
    Member since:
    Nov 2010

    Posted 29 Jul 2013 Link to this post

    Hi Danail,

    Any thoughts on my problem?

    Thank You
    Tracy
  6. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 30 Jul 2013 Link to this post

    Hello Tracy,

    Thank you for the additional clarification.

    The mentioned internal commands of the RadGrid - InitInsert, EditSelected, CancelAll, etc make an implicit call to the Rebind() method of the grid in order to refresh the control's content and fetch the latest information from the grid source. Therefore it is normal for controls which are located inside Command Item Template to not persist their state in the ViewState after postback. You can make a simple test by rebind the Grid. For example:
    ASPX:
    <telerik:RadButton ID="RadButton1" runat="server" Text="postBack" OnClick="RadButton1_Click" />
     
    <asp:UpdatePanel ID="uppGrid" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <telerik:RadGrid ID="rgvMainGrid" runat="server" DataSourceID="SQLDS_SecurityUsers" OnItemDataBound="rgvMainGrid_ItemDataBound"
                EnableEmbeddedSkins="true" Skin="Office2010Silver" Height="550px" Width="1230px"
                EnableViewState="true" AutoGenerateColumns="false" AllowMultiRowSelection="false"
                AllowFilteringByColumn="true" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true"
                AllowAutomaticDeletes="false" AllowAutomaticInserts="false" AllowAutomaticUpdates="false"
                AllowSorting="true" EnableLinqExpressions="false" AllowPaging="true" PageSize="100">
            ...
            </telerik:RadGrid>
        </ContentTemplate>
    </asp:UpdatePanel>
    C#:
    protected void RadButton1_Click(object sender, EventArgs e)
    {
        rgvMainGrid.Rebind();
    }

    You can also find the list of the Commands that invoke Rebind() implicitly in this help article.

    What you can do, in order to persist the RadButton's ToggleState after rebinding the grid is to store the current state of the button inside a hidden field, so that every time the ItemDataBound event is triggered its value can be obtained. For example:
    JavaScript:
    function OnClientToggleStateChanged(sender, args) {
        $get("<%=hdValue.ClientID%>").value = sender.get_selectedToggleStateIndex();
    }
    ASPX:
    <asp:HiddenField ID="hdValue" runat="server" Value="0" />
    <asp:UpdatePanel ID="uppGrid" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <telerik:RadGrid ID="rgvMainGrid" runat="server" DataSourceID="SQLDS_SecurityUsers" OnItemDataBound="rgvMainGrid_ItemDataBound"
                ...>
                ...
                <MasterTableView Name="Users" DataSourceID="SQLDS_SecurityUsers" DataKeyNames="UnitsInStock" ClientDataKeyNames="UnitsInStock"
                    Width="1213px" EnableViewState="true" EditMode="InPlace" CommandItemDisplay="Top">
                    <CommandItemTemplate>
                        <div style="padding: 1px 0px 7px 0px; height: 18px;">
                            ...
                            <div style="position: absolute; left: 1037px;">
                                <telerik:RadButton ID="rbtFilters" runat="server" SkinID="skn_RadGrid_Filter" ButtonType="StandardButton" ToggleType="CustomToggle" AutoPostBack="false" EnableViewState="true" OnClientToggleStateChanged="OnClientToggleStateChanged">
                                    <ToggleStates>
                                        <telerik:RadButtonToggleState PrimaryIconUrl="eFlash.png" />
                                        <telerik:RadButtonToggleState PrimaryIconUrl="eClose.png" />
                                    </ToggleStates>
                                </telerik:RadButton>
                            </div>
     
                        </div>
                    </CommandItemTemplate>
                    ...
                </MasterTableView>
            </telerik:RadGrid>
        </ContentTemplate>
    </asp:UpdatePanel>

    C#:

    protected void rgvMainGrid_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridCommandItem)
        {
            GridCommandItem commandItem = e.Item as GridCommandItem;
            RadButton radButton1 = commandItem.FindControl("rbtFilters") as RadButton;
     
            radButton1.SelectedToggleStateIndex = int.Parse(hdValue.Value);
        }
    }

    You can also find the full VS example in the attached archive.

    Regards,
    Danail Vasilev
    Telerik
    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 the blog feed now.
  7. Tracy
    Tracy avatar
    118 posts
    Member since:
    Nov 2010

    Posted 31 Jul 2013 Link to this post

    Thank you Danial that worked.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017