Hi,
I am trying out the lastest release of RadGrid Q2 2008 client side dataBind feature. When I tried to bind the data received from the Webservices the RadGrid doesn't bind. First it clears the current Grid data and it stays empty and when i tried to load for the 2nd time the data get loaded (i can see the data loaded) and then immediatly get cleared. Also one observation is that when i tried to add some alert before i bind the data then the Grid bind correctly. The sample code is given below. Can someone help me explain how to resolve this?
//Javascript
function ClientLoadGrid(){
GridService.Search(LoadGrid);
}
function LoadGrid(result){
var ctrlID = "<%= RadGrid1.ClientID %>";
//alert(ctrlID + ' ' + result)
var masterTable = $find(ctrlID).get_masterTableView();
masterTable.set_dataSource(result);
masterTable.dataBind();
}
//HTML
<telerik:RadGrid ID="RadGrid1" runat="server" PageSize="20" EnableViewState="true" Skin="Sunset" AllowPaging="true" AllowSorting="True" GridLines="Horizontal" Width="100%" >
<MasterTableView AllowMultiColumnSorting="True" AutoGenerateColumns="False" HierarchyLoadMode="Client" ClientDataKeyNames="EmployeeID" DataKeyNames="EmployeeID" EnableViewState="False" >
<Columns>
<telerik:GridBoundColumn DataField="EmployeeID" HeaderText="Employee ID" UniqueName="EmployeeID">
<ItemStyle Width="80px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Title" HeaderText="Title" UniqueName="Title" />
</Columns>
</MasterTableView>
<PagerStyle AlwaysVisible="true" />
<FilterMenu EnableTheming="True" Skin="Sunset">
<CollapseAnimation Duration="200" Type="OutQuint" />
</FilterMenu>
</telerik:RadGrid>
Thanks in advance
Sundar
7 Answers, 1 is accepted
Rank 1
Try adding an event handler for the client-side event OnCommand. You can do so by adding this code to your RadGrid:
| <ClientSettings> |
| <ClientEvents OnCommand="RadGrid1_Command" /> |
| </ClientSettings> |
and then a JavaScript function to handle the event:
| function RadGrid1_Command(sender, args) |
| { |
| // Handle the RadGrid's Command event here |
| } |
You can leave the function empty if you do not want to handle the event, but it must be there. The reason for this requirement is that when you bind data on the client, the server is no longer in control of you command events (filtering, sorting, paging, etc). So this event must be handled on the client in order to implement those features. This requirement will be removed as of service pack 1, which will be released around the end of August.
While we're on the topic, I want to point out a few other things about your RadGrid markup. First, since filtering, sorting, etc must all be done on the client when using client-side databinding, setting the server-side properties (AllowSorting, AllowPaging, etc) serves no purpose and offers no functionality. Additionally, you can turn off ViewState, which will help reduce your page size. The reason you want to turn this off is because no state data is being kept on the server - everything must be managed in the client.
If you have more questions or need further clarification, please don't hesitate to ask. Additionally, check out my latest RadTips episode where I walk through basic client-side databinding. I will be dealing with the more advanced topics of filtering, sorting, and paging in future episodes. Also, don't forget to take a look at the live demos for further guidance.
I hope this was helpful.
Regards,
Kevin Babcock
Rank 1
What is result in your code? Is it a datatable or class object?
function LoadGrid(result){
var ctrlID = "<%= RadGrid1.ClientID %>";
//alert(ctrlID + ' ' + result)
var masterTable = $find(ctrlID).get_masterTableView();
masterTable.set_dataSource(result);
masterTable.dataBind();
}
Regards,Vaibhav
Rank 1
Sundar
Rank 1
We cant even get access to the masterTableView on the Client.
Ive opened a support ticket but we have wasted so much time on our project because of this issue.
We have the radGrid instance assigned to a var. But when we call .get_masterTableView() on the var. We get an exception everytime.
Exception: Microsoft JScript runtime error: Object doesn't support this property or method
You can see the point where we get the error below (its bolded)
<
body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">
</asp:ScriptManager>
<script type="text/javascript" >
LoadGridData();
function LoadGridData()
{
var data = PageMethods.GetData(OnLoadDataSuccess, OnLoadDataFailed);
}
function OnLoadDataSuccess(e)
{
// var result = Sys.Serialization.JavaScriptSerializer.deserialize(e, true);
var grid3 = $get("<%= RadGrid1.ClientID %>");
var tableView = grid3.get_masterTableView(); //this fails right here.
tableView.set_dataSource(e);
tableView.dataBind();
}
function OnLoadDataFailed()
{
alert(
"Telerik controls do not work as good as our company had once thought.");
}
function RadGrid1_Command(sender, args)
{
// Handle the RadGrid's Command event here
}
</script>
<div>
<telerik:RadGrid ID="RadGrid1" runat="server">
<MasterTableView>
<Columns>
<telerik:GridBoundColumn DataField="FirstName" SortExpression="FirstName" HeaderText="First Name"></telerik:GridBoundColumn>
</Columns>
<NoRecordsTemplate>
No Records Available
</NoRecordsTemplate>
</MasterTableView>
<ClientSettings>
<ClientEvents OnCommand="RadGrid1_Command" />
</ClientSettings>
</telerik:RadGrid>
</div>
</form>
</
body>
Please help us we have wasted so much time and money on this already. Our experience is very bad @ this point.
Rank 1
I'm sorry this experience has soured your view of the Telerik controls. I think your problem lies not with the controls, but with the ASP.NET AJAX shortcut function you are using to get an instance of the client-side RadGrid object.
If you look at the line preceding your call to get_masterTableView(), you are using the $get() shortcut instead of $find().
This line
| var grid3 = $get("<%= RadGrid1.ClientID %>"); |
should be changed to
| var grid3 = $find("<%= RadGrid1.ClientID %>"); |
The difference between $get() and $find() is that $get() returns the DOM element with the ID you provide, and $find() returns the client-side component associated with the id you provide. This is a very big difference. When you made the call to $get(), you were given a reference to the <div> with the id RadGrid1.ClientID which contains the RadGrid markup. Instead, a call to $find('<%= RadGrid1.ClientID %>') will return the JavaScript object which represents the RadGrid and contains all of its client-side functionality.
If you'd like to read more about the differences between the two functions, check out Matt Berseth's blog post: The Ever-Useful $get and $find ASP.NET AJAX Shortcut Functions
I hope this new information helps and hopefully restores your confidence in the quality of the RadControls. If you have any further questions, please don't hesitate to ask.
Regards,
Kevin Babcock
Rank 1
I am trying to use the feature of Client Side binding for RadGrid control of Telerik. I have binded the data successfully .
The main problems are 2
1st is when the databinding is happening its binding all the records in one page. for e.g. even though i have set pagesize to 2 and binding 16 records. All the 16 records are shown in one page of radgrid.
2nd Can you pls give me clue on how to code at client side to handle next,previous,first,last click of Pagination of Radgrid.
Pls see the below is my code. Scenerio is I have button on click of that button i will call the method of webservice using jquery and bind the results to Radgrid control.
---- Code Starts---
<%@ 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" %>
<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>
<!-- Search Results Grid Starts -->
<asp:Panel ID="pnlSearchResults" runat="server" >
<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" AllowPaging="True" PageSize="5"
EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" Skin="NextGen"
EnableViewState="false" AllowSorting="true">
<MasterTableView AutoGenerateColumns="False">
<Columns>
<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>
<NoRecordsTemplate>No Records Found</NoRecordsTemplate>
</MasterTableView>
<PagerStyle AlwaysVisible="true" Mode="NumericPages" HorizontalAlign="Right" />
<ClientSettings>
<ClientEvents OnCommand="RadGridTask_Command" />
</ClientSettings>
</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 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 loadingPanel =$get('divLoadingPanel');
var txtTransactionId =$get('<%=txtTransactionID.ClientID %>');
$(btnSearchClientId).click(function(){
$.ajax({
type: "POST",
url: "WebServiceCall.aspx/GetTaskSearchData",
data: "{transactionID:'" + txtTransactionId.value + "'}",
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);
}
});
});
});
function bindGrid(result)
{
var tableView = $find("<%= RadGridTask.ClientID %>").get_masterTableView();
//var pageSize = tableView.get_pageSize();
setPagination(tableView);
tableView.set_dataSource(result.d);
tableView.dataBind();
};
function setPagination(tableView)
{
// var grid = $find("<%= RadGridTask.ClientID %>");
tableView.set_virtualItemCount(100);
tableView.set_pageSize(2);
//tableView.set_pageCount(50);
tableView.set_currentPageIndex(1);
};
function RadGridTask_Command(sender, args)
{
debugger;
// Handle the RadGrid's Command event here
args.set_cancel(true)
}
</script>
<script type="text/javascript">
</script>
</telerik:RadCodeBlock>
---- Code End---
Thanks ,
Please refer to my reply in the other forum thread you participated in here:
http://www.telerik.com/community/forums/aspnet-ajax/grid/invoke-a-radgrid-rebind-from-javascript.aspx
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.