[Solved] RadGrid auto refresh sample doesn't work with editable grid and scrollbar jumps to the top every time

[Gary Meagher]

I'm using the example on your website with RadGrid autorefresh which includes UpdatePanel, UpdateProgress and ASP.NET AJAX Timer.
http://demos.telerik.com/aspnet-ajax/controls/examples/integration/aspajaxgridapplication/defaultcs.aspx?product=grid

I have 2 problems with this example and I couldn't make it work...

The scrollbar keeps jumping to the top everytime there's a refresh...
In your example you have just a few rows but if you have more rows the focus will jump to the top if the user is looking at a bottom row.

Another major issue for us is we need one column to be editable for user comments and the problem is the values are not stored in the datatable that is binded to the RadGrid.
When I remove the timer and updatepanel the edit works fine.

I would appreciate your help since our business requirement is to get the RadGrid auto refreshed but still allow it to be editable.

I appreciate your help.

Here's a snippet of my code:

<telerik:RadAjaxManagerProxy runat="server" ID="RadAjaxManager1" >

            <AjaxSettings>

                <telerik:AjaxSetting AjaxControlID="grid">

                    <UpdatedControls>

                        <telerik:AjaxUpdatedControl ControlID="grid" />

                        <telerik:AjaxUpdatedControl ControlID="RadWindowManager1" />

                          

                          

                    </UpdatedControls>

                </telerik:AjaxSetting> 

                <telerik:AjaxSetting AjaxControlID="btnLock">

                    <UpdatedControls>

                        <telerik:AjaxUpdatedControl ControlID="grid" />

                    </UpdatedControls>

                </telerik:AjaxSetting> 

                <telerik:AjaxSetting AjaxControlID="btnRescan">

                    <UpdatedControls>

                        <telerik:AjaxUpdatedControl ControlID="grid" />

                    </UpdatedControls>

                </telerik:AjaxSetting> 

                <telerik:AjaxSetting AjaxControlID="btnUpdate">

                    <UpdatedControls>

                        <telerik:AjaxUpdatedControl ControlID="grid" />

                         <telerik:AjaxUpdatedControl ControlID="UpdatePanel1" />

                    </UpdatedControls>

                </telerik:AjaxSetting>

                <telerik:AjaxSetting AjaxControlID="btnCancel">

                    <UpdatedControls>

                        <telerik:AjaxUpdatedControl ControlID="grid" />

                    </UpdatedControls>

                </telerik:AjaxSetting>

                  

            </AjaxSettings>

        </telerik:RadAjaxManagerProxy>

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />

<div style="padding-left:5px;padding-top:20px;">

<span class="header2"> Document Scanning Dashboard</span>

      <br/>

<br />

 <asp:CheckBoxList ID="cbxSelectQueue" runat="server" AutoPostBack="true"  RepeatDirection="Horizontal" RepeatLayout="Table" OnSelectedIndexChanged="cbxSelectQueue_SelectedIndexChanged">

                 <asp:ListItem Value="1" Text="Blue Matrix Dashboard" Selected="True">

                </asp:ListItem>

                <asp:ListItem Value="2" Text="Manual Upload Dashboard" Selected="True">

                </asp:ListItem>

                </asp:CheckBoxList>

                    <br />

  

<table cellpadding="1" cellspacing="1" border="0">

<tr>

<td colspan="3">

     

    <table cellpadding="1" cellspacing="1"  border="0" >

      

    <tr>    

    <td>Start Date:</td>

    <td>

        <telerik:RadDatePicker ID="dtpStart" MinDate="2011/1/1" runat="server"  >

        </telerik:RadDatePicker>

    </td>

    <td>  </td>

    <td>End Date:</td>

    <td><telerik:RadDatePicker ID="dtpEnd" MinDate="2011/1/1" runat="server" >

        </telerik:RadDatePicker>

        </td>

    </tr>

    <tr>    

    <td>Status:</td>

    <td colspan="2">

        <telerik:RadComboBox ID="cbxStatus" runat="server" Width="123" >

        </telerik:RadComboBox>

    </td>

    <td>  </td>

    <td>

        <asp:Button ID="btnFilter" runat="server" Text="Filter" OnClick="btnFilter_Click">

        </asp:Button>

    </td>

    </tr>

      

    </table>

    

</td>

</tr>

<tr>

<td colspan="3"><asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="dtpStart" ErrorMessage="Enter a date!"></asp:RequiredFieldValidator>

 <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator2" ControlToValidate="dtpEnd" ErrorMessage="Enter a date!"></asp:RequiredFieldValidator>

 <asp:CompareValidator ID="dateCompareValidator" runat="server" ControlToValidate="dtpEnd" ControlToCompare="dtpStart" Operator="GreaterThanEqual" Type="Date" ErrorMessage="The end date must be after the start date."></asp:CompareValidator></td>

</tr>

<tr>

<td>

<asp:Label ID="Label1" runat="server" EnableViewState="False" Font-Bold="True" ForeColor="#FF8080" />

<asp:Label ID="Label2" runat="server" EnableViewState="False" Font-Bold="True" ForeColor="#00C000" />

</td>

<td colspan="2" align="right">

    <asp:Button runat="server" ID="btnRefresh" OnClick="btnRefresh_Click" Text="Refresh">

    </asp:Button>

</td>

</tr>

<tr>

<td colspan="3" style="height:auto;">

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"

DisplayAfter="0">

                <ProgressTemplate>

                     

                </ProgressTemplate>

            </asp:UpdateProgress>

    <asp:Timer ID="refreshTimer" runat="server" Interval="5000" OnTick="refreshTimer_Tick" EnableViewState="False" >

                    </asp:Timer>

       <asp:UpdatePanel ID="UpdatePanel1" runat="server" EnableViewState="False" 

        ChildrenAsTriggers="False" UpdateMode="Conditional">

        <Triggers>

            <asp:AsyncPostBackTrigger ControlID="refreshTimer" EventName="Tick" />

            

        </Triggers>

        <ContentTemplate>

             

<span class="header3">Active Documents</span>

    <telerik:RadGrid ID="grid" runat="server" AllowPaging="True" AllowSorting="True" 

                GridLines="Both" AutoGenerateColumns="False" CellSpacing="0" CellPadding="0" 

                OnNeedDataSource="grid_NeedDataSource" Skin="Office2007" PageSize="50" 

                OnDeleteCommand="grid_DeleteCommand" OnItemCreated="grid_ItemCreated" 

                OnItemUpdated="grid_ItemUpdated" OnItemInserted="grid_ItemInserted" Width="1035" AllowAutomaticUpdates="false" onupdatecommand="grid_UpdateCommand"  >

  

<MasterTableView DataKeyNames="DocumentQueueID">

  

    <Columns>

        <telerik:GridBoundColumn DataField="DocumentQueueID" 

            UniqueName="columnDocumentQueueID" Visible="False">

        </telerik:GridBoundColumn>

        <telerik:GridEditCommandColumn UniqueName="EditColumn" ButtonType="ImageButton" HeaderStyle-Width="10px"  />

  

         <telerik:GridTemplateColumn UniqueName="columnTitle" SortExpression="Title" HeaderText="Title" HeaderStyle-Width="220px" >

                  <ItemTemplate>

                  <asp:Image ID="imgWasReplaced" runat="server" Visible='<%# DataBinder.Eval(Container.DataItem, "WasReplaced")%>' AlternateText="Replaced" ImageUrl="../Images/ArrowUp.gif" />

                    

                     <asp:LinkButton ID="btnTitle" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Title")%>' OnClientClick='<%# Eval("DocumentQueueID","return ShowFileWindow( {0} )")%>'  />

                     <br />

                     <asp:Image ID="imgLock" runat="server" Visible='<%# DataBinder.Eval(Container.DataItem, "Locked")%>' AlternateText="Locked" ImageUrl="../Images/Security.GIF" />

                     <asp:Label ID="lblLock" runat="server" Font-Size="XX-Small" Visible='<%# DataBinder.Eval(Container.DataItem, "Locked")%>' Text=""></asp:Label>

                  </ItemTemplate>

                 </telerik:GridTemplateColumn>

        <telerik:GridBoundColumn DataField="DocID" 

            HeaderText="Doc ID" 

            UniqueName="columnDocID" HeaderStyle-Width="73px">

        </telerik:GridBoundColumn>

        <telerik:GridBoundColumn DataField="Analyst" 

            HeaderText="Analyst" 

            UniqueName="columnAnalyst" HeaderStyle-Width="80px"> 

        </telerik:GridBoundColumn>

        <telerik:GridBoundColumn DataField="LastUpdatedDate" 

            HeaderText="Update Date"

            UniqueName="columnLastUpdatedDate" HeaderStyle-Width="73px">

        </telerik:GridBoundColumn>

        <telerik:GridBoundColumn DataField="Status" 

            HeaderText="Status" 

            UniqueName="columnStatus" HeaderStyle-Width="55px">

        </telerik:GridBoundColumn>

        <telerik:GridBoundColumn DataField="LastScanDate" 

            HeaderText="Scan Date" 

            UniqueName="columnLastScanDate" HeaderStyle-Width="70px">

        </telerik:GridBoundColumn>

        <telerik:GridBoundColumn DataField="NoOfPages" 

            HeaderText="Pages" 

            UniqueName="columnNoOfPages" HeaderStyle-Width="35px">

        </telerik:GridBoundColumn>

        <telerik:GridBoundColumn DataField="UploadedBy" 

            HeaderText="Uploaded By" 

            UniqueName="columnUploadedBy" HeaderStyle-Width="75px">

        </telerik:GridBoundColumn>

  

         <telerik:GridTemplateColumn UniqueName="columnRescan" HeaderStyle-Width="55px">

                  <ItemTemplate>

                     <asp:LinkButton ID="btnRescan" runat="server" AutoPostBack="true" Text="Re-Scan" OnClick="btnRescan_Click" />

                  </ItemTemplate>

                 </telerik:GridTemplateColumn>

        <telerik:GridTemplateColumn UniqueName="columnLock" HeaderStyle-Width="35px">

                  <ItemTemplate>

                     <asp:LinkButton ID="btnLock" runat="server" AutoPostBack="true" Text="Lock" OnClick="btn_Click" />

                  </ItemTemplate>

                 </telerik:GridTemplateColumn>

         

        <telerik:GridTemplateColumn UniqueName="columnViewResults" HeaderStyle-Width="50px"  >

  

                  <ItemTemplate>

                    

                  <asp:LinkButton ID="btnViewResults" runat="server" Font-Size="Small" Text='<%# DataBinder.Eval(Container.DataItem, "ViewResultsText")%>' Visible='<%# DataBinder.Eval(Container.DataItem, "ViewResultsVisible")%>' />

  

                  <asp:Label ID="lblResults" runat="server" Font-Size="Small" Visible='<%# DataBinder.Eval(Container.DataItem, "lblResultsVisible")%>' Text='<%# DataBinder.Eval(Container.DataItem, "lblResultsText")%>'></asp:Label>

                 <br />

                  <asp:Label ID="lblHitsNum" runat="server" Font-Size="XX-Small" Visible='<%# DataBinder.Eval(Container.DataItem, "lblHitsNumVisible")%>' Text='<%# DataBinder.Eval(Container.DataItem, "lblHitsNumText")%>'></asp:Label>

                    

                  </ItemTemplate>

                    

                 </telerik:GridTemplateColumn>

         

        <telerik:GridButtonColumn ConfirmText="Are you sure you would like to remove this document from the queue?" ConfirmDialogType="RadWindow" ConfirmTitle="Remove Document" ButtonType="ImageButton" CommandName="Delete" HeaderStyle-Width="10px" />

        <telerik:GridBoundColumn  HeaderText="Comments" HeaderButtonType="TextButton"

                                DataField="UserComments" Visible="false" >

                                  

                            </telerik:GridBoundColumn>

    </Columns>

    <EditFormSettings EditFormType="Template">

                <FormTemplate>

                    <table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="0" rules="none"

                        style="border-collapse: collapse; background: white;">

                        <tr >

                            <td colspan="2" class="header" >

                                <b>Add/Update Comments</b>

                            </td>

                        </tr>

          

                        <tr>

                            <td>

                                <table id="Table4" cellspacing="1" cellpadding="1" width="550" border="0" >

               

             <tr>

                                        <td>

                                              

                                        </td>

                                        <td>

                                            <asp:Label ID="lblID" Text='<%# Bind( "DocumentQueueID") %>' runat="server" Visible="false" >

                                            </asp:Label>

                                        </td>

                                    </tr>

                                    <tr>

                                        <td>

                                            Comments:

                                        </td>

                                        <td>

                                            <asp:TextBox ID="txtComments" Text='<%# Bind( "UserComments") %>' runat="server" TextMode="MultiLine" Rows="5" Width="400" >

                                            </asp:TextBox>

                                        </td>

                                    </tr>

                                     

                                </table>

                            </td>

                            <td>

                            </td>

                        </tr>

                        <tr>

                            <td align="right" colspan="2">

                               <asp:Button ID="btnUpdate" Text="Update" runat="server" CommandName="Update"  ></asp:Button> 

<asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"

CommandName="Cancel"></asp:Button>

  

                            </td>

                        </tr>

                    </table>

                </FormTemplate>

            </EditFormSettings>

  

    <PagerStyle AlwaysVisible="True" Position="Top"  />

</MasterTableView>

    </telerik:RadGrid>

 </ContentTemplate>

 </asp:UpdatePanel>

<br />

<br />

<span class="header3">Published Documents</span>

<telerik:RadGrid ID="gridPublished" runat="server" AllowPaging="True" AllowSorting="True" GridLines="Both" AutoGenerateColumns="False" CellSpacing="0" CellPadding="0" OnNeedDataSource="grid_NeedDataSource" Skin="Office2007" PageSize="50" OnDeleteCommand="grid_DeleteCommand" OnItemCreated="grid_ItemCreated" Width="1030"  >

  

<MasterTableView DataKeyNames="DocumentQueueID">

  

    <Columns>

        <telerik:GridBoundColumn DataField="DocumentQueueID" 

            UniqueName="columnDocumentQueueID" Visible="False">

        </telerik:GridBoundColumn>

          

         <telerik:GridTemplateColumn UniqueName="columnTitle" SortExpression="Title" HeaderText="Title"   >

                  <ItemTemplate>

                  <asp:Image ID="imgWasReplaced" runat="server" Visible='<%# DataBinder.Eval(Container.DataItem, "WasReplaced")%>' AlternateText="Replaced" ImageUrl="../Images/ArrowUp.gif" />

                    

                     <asp:Label ID="lblTitle" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Title")%>' />

                     <br />

                     <asp:Image ID="imgLock" runat="server" Visible='<%# DataBinder.Eval(Container.DataItem, "Locked")%>' AlternateText="Locked" ImageUrl="../Images/Security.GIF" />

                     <asp:Label ID="lblLock" runat="server" Font-Size="XX-Small" Visible='<%# DataBinder.Eval(Container.DataItem, "Locked")%>' Text=""></asp:Label>

                  </ItemTemplate>

                 </telerik:GridTemplateColumn>

        <telerik:GridBoundColumn DataField="DocID" 

            HeaderText="Doc ID" 

            UniqueName="columnDocID" HeaderStyle-Width="73px">

        </telerik:GridBoundColumn>

        <telerik:GridBoundColumn DataField="Analyst" 

            HeaderText="Analyst" 

            UniqueName="columnAnalyst" HeaderStyle-Width="80px"> 

        </telerik:GridBoundColumn>

        <telerik:GridBoundColumn DataField="LastUpdatedDate" 

            HeaderText="Update Date"

            UniqueName="columnLastUpdatedDate" HeaderStyle-Width="78px">

        </telerik:GridBoundColumn>

        <telerik:GridBoundColumn DataField="Status" 

            HeaderText="Status" 

            UniqueName="columnStatus" HeaderStyle-Width="75px">

        </telerik:GridBoundColumn>

        <telerik:GridBoundColumn DataField="LastScanDate" 

            HeaderText="Scan Date" 

            UniqueName="columnLastScanDate" HeaderStyle-Width="78px">

        </telerik:GridBoundColumn>

        <telerik:GridBoundColumn DataField="NoOfPages" 

            HeaderText="Pages" 

            UniqueName="columnNoOfPages" HeaderStyle-Width="35px">

        </telerik:GridBoundColumn>

        <telerik:GridBoundColumn DataField="UploadedBy" 

            HeaderText="Uploaded By" 

            UniqueName="columnUploadedBy" HeaderStyle-Width="75px">

        </telerik:GridBoundColumn>

  

         <telerik:GridTemplateColumn UniqueName="columnRescan" HeaderStyle-Width="40px" Visible="false">

                  <ItemTemplate>

                     <asp:LinkButton ID="btnRescan" runat="server" AutoPostBack="true" Text="Re-Scan" OnClick="btnRescan_Click" />

                  </ItemTemplate>

                 </telerik:GridTemplateColumn>

        <telerik:GridTemplateColumn UniqueName="columnLock" HeaderStyle-Width="35px" Visible="false">

                  <ItemTemplate>

                     <asp:LinkButton ID="btnLock" runat="server" AutoPostBack="true" Text="Lock" OnClick="btn_Click" />

                  </ItemTemplate>

                 </telerik:GridTemplateColumn>

         

        <telerik:GridTemplateColumn UniqueName="columnViewResults" HeaderStyle-Width="76px"  >

  

                  <ItemTemplate>

                    

                  <asp:LinkButton ID="btnViewResults" runat="server" Font-Size="Small" Text='<%# DataBinder.Eval(Container.DataItem, "ViewResultsText")%>' Visible='<%# DataBinder.Eval(Container.DataItem, "ViewResultsVisible")%>' />

  

                  <asp:Label ID="lblResults" runat="server" Font-Size="Small" Visible='<%# DataBinder.Eval(Container.DataItem, "lblResultsVisible")%>' Text='<%# DataBinder.Eval(Container.DataItem, "lblResultsText")%>'></asp:Label>

                  <asp:Label ID="lblHitsNum" runat="server" Font-Size="XX-Small" Visible='<%# DataBinder.Eval(Container.DataItem, "lblHitsNumVisible")%>' Text='<%# DataBinder.Eval(Container.DataItem, "lblHitsNumText")%>'></asp:Label>

                    

                  </ItemTemplate>

                    

                 </telerik:GridTemplateColumn>

    

       <%-- <telerik:GridButtonColumn Text="Lock & View" UniqueName="columnLockView">

        </telerik:GridButtonColumn>--%>

<%--        <telerik:GridTemplateColumn UniqueName="columnViewResults" HeaderStyle-Width="73px">

          <ItemTemplate>

             <asp:LinkButton ID="btnViewResult" runat="server" Text="View Results" />

          </ItemTemplate>

         </telerik:GridTemplateColumn>--%>

        <telerik:GridButtonColumn ConfirmText="Are you sure you would like to remove this document from the queue?" ConfirmDialogType="RadWindow" ConfirmTitle="Remove Document" ButtonType="ImageButton" CommandName="Delete" HeaderStyle-Width="10px" Visible="false" />

    </Columns>

    <PagerStyle AlwaysVisible="True" Position="Top"  />

</MasterTableView>

    </telerik:RadGrid>

  

  

    </td>

</tr>

  

<tr>

<td colspan="3"></td>

</tr>

</table>

</div>

  

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Office2007"  />


----------------------------------------- CS file --------------------------------------------

protected void refreshTimer_Tick(object sender, EventArgs e)
    {
        RefreshGrid();
    }

public void RefreshGrid()
    {
        Session["QueueDataTable"] = null;
        Session["PublishedQueueDataTable"] = null;
        grid.DataSource = this.DataTable;
        grid.DataBind();
        gridPublished.DataSource = this.PublishedDataTable;
        gridPublished.DataBind();
    }

protected void grid_UpdateCommand(object sender, GridCommandEventArgs e)
    {
        GridEditableItem item = ((GridEditableItem)(e.Item));
        //string docQueueID = item["DocumentQueueID"].Text;
        Label lblID = (Label)item.FindControl("lblID");
        TextBox txtComment = (TextBox)item.FindControl("txtComments");

        QueueMgr.UpdateUserComment(Convert.ToInt32(lblID.Text), txtComment.Text); // updates in the database
        Session["QueueDataTable"] = null;
        //refreshTimer.Enabled = true;
    }

public DataTable DataTable
    {
        get
        {
            object obj = this.Session["QueueDataTable"];
            if (obj != null)
                return (DataTable)obj;

            DataTable dt = QueueMgr.GetQueue(GetFilterArgs()); // gets data from the database

            this.Session["QueueDataTable"] = dt;

            return dt;
        }
    }

[Tsvetina]

Hi Gary,

Have you tried putting the grid in a RadAjaxPanel? It usually maintains the focus of ajaxified control when the response ends.
As for editing, with this implementation, it cannot be achieved, as the auto-refresh causes a rebind of RadGrid each time and any unsaved changes are lost. It would be this way with any databound control that you try to edit.

Regards,
Tsvetina
the Telerik team

[Darcy]

Could you pause the ajax timer when you put the form into edit mode?

[Maria Ilieva]

Hi Darcy,

You could try using the Time "enabled" property to stop and start again the Timer control. See more information in the links below:
http://stackoverflow.com/questions/796909/stopping-and-starting-a-timer-in-asp-net-ajax
http://weblogs.asp.net/aboschin/archive/2007/10/06/ajax-how-to-control-an-lt-asp-timer-gt-on-client-side.aspx
http://forums.asp.net/t/1094798.aspx/1

Greetings,
Maria Ilieva
the Telerik team