This is a migrated thread and some comments may be shown as answers.

RadGrid client side binding

5 Answers 183 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jevgenij
Top achievements
Rank 1
Jevgenij asked on 22 Mar 2012, 01:16 PM
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! 



5 Answers, 1 is accepted

Sort by
0
Radoslav
Telerik team
answered on 28 Mar 2012, 07:33 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Ajanta
Top achievements
Rank 1
answered on 08 Nov 2012, 06:57 PM
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



0
Radoslav
Telerik team
answered on 13 Nov 2012, 08:16 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Ajanta
Top achievements
Rank 1
answered on 13 Nov 2012, 05:10 PM
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>
0
Radoslav
Telerik team
answered on 16 Nov 2012, 08:01 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Jevgenij
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
Ajanta
Top achievements
Rank 1
Share this question
or