CODEWITHSUNDEEP
teleriktelerik-grid
Evgeniy O
Evgeniy O

Reputation: 143

RadGrid client side binding

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!

Upvotes: 0

Views: 3292

Answers (2)

Wilpeers
Wilpeers

Reputation: 11

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 />
}

Upvotes: 1

msigman
msigman

Reputation: 4524

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>

Upvotes: 0

Related Questions