This is a migrated thread and some comments may be shown as answers.

Rad Button Losing Toggle State On Post Back

5 Answers 327 Views

Button

This is a migrated thread and some comments may be shown as answers.

Tracy asked on 22 Jul 2013, 08:01 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml" >

<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>

</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>

5 Answers, 1 is accepted

answered on 25 Jul 2013, 04:09 PM

RadGrid-RadButton-test.zip

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.

answered on 25 Jul 2013, 05:20 PM

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

Accepted

answered on 30 Jul 2013, 02:38 PM

RadGrid-RadButton-test.zip

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>

</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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Rad Button Losing Toggle State On Post Back

5 Answers, 1 is accepted