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

Rows selected during ajax postback are lost

3 Answers 114 Views

Grid

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

James asked on 27 Jul 2010, 11:59 PM

I have a scenario where there are two divs on a page. One contains a RadGrid. Both are setup in the RadAjaxManager to only update themselves, not each other. My problem occurs when the non-Grid div is causing a post back, I select some items in the RadGrid but once the postback completes, my selected items in the grid are cleared. How do I prevent this?

Here is a real basic example of my setup:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Grid.aspx.cs" Inherits="TelerikTest.Grid" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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>Untitled Page</title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="scriptManager" runat="server"></telerik:RadScriptManager>

<telerik:RadAjaxManager ID="ajaxManager" runat="server" DefaultLoadingPanelID="ajaxLoadingPanel" >

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="divGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="divGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="divNonGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="divNonGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="ajaxLoadingPanel" runat="server" Skin="" Transparency="20" >

<div id="Div1" style="background-color: #F0F0F0; height:100%; width:100%;" runat="server"></div>

</telerik:RadAjaxLoadingPanel>

<div>

<div id="divNonGrid" runat="server">

<asp:Button ID="btnNonGrid" runat="server" Text="non-grid" />

</div>

<div id="divGrid" runat="server">

<asp:Button ID="btnGrid" runat="server" Text="grid" />

<telerik:RadGrid ID="RadGrid1" runat="server">

<MasterTableView>

<RowIndicatorColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridClientSelectColumn UniqueName="column">

</telerik:GridClientSelectColumn>

<telerik:GridBoundColumn UniqueName="ID" DataField="ID" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="column1">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="column2">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="True" UseClientSelectColumnOnly="True" />

</ClientSettings>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

Just load a couple items into the grid on page load and put a sleep for a couple seconds when the page is posted back. In order to reproduce: Click the non-grid button, quickly select an item in the grid by clicking the check box, notice that the selection is removed when the ajax response returns.

If I remove the divGrid from being declared in the ajax manager, the grid retains its selected items even when selected during the ajax postback.

3 Answers, 1 is accepted

answered on 28 Jul 2010, 12:20 AM

I noticed that if I change the AjaxManager like this:

<telerik:RadAjaxManager ID="ajaxManager" runat="server" DefaultLoadingPanelID="ajaxLoadingPanel" >

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="btnGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="divNonGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="divNonGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

It behaves as I would expect but I don't understand why. The actual page I am having this problem on is much more complicated than the simple example I posted. Can you explain why it doesn't always work when I use a div as the control id?

Accepted

answered on 02 Aug 2010, 01:12 PM

modifiedpanel.zip

Hello James,

Note that control being registered through RegisterAsyncPostBackControl must implement either INamingContainer, IPostBackDataHandler, or IPostBackEventHandler. To verify this you can try the code snippet bellow:

<asp:Panel runat="server" ID="AJAXTrigger">

</asp:Panel>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Label ID="Label1" runat="server">

</asp:Label>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="AJAXTrigger" />

</Triggers>

</asp:UpdatePanel>

The easiest approach to workaround this behavior is to register a simple class that inherits the Panel class and implements the INamingContainer interface. Attached to this post is a small sample that demonstrates this approach.

I hope this helps

Best regards,
Martin
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items