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?
Thank you for your interest regarding ClientBinding.
In order to use it you should :
1) Include the JQuery scripts:
<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
2) Set EnableClientRendering = true in the code behind:
this.WebDataGrid1.EnableClientRendering = true;
3) Set any datasource to the WebDataGrid. It can be an empty list :
List<Product> list = new List<Product>();
this.WebDataGrid1.DataSource = list;
4) Set json array as a datasource on the client side. In this sample I am using Initialize client event for the purpose.
You can add items to the json with push function.
function Initialize(sender, args) {
var grdPipeline = $find('<%=WebDataGrid1.ClientID%>');
var jsonString = { "PipeLineNoteEntry":
[{ "Product_ID": "117", "Product_Name": "Luyba", "Unit_Price": "123.56" },
{ "Product_ID": "118", "Product_Name": "Radoslav", "Unit_Price": "345.56" },
{ "Product_ID": "119", "Product_Name": "Tsvetelina", "Unit_Price": "456.56" },
{ "Product_ID": "120", "Product_Name": "Hristo", "Unit_Price": "567.56" },
{ "Product_ID": "121", "Product_Name": "Vladimir", "Unit_Price": "678.56"}
]
};
var dataSource = grdPipeline._get_dataSource();
var arr = jsonString.PipeLineNoteEntry;
for (var i = 0; i < arr.length; i++) {
dataSource.push(jsonString.PipeLineNoteEntry[i]);
}
grdPipeline._set_dataSource(dataSource);
grdPipeline._pi.show(grdPipeline);
grdPipeline._applyClientBinding();
grdPipeline._pi.hide(grdPipeline);
The client binding functionality is CTP and it is not still supported officially in 10.3 version.
Let us know if you need further assistance.
Thank you for the step-by-step response. However, when I try enabling client binding, I get an error saying that I am missing
Infragistics.Web.UI.GridControls.WebDataGrid.js_obf.igWebDataGridClientBinding.js
I then tried the code with that commented it out and it runs through the code successfully but does not display anything in the grid.
NOTE: Since your solution required the grid's _applyClientBinding() function that is not available in the 10.3 release, I had to grab it off the samples page. The code runs through without error, but I am not sure if there are any other functions that are necessary.
I am a little bit confused about this.
As I am not able to reproduce the issue ,
can you please share the code snippet regarding your sample
in a zipped attachment to the forum thread?
Hope hearing from you.
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.
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.
Dave
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
Looks like we are in the same boat so I will play around with it some more this week and hopfully an Infragistics developer will see this posting before too long and help us out.
Hi Dave
I tried as you suggested but still not getting var myGrid1 = $find("MainContent_pnlProjectDirectory_grdProjectDirectory"); //create a datasource var dataSource = myGrid1._get_dataSource(); var newData = eval(this.Data.lstProjectDir); //Empty the grid $(myGrid1._elements.dataTbl.lastChild).empty(); //Populate the dataGrid myGrid1._pi.show(myGrid1); for (var i = 0; i < newData.length; i++) { //dataSource.push(newData[i]); $(myGrid1.tableTemplate).data(newData[i]).appendTo(myGrid1._elements.dataTbl.lastChild); } //myGrid1._set_dataSource(dataSource); myGrid1._pi.hide(myGrid1);
Now result is coming as but data is not displayed
<tr><td style="width: 0px;">${Id}</td><td style="width: 200px;">${Name}</td><td style="width: 200px;">${DisplayName}</td><td style="width: 120px;">${Phone}</td>
<td style="width: 120px;">${Fax}</td><td style="width: 120px;">${BusinessEmail}</td></tr>But one more point when I am pushing data to datasource and applyingClientBinding it is giving errorfor (var i = 0; i < newData.length; i++) { dataSource.push(newData[i]); $(myGrid1.tableTemplate).data(newData[i]).appendTo(myGrid1._elements.dataTbl.lastChild); } myGrid1._set_dataSource(dataSource); myGrid1._applyClientBinding(); myGrid1._pi.hide(myGrid1);When not pushing data to datasource it is not giving any error of object does not support