[Solved] Loading Panel on RagGrid

[Sravanthi]

I have a RadGrid with Template Column. The Template Column has a Textbox and ontextchanged, i have to search db for data. I want to show a loading panel while its searching and loading. Can someone tell me how I can do it?

Thanks,
Sri

[Shinu]

Hi,

Try the following code to achieve your scenario.
aspx:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
           <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="TextBox1">
                   <UpdatedControls>
                       <telerik:AjaxUpdatedControl ControlID="TextBox1" LoadingPanelID="RadAjaxLoadingPanel1" />
                   </UpdatedControls>
               </telerik:AjaxSetting>
           </AjaxSettings>
           <ClientEvents />
       </telerik:RadAjaxManager>
       <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource2">
           <MasterTableView>
               <Columns>
                   <telerik:GridTemplateColumn>
                       <ItemTemplate>
                           <asp:TextBox ID="TextBox1" AutoPostBack="true" runat="server" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
                       </ItemTemplate>
                   </telerik:GridTemplateColumn>
               </Columns>
           </MasterTableView>
       </telerik:RadGrid>
       <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackImageUrl="~/Images/LoadingPanel.gif">
       </telerik:RadAjaxLoadingPanel>

C#:

protected void TextBox1_TextChanged(object sender, EventArgs e)
   {
       System.Threading.Thread.Sleep(2000);
   }

Thanks,
Shinu.

[Jayesh Goyani]

Hello,

Please try with below code snippet.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

Only above code is required to put in your page.

The below code snippet is only for your reference.

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" OnNeedDataSource="RadGrid1_NeedDataSource"
           AllowPaging="true" AllowFilteringByColumn="true" ShowFooter="true" AllowMultiRowSelection="true"
           AllowMultiRowEdit="true" PageSize="10" OnItemDataBound="RadGrid1_ItemDataBound">
           <ExportSettings ExportOnlyData="true">
           </ExportSettings>
           <MasterTableView CommandItemDisplay="Top" EditMode="EditForms">
               <Columns>
                   <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name">
                   </telerik:GridBoundColumn>
                   <telerik:GridTemplateColumn>
                       <ItemTemplate>
                           <asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged" AutoPostBack="true"></asp:TextBox>
                       </ItemTemplate>
                       <EditItemTemplate>
                           <asp:TextBox ID="TextBox2" runat="server" OnTextChanged="TextBox1_TextChanged" AutoPostBack="true"></asp:TextBox>
                       </EditItemTemplate>
                   </telerik:GridTemplateColumn>
                   <telerik:GridEditCommandColumn>
                   </telerik:GridEditCommandColumn>
               </Columns>
               <EditFormSettings EditColumn-ButtonType="ImageButton">
               </EditFormSettings>
           </MasterTableView>
           <ClientSettings>
               <Selecting AllowRowSelect="True" />
               <ClientEvents OnRowSelecting="rgUsers_RowSelecting" />
           </ClientSettings>
           <PagerStyle AlwaysVisible="True" />
       </telerik:RadGrid>

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
   {
       dynamic data = new[] {
           new { ID = 1, Name ="Name1",path="1.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(1)},
           new { ID = 2, Name = "Name2",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(2)},
           new { ID = 3, Name = "Name3",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(3)},
            new { ID = 4, Name = "Name4",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(4)},
           new { ID = 5, Name = "Name5",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(5)},
            new { ID = 6, Name ="Name1",path="1.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(6)},
           new { ID = 7, Name = "Name2",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(7)},
           new { ID = 8, Name = "Name3",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(8)},
            new { ID = 9, Name = "Name4",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(9)},
           new { ID = 10, Name = "Name5",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(10)},
            new { ID = 11, Name ="Name1",path="1.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(11)},
           new { ID = 12, Name = "Name2",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(12)},
           new { ID = 13, Name = "Name3",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(13)},
            new { ID = 14, Name = "Name4",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(14)},
           new { ID = 15, Name = "Name5",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(150)}

       };

       RadGrid1.DataSource = data;

   }


   protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
   {

   }
   protected void TextBox1_TextChanged(object sender, EventArgs e)
   {
       Thread.Sleep(5000);
   }

Thanks,
Jayesh Goyani

[Sravanthi]

Thanks Shinu and Jayesh.
I tried putting the ajax panel for both grid and textbox. Neither of them seem to work. When I try to enter something on the textbox, its not even hitting textchanged event. It is doing a postback and clearing the text i just entered.
Btw, the grid is inside a RadMultipage. and, I have an update panel in the master page. Not sure if the update panel is interfering with the ajax loading panel. This is my master page :: 

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false" LoadScriptsBeforeUI="true"/>   
        
        <asp:UpdateProgress ID="updateProgress1" runat="server">
            <ProgressTemplate>
                <div id="progressBackgroundFilter" class="progressBackgroundFilter">
                </div>
                <asp:Panel runat="server" ID="pnlProgMessage">
                    <asp:Image ID="imgLoading" ImageUrl="~/images/loading.gif" runat="server" />
                </asp:Panel>
                <ajax:AlwaysVisibleControlExtender runat="server" ID="avcProgMessage" TargetControlID="pnlProgMessage" VerticalSide="Middle" HorizontalSide="Center"></ajax:AlwaysVisibleControlExtender>
            </ProgressTemplate>
        </asp:UpdateProgress>

  <asp:UpdatePanel ID="udpContent" UpdateMode="Conditional" runat="server" >
            <ContentTemplate>
                <div class="main" style="width:70%; margin-left:5px; padding:5px; float:left;" >
                    <asp:ContentPlaceHolder ID="MainContent" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>

Heres the Grid ::

<telerik:RadPageView ID="pvTmplItems" runat="server">
          <div>
             <telerik:RadAjaxManager ID="ramTmplItems" runat="server">  
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="txtProductNumber">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="txtProductNumber" LoadingPanelID="loadingPanelTmplItems" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
            </telerik:RadAjaxManager>
             
        <telerik:RadAjaxLoadingPanel ID="loadingPanelTmplItems" runat="server" >
           
        </telerik:RadAjaxLoadingPanel>
       
            <telerik:RadGrid ID="rgTemplateItems" runat="server" GridLines="Both" style="margin:10px" 
             AllowPaging="True" AllowAutomaticUpdates="True" AllowAutomaticInserts="False" AllowAutomaticDeletes="True" AllowSorting="True"
             Skin="Outlook" AutoGenerateColumns="False" OnNeedDataSource = "rgTemplateItems_NeedDataSource"  OnItemCommand="rgTemplateItems_ItemCommand" 
             OnInsertCommand="rgTemplateItems_InsertCommand" OnUpdateCommand="rgTemplateItems_UpdateCommand" OnDeleteCommand="rgTemplateItems_DeleteCommand"
              OnItemCreated="rgTemplateItems_ItemCreated" >
              <ExportSettings OpenInNewWindow="true" ExportOnlyData="true" FileName="ProductList" IgnorePaging="true" HideStructureColumns="true">
                <Pdf PageHeight="210mm" PageWidth="297mm" PageTitle="Template Products" Title="Template Products"  
                         PageBottomMargin="20mm" PageTopMargin="20mm" PageLeftMargin="20mm" PageRightMargin="20mm" />                                              
              </ExportSettings>
<MasterTableView  CommandItemDisplay="Top" DataKeyNames="TemplateItemId, Quantity" AllowFilteringByColumn="false" >
                 <NoRecordsTemplate> No Template Items </NoRecordsTemplate>  
                
                <CommandItemSettings AddNewRecordText="Add New Product" ShowAddNewRecordButton="true" 
                        ShowExportToExcelButton="true" ShowExportToPdfButton="true" />
             
            <Columns>
    <telerik:GridTemplateColumn UniqueName="SKU" SortExpression="Product.SKU" HeaderText="Product#" DataField="SKU" EditFormColumnIndex="1">
                        <ItemTemplate>
                           <%-- <a href='<%# GetProductViewUrl((int)Eval("ProductID")) %>'>--%>
                                <asp:Literal runat="server" ID="ltSKU" Text='<%# Eval("Product.SKU") %>'></asp:Literal>
                        </ItemTemplate>
                        <EditItemTemplate>                        
                            <telerik:RadTextBox runat="server" ID="txtProductNumber" Text='<%# Eval("Product.SKU") %>'
                                Width="120px" OnTextChanged="ProductNumber_TextChanged" AutoPostBack="true" >
                                  <%--<ClientEvents OnKeyPress="CancelEnter" />--%>
                            </telerik:RadTextBox>
                            <asp:HiddenField runat="server" ID="hdProductID" Value='<%# Eval("Product.ProductID") %>'>
                            </asp:HiddenField>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>

......other columns ..................
                                     </Columns>
----------

</telerik:RadGrid>

[Sravanthi]

The issue is still open!!

[Shinu]

Hi,

Try removing the  EnablePartialRendering="false"  from the 'asp:ScriptManager'.

ASPX:

<asp:ScriptManager ID="ScriptManager1" runat="server" LoadScriptsBeforeUI="true"/>

Thanks,
Shinu.

[Sravanthi]

Thanks Shinu. If I remove that, my popup window isnt working. The popup window is on the same page. It says 'showAlert' and 'keyPressed' arent defined.

Thanks,
Sri