Can someone please provide me with a sample demonstrating how to bind to a WebDataGrid client side NOT using a datasource like in the samples browser? I would like to make a web service call using JSON and bind the data client side, but the only example I can find is the one in the samples browser connecting to a database.
Hello bpg730,
If you use 10.3 version of the toolset there are sample showing this. But keep in mind that this feature is still CTP:
Client side binding
Hope this helps
I have been looking at this example, but it appears as though it is calling methods not available in 10.3. Specifically, I am getting an error on the grid._applyClientBinding() line. Is there an updated version or hotfix that has these methods for the WebDataGrid?
Hi,
I tried $(grid.tableTemplate).render(newData).appendTo(grid._elements.dataTbl.lastChild); but it's throwing an exception. Object doesn't support this property or method. I am using JQuery 1.4.2, so should I be using a more newer version?
Dave
Hello,
I got the load working but the functionality of the grid does not work after pressing load. I am doing just a basic row selection. The hidden columns does not work either.
-------------------------------------------------------------------
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="DonorsLoad.aspx.vb" Inherits="DonorProcessing.DonorsLoad" %>
<%@ Register Assembly="Infragistics4.Web.v10.3, Version=10.3.20103.1013, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.Web.UI" TagPrefix="ig" %><%@ Register Assembly="Infragistics4.Web.v10.3, Version=10.3.20103.1013, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.Web.UI.GridControls" TagPrefix="ig" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Donors</title></head><body><form id="frmInput" method="post" runat="server"><ig:WebScriptManager ID="WebScriptManager" runat="server"></ig:WebScriptManager><ig:WebDataGrid ID="wdgDonors" runat="server" AutoGenerateColumns="False" Height="600px" Width="98%"> <AjaxIndicator BlockArea="Control" RelativeToControl="True" /> <Columns> <ig:BoundDataField DataFieldName="AccountID" Hidden="True" Key="AccountID"> <Header Text="AccountID" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="LastName" Key="LastName"> <Header Text="Last Name" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="FirstName" Key="FirstName"> <Header Text="First Name" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Address" Key="Address"> <Header Text="Address" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="City" Key="City"> <Header Text="City" /> </ig:BoundDataField> </Columns> <behaviors> <ig:Selection RowSelectType="Single" CellClickAction="Row" Enabled="true" /> </behaviors></ig:WebDataGrid><input type="button" id="btnLoad" class="button" value="Load" /><input type="button" id="btnSelect" class="button" value="Select First Row" /><script type="text/javascript" src="Scripts/jquery-1.4.2.js"></script><script type="text/javascript" src="Scripts/jquery.tmpl.js"></script><script type="text/javascript"> $("#btnLoad").click(function () {
var grdDonors = $find("wdgDonors"); var jsonString = { "Donors": [{ "AccountID": "1", "LastName": "Last Name 1", "FirstName": "First Name 1", "Address": "Address 1", "City": "City 1" }, { "AccountID": "2", "LastName": "Last Name 2", "FirstName": "First Name 2", "Address": "Address 2", "City": "City 2"} ]
};
var dataSource = grdDonors._get_dataSource(); var arr = jsonString.Donors;
if (!grdDonors.tableTemplate) grdDonors.tableTemplate = grdDonors._elements.dataTbl.lastChild.cloneNode(true);
for (var i = 0; i < arr.length; i++) { dataSource.push(jsonString.Donors[i]); }
grdDonors._set_dataSource(dataSource); grdDonors._pi.show(grdDonors); grdDonors._applyClientBinding(); grdDonors._pi.hide(grdDonors); }); $("#btnSelect").click(function () { var grdDonors = $find("wdgDonors"); var selectedRows = grdDonors.get_behaviors().get_selection().get_selectedRows(); selectedRows.add(grdDonors.get_rows().get_row(0)); });</script></form></body></html>
----------------------------------------------------------
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
wdgDonors.EnableClientRendering = True wdgDonors.DefaultColumnWidth = 200
Dim Donors As New List(Of String)
wdgDonors.DataSource = Donors wdgDonors.DataBind()
End Sub
------------------------------------------------------------
Any help is appreciated. I understand it is CTP but I really need to load using ajax/json on client side.
Will
hi i have tried this code but finding issues running it can u please send me the Jquery files and the source of this example at hussii@hotmail.com i will be very thankful to you for such an act
Not much point if no-one can get it to work. I have tried everything I can think of and so have others. It appears that the Infragistics team are not willing to get involved in the conversation either so you may as well try other controls out there. Sorry to be the bringer of bad news.
If you're running into the problem of _tableTemplate being null, you might have done the stupid thing I did and didn't enable or misspelled the attribute EnableClientRendering="True". I had mispelled "Rendering" as "Rednering"....
Anyways, this webpage https://es.infragistics.com/samples/aspnet/data-grid/jquery-client-template is comprehensive on how to accomplish this. Everything in here is overly complex, but to be fair, it's been six years since the last post.