RadGrid client side binding - telerik

Question

I've got a question regarding the Telerik RadGrid control client side binding. I want to populate grid with the cities on the Client Side. I've got a object City, which has a property Country:
[DataContract]
[KnownType(typeof(Country))]
public class City
{
[DataMember]
public virtual string CityCode { get; set; }
[DataMember]
public virtual string CityName { get; set; }
[DataMember]}
public virtual Country Country { get; set;
}
}
[DataContract]
public class Country
{
[DataMember]
public virtual string CountryCode { get; set; }
[DataMember]
public virtual string Iso2Code { get; set; }
[DataMember]
public virtual string CountryName { get; set; }
[DataMember]
public virtual char RDC { get; set; }
}
I retrieve this data as a JSON object to the client side using the JQuery Ajax and WCF.
and then I bind it to the grid:
rgCity.set_dataSource(dataItem);
rgCity.dataBind();
Here are the Columns definition for the grid:
<Columns>
<telerik:GridBoundColumn HeaderText="City Code" DataField="CityCode" MaxLength="3"> </telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="City Name" DataField="CityName"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Country Code" DataField="CountryCode" MaxLength="2"></telerik:GridBoundColumn>
</Columns>
The problem is I'm not getting the Country Code column populated with the data. I think the problem is in data binding, but I'm not sure if is it possible to bind a complex objects.
I think should be something like that:
<telerik:GridBoundColumn HeaderText="Country Code" DataField="**City.CountryCode**" MaxLength="2"></telerik:GridBoundColumn>
I appreciate any help solving that issue!

Answer 1

You can just overwrite the
Telerik.Web.UI.GridTableView.dataBind function by replacing
this snippet from the original minified telerik script:
var J = r[v].get_uniqueName();
var n = this.getCellByColumnUniqueName(H, J);
if (!n) {
continue;
}var D = r[v]._data.DataField;
if (typeof (D) == "undefined") {
D = J;
} var h = this._dataSource[u][D];
if (h == null) {
h = "";
with something, for example, like this:
var J = r[v].get_uniqueName();
var n = this.getCellByColumnUniqueName(H, J);
if (!n) {
continue;
}var D = r[v]._data.DataField;
if (typeof (D) == "undefined") {
D = J;
}
//change here to eval the dataField
var h = AvoidEvalDueToPerformance(this._dataSource[u], D);
if (h == null) {
h = "";
AvoidEvalDueToPerformance function is defined as follows:
function AvoidEvalDueToPerformance(object, propertyString) {
var k = propertyString.split(".");
for (var i = 0; i < k.length; i++)
if (object[k[i]]) object = object[k[i]];
else return object;
return object;
}
Hope this helps someone as this was the first result i stumbled upon searching for the answer of question "How to bind RadGrid to complex object clientside"
P.S. to overwrite a function you could write
Telerik.Web.UI.GridTableView.dataBind.prototype = function(){
//copy-paste the Telerik.Web.UI.GridTableView.dataBind.prototype contents
//from your favorite javascript debugger output
//(or grep output or w/e you prefer) here :)<br />
}

Answer 2

I don't think you can do complex databinding like that. Instead, I'd make a new property that returned the Country Code directly, then bind to that. Example:
[DataContract]
[KnownType(typeof(Country))]
public class City
{
...
[DataMember]}
public virtual CountryCode{ get Country.CountryCode; }
}
Declarative databinding for the grid then is what you had:
<Columns>
...
<telerik:GridBoundColumn HeaderText="Country Code" DataField="CountryCode" MaxLength="2"></telerik:GridBoundColumn>