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

Invoke a RadGrid rebind from JavaScript

22 Answers 4977 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mike Dennis
Top achievements
Rank 1
Mike Dennis asked on 23 Feb 2009, 04:36 PM
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?

22 Answers, 1 is accepted

Sort by
0
Yavor
Telerik team
answered on 25 Feb 2009, 11:39 AM
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.
0
Mike Dennis
Top achievements
Rank 1
answered on 25 Feb 2009, 04:33 PM
Using "Rebind" seems to work for the command.  I came across that page earlier, but I didn't see rebind there.  Thanks
0
Henrique Duarte
Top achievements
Rank 1
Veteran
answered on 26 Mar 2009, 06:17 PM
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
0
Yavor
Telerik team
answered on 27 Mar 2009, 08:19 AM
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.
0
Henrique Duarte
Top achievements
Rank 1
Veteran
answered on 27 Mar 2009, 10:33 AM
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
0
Mike Dennis
Top achievements
Rank 1
answered on 27 Mar 2009, 12:52 PM
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".
0
Henrique Duarte
Top achievements
Rank 1
Veteran
answered on 27 Mar 2009, 05:42 PM
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
0
Mike Dennis
Top achievements
Rank 1
answered on 27 Mar 2009, 05:58 PM
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
0
Valery
Top achievements
Rank 2
answered on 15 Dec 2009, 06:31 AM
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.

0
Sebastian
Telerik team
answered on 15 Dec 2009, 08:58 AM
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.
0
Valery
Top achievements
Rank 2
answered on 17 Dec 2009, 08:21 AM
It actually worked with the rebind() method. I was retrieving a reference to the JavaScript object the wrong way. Thanks anyway. :)
0
NetDeveloper1107
Top achievements
Rank 1
answered on 16 Apr 2010, 01:25 PM
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.

0
Sebastian
Telerik team
answered on 19 Apr 2010, 02:26 PM
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.
0
NetDeveloper1107
Top achievements
Rank 1
answered on 22 Apr 2010, 05:02 AM
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.



0
Sebastian
Telerik team
answered on 22 Apr 2010, 10:01 AM
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.
0
NetDeveloper1107
Top achievements
Rank 1
answered on 22 Apr 2010, 10:14 AM
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>                    



0
Sebastian
Telerik team
answered on 22 Apr 2010, 01:24 PM
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.
0
Henrik Tegman
Top achievements
Rank 1
answered on 05 May 2010, 09:24 AM
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.

0
Iana Tsolova
Telerik team
answered on 10 May 2010, 02:35 PM
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.
0
Jose
Top achievements
Rank 1
answered on 22 Jul 2010, 05:23 PM
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

0
Cici
Top achievements
Rank 1
answered on 17 Nov 2010, 06:51 PM
This worked beautifully! Thanks!
0
Satish
Top achievements
Rank 1
answered on 07 Jul 2016, 10:07 AM

Hi 

from javascript we can call a method like 

document.location.reload(); 

this is also work for me.

OR.

another way to rebind the grid .

take dummy button and call click method from javascript and in asp method of click method call Grid.Databind() or Grid.Rebind() method

This is also works

 

Thanks.

 

 

Tags
Grid
Asked by
Mike Dennis
Top achievements
Rank 1
Answers by
Yavor
Telerik team
Mike Dennis
Top achievements
Rank 1
Henrique Duarte
Top achievements
Rank 1
Veteran
Valery
Top achievements
Rank 2
Sebastian
Telerik team
NetDeveloper1107
Top achievements
Rank 1
Henrik Tegman
Top achievements
Rank 1
Iana Tsolova
Telerik team
Jose
Top achievements
Rank 1
Cici
Top achievements
Rank 1
Satish
Top achievements
Rank 1
Share this question
or