Invoke a RadGrid rebind from JavaScript in UI for ASP.NET AJAX

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

Invoke a RadGrid rebind from JavaScript

22 Answers 2129 Views

Grid

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

22 Answers, 1 is accepted

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.

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.

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.

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"> </span>
 <div class="cmb_ltFlt cmb_btnG" title="Clear">
    <asp:LinkButton ID="btnClear" Text="Clear" runat="server" CssClass="cmb_btnG" CausesValidation="false"/>
    </div>
    </div>
</div>


<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="&nbsp;" SortExpression="taskId">
                                  </telerik:GridBoundColumn>
                                  <telerik:GridBoundColumn DataField="workFlowTaskId" UniqueName="workFlowTaskId" HeaderText="Workflow Task ID"
                                    EmptyDataText="&nbsp;" SortExpression="workFlowTaskId">
                                  </telerik:GridBoundColumn>
                                   </Columns>
                                 </MasterTableView>
                          </telerik:RadGrid>
         </asp:Panel>
        <div class="cmb_roundedGCornerSpacer_g cmb_clrBth"> </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>

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

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.

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