[Solved] DataGrid client side data binding

[Kelly]

I need a grid that will display formatted text and hyperlinks. There are no issues getting the grid to populate on the server, but I'm having an issue getting client side databinding to work properly. There doesn't seem to be any problem with using a GridBoundColumn, that one gets updated as expected, but other column types I've tried (GridTemplateColumn and GridHyperLinkColumn) don't produce any results.

Here is the script that takes a json array of objects and updates the grid.
The json is something like [{JobCode:"Code1",JobDesc:"Desc1",Primary:1},{JobCode:"Code2",JobDesc:"Desc2",Primary:0}]

	<script>
	function updateGrid(strJSON) {
	var tableView = $find("grid1").get_masterTableView();
	// create the data source
	var jsonObj = eval("(" + strJSON + ")");
	tableView.set_dataSource(jsonObj.RowData);
	tableView.dataBind();
	tableView.get_owner().repaint();
	}
	</script>

Here is the grid template.

	<telerik:RadGrid ID="grid1" CssClass="grid" Skin="Office2007"
	AutoGenerateColumns="False" runat="server">
	<MasterTableView CellSpacing="-1">
	<NoRecordsTemplate>
	<div>
	There are no records to display</div>
	</NoRecordsTemplate>
	<Columns>
	<telerik:GridBoundColumn DataField="JobCode" HeaderText="Job Code">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn DataField="JobDesc" HeaderText="Job Desc">
	</telerik:GridBoundColumn>
	<telerik:GridTemplateColumn UniqueName="Primary" HeaderText="Primary">
	<ItemTemplate>
	<%#(DataBinder.Eval(Container.DataItem,"Primary").ToString()=="1")?"Y":"N"%>
	</ItemTemplate>
	</telerik:GridTemplateColumn>
	</Columns>
	<AlternatingItemStyle CssClass="altRow" />
	<ItemStyle CssClass="row"></ItemStyle>
	</MasterTableView>
	</telerik:RadGrid>

This all works well unless I use a column other than the GridBoundColumn.

I've looked in the RadGridScripts.js file to try and figure this thing out.
For the GridTemplateColumn, it tries to fill in the grid using the _fillTemplateEditorsData function. This function is expecting to find some control or element in which to put the contents of the data. There are two searches performed:
var _301 = $telerik.findControl((cell != null) ? cell: row, _300);
and
var _304 = $telerik.findElement((cell != null) ? cell: row, _300);

In both cases, they return nothing, so the function just returns without having updated the cell contents with text.

I would really like to be able to control the grid on the client pc. Can somebody let me know what, if anything, I'm doing wrong and how I can manipulate the grid on the client using columns other than the GridBoundColumn.

I should mention that I'm using  version 2009.1.311.35

Thank you

[Sebastian]

Hello Kelly,

DataBoundLiteralControls (generated with binding expressions used in a template column's item template) or control like hyperlinks (which are part of built-in GridHyperLinkColumn) cannot be created purely on the client when using client-side binding because they are ASP.NET server controls.

Possible solutions for your case can be those demonstrated in the forum threads linked below:

http://www.telerik.com/community/forums/aspnet-ajax/grid/gridtemplatecolumn-doesn-t-generate-inner-element-when-page-size-changed.aspx

http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-client-side-binding-and-page-size-change.aspx

Kind regards,
Sebastian
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.