Invoke a RadGrid rebind from JavaScript

22 posts, 0 answers
  1. Mike Dennis
    Mike Dennis avatar
    51 posts
    Member since:
    Mar 2006

    Posted 23 Feb 2009 Link to this post

    Is there a way to cause an already bound RadGrid to rebind to the same datasource?  I have a page with a RadGrid that uses RadAjax.  If the user selects a row or clicks a button on the page, a RadWindow is opened to edit that item or create a new entry.  Once the RadWindow closes, I need to refresh the data in the RadGrid.  A partial postback is fine, but I don't want to have to do a full postback.  I have tried to set the datasource again and run dataBind from the client side, but it just gives me a blank grid with extra rows.  I also tried to get the RadAjax manager and run ajaxRequestWithTarget on the RadGrid, which reloaded the grid, but with the same old values.  Is there a way to rebind the RadGrid with client side code?

  2. Yavor
    Admin
    Yavor avatar
    11 posts
    Member since:
    Dec 2013

    Posted 25 Feb 2009 Link to this post

    Hello Mike,

    You can use the following method, to fire a command which would get to the server, and allow you to rebind the control.
    I hope this suggestion helps.

    Regards,
    Yavor
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.

  3. Mike Dennis
    Mike Dennis avatar
    51 posts
    Member since:
    Mar 2006

    Posted 25 Feb 2009 Link to this post

    Using "Rebind" seems to work for the command.  I came across that page earlier, but I didn't see rebind there.  Thanks

  4. Henrique Duarte
    Henrique Duarte avatar
    104 posts
    Member since:
    Oct 2003

    Posted 26 Mar 2009 Link to this post

    Guys,

    I'm needing this functionality too.
    Maybe a new argument: fireCommand("Page", "Rebind") or fireCommand("Page", "Refresh")
    Do you have a workaround?

    Regards,

    Henrique

  5. Yavor
    Admin
    Yavor avatar
    11 posts
    Member since:
    Dec 2013

    Posted 27 Mar 2009 Link to this post

    Hello Henrique,

    If you are looking simply to rebind/refresh the control, please use the following code:

    .Js

    function RefreshGrid()
    {
      var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
      masterTable.rebind();
    }

    I hope this helps.

    Best wishes,
    Yavor
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.

  6. Henrique Duarte
    Henrique Duarte avatar
    104 posts
    Member since:
    Oct 2003

    Posted 27 Mar 2009 Link to this post

    Yavor,

    It's not a simple rebind.
    I already have the empty grid, so I need to "rebind" but also I need to get the data from webservice.
    I'm using the client cache, and just calling the rebind function isn't firing the webservice method.

    Regards,

    Henrique

  7. Mike Dennis
    Mike Dennis avatar
    51 posts
    Member since:
    Mar 2006

    Posted 27 Mar 2009 Link to this post

    I was wrong about using a "Rebind" command.  I thought it worked, but it was just a cached version of the page.  Try the "Sort" command without any parameters.  That worked for me, and was what I was actually running when I thought it was "Rebind".

  8. Henrique Duarte
    Henrique Duarte avatar
    104 posts
    Member since:
    Oct 2003

    Posted 27 Mar 2009 Link to this post

    Mike,

    I tried to use the sort function without parameter, but it's sending an " ASC" to the webservice method.
    I'll make a workaround for this, but the best scenario is a function to refresh the data page from the webservice. Maybe a boolean parameter on rebind function.
    If you prefer, I can open a feature suggestion or a bug report for this.

    Regards,

    Henrique

  9. Mike Dennis
    Mike Dennis avatar
    51 posts
    Member since:
    Mar 2006

    Posted 27 Mar 2009 Link to this post

    Henrique,

    I was using a SqlDatasource control instead of a webservice.  In my case, it seemed to work fine.  If I had a column sorted before that call, it kept the sort I had before.  You maywant to submit a bug report if there is a problem with that method when using a webservice.

    Mike

  10. Valery
    Valery avatar
    45 posts
    Member since:
    Jul 2012

    Posted 15 Dec 2009 Link to this post

    Unfortunately this method doesn't seem to work with web service data binding. Is there another solution to rebinding such a RadGrid on the client side?

    My problem is I have many grids on one and the same page that should rebind each second. Using AJAX update panels would make the whole page execution life-cycle execute on each request and lots of markup would be transferred.

  11. Sebastian
    Admin
    Sebastian avatar
    9804 posts
    Member since:
    Sep 2012

    Posted 15 Dec 2009 Link to this post

    Hello Valery,

    If you use client-side binding through web service, consider invoking the dataBind() client method of the grid to refresh its state.


    Best regards,
    Sebastian
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

  12. Valery
    Valery avatar
    45 posts
    Member since:
    Jul 2012

    Posted 17 Dec 2009 Link to this post

    It actually worked with the rebind() method. I was retrieving a reference to the JavaScript object the wrong way. Thanks anyway. :)

  13. NetDeveloper1107
    NetDeveloper1107 avatar
    24 posts
    Member since:
    Dec 2008

    Posted 16 Apr 2010 Link to this post

    Hi,

    I have radgrid for which I have done setting of pagesize =2 and I am binding data results of 16 records.but all the records are shown in one single page. I have binded the rows by using client side binding pls see the below code.

        var tableView = $find("<%= RadGridTask.ClientID %>").get_masterTableView();
        var virtualItemCount = result.d.length;

        tableView.set_virtualItemCount(virtualItemCount);
        tableView.set_pageSize(2);
        tableView.set_currentPageIndex(0);
            
        tableView.set_dataSource(result.d);
        tableView.dataBind();

    Can you provide me the solution for this. I need to get the records displayed 2 per page.

    Thanks.

  14. Sebastian
    Admin
    Sebastian avatar
    9804 posts
    Member since:
    Sep 2012

    Posted 19 Apr 2010 Link to this post

    Hi,

    Examine the implementation from this online example which illustrates how to implement programmatic client-side binding together with sorting, paging and filtering.

    Kind regards,
    Sebastian
    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.

  15. NetDeveloper1107
    NetDeveloper1107 avatar
    24 posts
    Member since:
    Dec 2008

    Posted 22 Apr 2010 Link to this post

    Hi ,

    Thanks for the reply,I have gone through the example and as per my understanding in client side binding if we need to bind only records per page in radgrid our webmethod should return only 10 records.else all the records will be displayed in one page. I have made necessary changes for this.

    Now if I m using my own pagination control to which i need to send CurrentPageIndex from client side js function I am getting CurrentPageIndex  always zero. Can you help me in this. Else for workaround I need to Keep current page index in hidden varible.

    Also one more query. First time my radgrid is shown blank with norecordsMessagetext ="no records found" but when i bind records
    It shows this message and binds all other records.

    Can you pls provide me solution for this.

    Thanks.



  16. Sebastian
    Admin
    Sebastian avatar
    9804 posts
    Member since:
    Sep 2012

    Posted 22 Apr 2010 Link to this post

    Hello NetDeveloper1107,

    Can you please verify that you are using the latest version 2010.1.415 of RadGrid for ASP.NET AJAX in your project? The issue with the no records text was reported for previous versions of the grid but should be addressed already.

    Concerning the problem with the current page index:
    If you follow the guidelines from the demo and fetch the active page index inside the OnCommand client handler with get_currentPageIndex(), you should achieve the desired result.

    Best regards,
    Sebastian
    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.

  17. NetDeveloper1107
    NetDeveloper1107 avatar
    24 posts
    Member since:
    Dec 2008

    Posted 22 Apr 2010 Link to this post

    Hi ,

    Thanks for the reply. about Pageindex I had used get_currentPageIndex() from js function but I get value 0 each time.
    you can see the code below.

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ClientSideBinding.ascx.cs" Inherits="ClientSideBinding" %>
    <%@ Register Assembly="Telerik.Web.UI, Version=2009.2.826.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>  

    <%@ Register src="Pagination.ascx" tagname="Pagination" tagprefix="uc1" %>

    <div class=" cmb_spd10" id="searchFields" runat="server">
        <div class="cmb_ltFlt ">
        <p><asp:RegularExpressionValidator ID="revTransactionID" runat="server" ControlToValidate="txtTransactionID" Display="Dynamic" ValidationGroup="vgSearch"><img id="IMG3" alt="" runat="server" /></asp:RegularExpressionValidator>
        <asp:Label ID="Label4" runat="server" Text="Transaction Id"></asp:Label></p>
        <p><asp:TextBox ID="txtTransactionID" runat="server" Width="90px" MaxLength="8" ValidationGroup="vgSearch"></asp:TextBox>
        </p>
        </div>

        <div class="cmb_ltFlt cmb_frmfFlds cmb_sp15">
        <p><asp:Label ID="Label8" runat="server" Text="Task Status"></asp:Label></p>
        <p>
        <asp:DropDownList ID="ddlTaskStatus" CssClass="cmb_selectbox" runat="server">
        </asp:DropDownList>
        </p>
        </div>
        <div class="cmb_ltFlt cmb_frmfFlds cmb_sp15">
        <p><asp:Label ID="Label9" runat="server" Text="Task Name"></asp:Label></p>
        <p><asp:DropDownList ID="ddlTaskName" CssClass="cmb_selectbox" runat="server">
        </asp:DropDownList></p>
        </div>
        <div class="cmb_ltFlt cmb_frmfFlds cmb_sp15">
        <p><asp:Label ID="lblTaskTypeHead" runat="server" Text="Task Type"></asp:Label></p>
        <p><asp:DropDownList ID="ddlTasks" CssClass="cmb_selectbox" runat="server">
        <asp:ListItem  Value="0" Text="My Tasks"></asp:ListItem>
        <asp:ListItem Value="1" Text="Admin Tasks"></asp:ListItem>
        <asp:ListItem Value="2" Selected="True" Text="All Tasks"></asp:ListItem>
        </asp:DropDownList></p>

        </div>
        <div class="cmb_ltFlt cmb_sp10 cmb_vsp15" id="searchCancelBtn">
        <div class="cmb_btnG">           
             <a href="#" id="btnSearch" runat="server" class="cmb_btnG">Search</a>
        </div>
        <span class="cmb_sp5 cmb_ltFlt">&nbsp;</span>
    &nbsp;<div class="cmb_ltFlt cmb_btnG" title="Clear">
        <asp:LinkButton ID="btnClear" Text="Clear" runat="server" CssClass="cmb_btnG"  CausesValidation="false"/>
        </div>
        </div>
    </div>

    <!-- Search Results Grid Starts -->
    <asp:Panel ID="pnlSearchResults" runat="server"  >
    <asp:HiddenField id="currentPageIndex" runat="server" value="1" />
     <div id="Div3" class="cmb_clrBth cmb_ltFlt cmb_border cmb_vsp10" >
          <div class="cmb_TL"> </div>
          <div class="cmb_TR"> </div>
          <div id="Div4" class="cmb_vpd8">
            <div class="cmb_ltFlt cmb_Bclr cmb_fullWidth cmb_bsp5">
              <div class="cmb_ltFlt cmb_sp10 cmb_maxpwidth70"><h1><asp:Label ID="lblSearchTasks" runat="server" CssClass="textbox" Text="Search Result"></asp:Label></h1></div>
                           
            </div>
            <div class="cmb_clrBth">
            </div>
             <asp:Panel ID="Panel11" CssClass="cmb_panelBrdr" runat="server">
                            <telerik:RadGrid ID="RadGridTask" runat="server" AllowAutomaticUpdates="True" AllowAutomaticDeletes="True"
                                    AllowAutomaticInserts="False" GridLines="None"  AllowCustomPaging="True" PageSize="5"
                                    EnableViewState="false" AllowSorting="true" OnItemCommand="RadGrid1_ItemCommand" >
                                     <MasterTableView AutoGenerateColumns="False">
                                     <Columns>
                                    <telerik:GridTemplateColumn SortExpression="TaskName" DataField="taskName" HeaderText="Link Button Task Name">
                                        <ItemTemplate>
                                            <asp:LinkButton runat="server" id="taskName" Text='<%# DataBinder.Eval (Container.DataItem, "taskName") %>' CommandName="Select"></asp:LinkButton>
                                        </ItemTemplate>
                                     </telerik:GridTemplateColumn>                                 
                                      <telerik:GridBoundColumn DataField="taskId" UniqueName="taskId" HeaderText="Task ID"
                                        EmptyDataText="&amp;nbsp;" SortExpression="taskId">
                                      </telerik:GridBoundColumn>
                                      <telerik:GridBoundColumn DataField="workFlowTaskId" UniqueName="workFlowTaskId" HeaderText="Workflow Task ID"
                                        EmptyDataText="&amp;nbsp;" SortExpression="workFlowTaskId">
                                      </telerik:GridBoundColumn>
                                       </Columns>
                                     </MasterTableView>
                              </telerik:RadGrid>
             </asp:Panel>
            <div class="cmb_roundedGCornerSpacer_g cmb_clrBth">&nbsp;</div>
          </div>
          <div  class="cmb_BL"> </div>
          <div class="cmb_BR"> </div>
        </div>
        </asp:Panel>
    <div>
    <uc1:Pagination ID="Pagination1" runat="server" />
    </div>
    <div id="divLoadingPanel" style="display:none">
             <img id="IMG163" src="wait.gif" alt=""/>Please wait...        
    </div>
     
    <telerik:RadCodeBlock id="RadCodeBlock2" runat="server">
    <script type="text/javascript">
    $(function() {

    var btnSearchClientId = "#" + '<%= btnSearch.ClientID %>';
    var txtTransactionId =$get('<%=txtTransactionID.ClientID %>');
    var pageSize = 5;
    $(btnSearchClientId).click(function(){
         var currentPage = $get('<%=currentPageIndex.ClientID %>');
         ExecuteServiceCall("WebServiceCall.aspx","GetTaskSearchData",txtTransactionId.value,0);
         currentPage.value = 0;
        });
    });


    function bindGrid(result)
    {
        var grid = $find("<%= RadGridTask.ClientID %>");
        var tableView = $find("<%= RadGridTask.ClientID %>").get_masterTableView();
       // var virtualItemCount = Session value count;
        tableView.set_virtualItemCount(15); //Session value
        tableView.set_dataSource(result.d);
        tableView.dataBind();
    };
               

    function GetNextPageData()
    {
        var currentPage = $get('<%=currentPageIndex.ClientID %>');
        var tableView = $find("<%= RadGridTask.ClientID %>").get_masterTableView();
        var txtTransactionId =$get('<%=txtTransactionID.ClientID %>');
        ExecuteServiceCall("WebServiceCall.aspx","GetTaskSearchData",txtTransactionId.value,parseInt(currentPage.value)+1);
        currentPage.value = parseInt(currentPage.value)+1;
       // tableView.set_currentPageIndex(tableView.get_currentPageIndex()+1);
    }

    function GetPreviousPageData()
    {
        var currentPage = $get('<%=currentPageIndex.ClientID %>');
        var txtTransactionId =$get('<%=txtTransactionID.ClientID %>');
        ExecuteServiceCall("WebServiceCall.aspx","GetTaskSearchData",txtTransactionId.value,parseInt(currentPage.value)-1);
        currentPage.value = parseInt(currentPage.value)-1;
    }
    //                data: "{transactionID:'" + transactionId + "', startIndex:"+ startIndex+ ", endIndex:" + endIndex + " }",

    function ExecuteServiceCall(pageUrl,pageMethod,transactionId,pageIndex)
    {
    var loadingPanel =$get('divLoadingPanel');

         $.ajax({
                    type: "POST",
                    url: "WebServiceCall.aspx/GetTaskSearchData",
                    data: "{transactionID:'" + transactionId + "', pageIndex:"+ pageIndex + " }",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    beforeSend: function(){
                    loadingPanel.style.display="block";
                    },
                    error: function() {
                        alert("error");
                    },
                    success: function(msg) {
                         window.setTimeout(function(){
                             bindGrid(msg);},100);
                    },
                    complete: function(){
                    
                    window.setTimeout(function(){
                    loadingPanel.style.display= "none";}, 120);
                    }
             });
    }
    </script>
    <script type="text/javascript">
    </script>
    </telerik:RadCodeBlock>                    



  18. Sebastian
    Admin
    Sebastian avatar
    9804 posts
    Member since:
    Sep 2012

    Posted 22 Apr 2010 Link to this post

    Hi NetDeveloper1107,

    As you explained you are using custom paging control which initiates the paging operations (invokes the GetNextPageData and GetPreviousPageData methods) - that is why the CurrentPageIndex value of the grid is not updated, it is only when you trigger the paging action from the built-in grid pager.

    Hence your option is to store the page index in a hidden field manually (as you already did) and pass it to our web service or page method. Also migrate to the latest 2010.1.415 release of the suite as suggested before.

    Finally, note that the AllowAutomaticXXXX properties of the grid are meaningful with server-side binding only as presented on this demo.

    Best regards,
    Sebastian
    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.

  19. Henrik Tegman
    Henrik Tegman avatar
    29 posts
    Member since:
    Apr 2010

    Posted 05 May 2010 Link to this post

    Hello, I have a very similar problem.

    I'm trying to rebind a RadGrid from a popup (child window, useing window.open).
    From what I understood from the ASP.NET Documentation the $find() can take a 2nd parameter the 2nd being your parent, this would work great for me I thought but I did not. Any help on this problem would be great. I'll post some of my findings here:

    $find('RadGrid1', window.opener)
    returns a object

    $find('RadGrid1', window.opener.document)
    returns null

    $find('<%= RadGrid1.ClientID %>', window.opener)
    returns null

    Even when I try to use the first where I get a object when I try to invoke the get_masterTableView() I get an error stating that I there is no such method or property. What I want to do in the end is something along the line of:

    $find('RadGrid1', window.opener).get_masterTableView().rebind();

    but as I stated it doesn't work, I don't understand what I'm doing wrong. I'm guessing it's something very minor that I'm just missing.

  20. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3375 posts
    Member since:
    Sep 2012

    Posted 10 May 2010 Link to this post

    Hi Henrik,

    In order to achieve your goal, I would suggest you to define a method in the page where the grid is for the grid rebinding procedure. For instance as below:

    function GridRebind()
    {
        $find("<%= RadGrid1.ClientID %>").get_masterTableView().rebind();
    }

    Then from the child window call the above method instead of trying to find the grid and rebind it directly in the child page.

    Give it a try and let me know if it helps.

    Greetings,
    Iana
    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.

  21. Jose
    Jose avatar
    1 posts
    Member since:
    Jul 2012

    Posted 22 Jul 2010 Link to this post

    Hi,

    If you want to use the .fireCommand(action, params) method try this:

    var masterTable = $find("<%= rg.ClientID %>").get_masterTableView();
    masterTable.fireCommand("RebindGrid");

    I used this on a grid inside an ajaxpanel and works like a charm.

    Regards,
    J. Morris

  22. Cici
    Cici avatar
    1 posts
    Member since:
    Oct 2010

    Posted 17 Nov 2010 Link to this post

    This worked beautifully! Thanks!

Back to Top