RadGrid client side binding

[Jevgenij]

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! 

[Radoslav]

Hello Jevgenij,

Unfortunately the RadGrid does not support build in the desired functionality when it is bound on client side. However you could achieved it manually by handling the OnRowDataBound event, extract value from the eventArgs.get_dataItem() object and assign it to the CountryCode cells. For example:

<telerik:GridBoundColumn DataField="CountryCode" HeaderText="CountryCode" >
</telerik:GridBoundColumn>

<telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
            function OnRowDataBound(sender, eventArgs) {
                eventArgs.get_item().get_cell("CountryCode").innerHTML = eventArgs.get_dataItem().Country.CountryCode;
            }
        </script>
    </telerik:RadCodeBlock>

Additionally I am sending you a simple example which demonstrates the described approach. Please check it out and let me know if it helps you.

All the best,
Radoslav
the Telerik team

[Ajanta]

Hi 

 I tried the same function function OnRowDataBound(sender, eventArgs) {
            eventArgs.get_item().get_cell("FieldValue").innerHTML = eventArgs.get_dataItem().Title.FieldValue;
        }

However i still dont see my data loading. The code is as follows:-

[DataContract]
    public class Demo
    {
        [DataMember]
        public DemoType Author { get; set; }
        [DataMember]
        public DemoType Title { get; set; }
    }

[DataContract]
    public class DemoType
    {
        [DataMember]
        public string UserName;


        /// <summary>
        /// Data member Email
        /// </summary>
        [DataMember]
        public string Email;


        /// <summary>
        /// Data member SelectedUserProfilePageUrl
        /// </summary>
        [DataMember]
        public string SelectedUserProfilePageUrl;


        /// <summary>
        /// Data member PresenceIndicatorId
        /// </summary>
        [DataMember]
        public string PresenceIndicatorId;


        /// <summary>
        /// Data member FieldValue
        /// </summary>
        [DataMember]
        public string FieldValue;
    }
<telerik:RadCodeBlock ID="rdCodeBlock" runat="server">
    <script type="text/javascript">
function OnRowDataBound(sender, eventArgs) {
            eventArgs.get_item().get_cell("FieldValue").innerHTML = eventArgs.get_dataItem().Title.FieldValue;
        }
 </script>
</telerik:RadCodeBlock>
<Columns>
                <telerik:GridBoundColumn DataField="FieldValue"
                 UniqueName="Title" HeaderText="Title">
                </telerik:GridBoundColumn>

Please assist

Regards
Ajanta

[Radoslav]

Hi Ajanta,

Could you please try changing the OnRowDataBound function as following and let me know if the issue still persists:

function OnRowDataBound(sender, eventArgs) {
            eventArgs.get_item().get_cell("Title").innerHTML = eventArgs.get_dataItem().Title.FieldValue;
}

Looking forward for your reply.

Greetings,
Radoslav
the Telerik team

[Ajanta]

Hi 

I have used the following, but it doesnot show any presence indicator. Any help with this issue is appreciated :-

<telerik:RadCodeBlock ID="rdCodeBlock" runat="server">
    <script type="text/javascript">


        function OnRowDataBound(sender, eventArgs) {
            eventArgs.get_item().get_cell("Preparer").innerHTML = eventArgs.get_dataItem().Preparer.FieldValue;
        }
 </script>
</telerik:RadCodeBlock>

<telerik:GridTemplateColumn UniqueName="Preparer" AllowFiltering="true" ItemStyle-Width="100px"
                    ItemStyle-Wrap="false" HeaderStyle-Width="100px" HeaderStyle-VerticalAlign="Middle"
                    HeaderStyle-Wrap="false" HeaderImageUrl="/_layouts/images/Deloitte.Taxportal.Basecomponents/Grid/imnhdr.gif"
                    DataField="Preparer.FieldValue">
                    <ItemTemplate>
                        <span id="spnPreparer" runat="server" visible="true">
                            <img id='<%#  DataBinder.Eval(Container.DataItem,"Preparer.PresenceIndicatorId") +"_" + DataBinder.Eval(Container.DataItem,"Preparer.Email") %>'
                                onload="IMNRC('<%# DataBinder.Eval(Container.DataItem,"Preparer.Email") %>',getElementById('<%# DataBinder.Eval(Container.DataItem,"Preparer.PresenceIndicatorId") +"_" + DataBinder.Eval(Container.DataItem,"Preparer.Email") %>'))"
                                alt="" showofflinepawn='1' src='<%# DataBinder.Eval(Container.DataItem,"Preparer.FieldValue") %>'
                                class='presenceIndicator' />
                            <asp:HyperLink runat="server" ID="lnkPreparer" Font-Bold="false" Text='<%# DataBinder.Eval(Container.DataItem,"Preparer.FieldValue") %>'
                                NavigateUrl='<%# DataBinder.Eval(Container.DataItem,"Preparer.SelectedUserProfilePageUrl") %>'
                                onclick='javascript:GoToLink(this);return false;' />
                        </span>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>

[Radoslav]

Hello Ajanta,

When you use client side data binding you could not use DataBinder.Eval, this expression is evaluated on the server side and it is not valid when the grid is bound on the client.   
Additionally if you want to change the text of control from the GridTemplateColumn.ItemTemplate on the client you need to use the following code snippet:

<telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
            function OnRowDataBound(sender, eventArgs) {
                var hiperLink = eventArgs.get_item().findElement("lnkPreparer");
                hiperLink.innerHTML = eventArgs.get_dataItem().Preparer.FieldValue;
            }
        </script>
    </telerik:RadCodeBlock>

Where the "lnkPreparer" is the ID of the server side control placed in the GridTemplateColumn.ItemTemplate.
More information about findElement and findControl functions you could find here:
http://www.telerik.com/help/aspnet-ajax/grid-griddataitem-findelement.html
http://www.telerik.com/help/aspnet-ajax/grid-griddataitem-findcontrol.html

I hope this helps.

All the best,
Radoslav
the Telerik team