We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Detailed Grid

Thread ID:





128023 Dec 27,2016 01:43 PM UTC Dec 30,2016 04:38 AM UTC ASP.NET Web Forms 3
Tags: Grid
Martin Sickel
Asked On December 27, 2016 01:43 PM UTC

Dear All

I am stuck by adding detailed data to a grid.

This is my Data Class

       public class Forcast3Days
            public List<Hourly> hour { get; set; }
            public string humidity { get; set; }
            public string local_info { get; set; }
            public string moon { get; set; }
            public string moonin { get; set; }
            public string moonout { get; set; }
            public string moonsymbol { get; set; }
            public string moondesc { get; set; }
            public string name { get; set; }
            public string pressure { get; set; }
            public string rain { get; set; }
            public string snowline { get; set; }
            public string sunmid { get; set; }
            public string sunmin { get; set; }
            public string sunmout { get; set; }
            public string symbol { get; set; }
            public string symboldesc { get; set; }
            public string tempmax { get; set; }
            public string tempmin { get; set; }
            public string value { get; set; }
            public string wind { get; set; }
            public string windgusts { get; set; }

        public class Hourly
            public string time { get; set; }
            public string clouds { get; set; }
            public string humidity { get; set; }
            public string pressure { get; set; }
            public string rain { get; set; }
            public string symbol { get; set; }
            public string snowline { get; set; }
            public string temp { get; set; }
            public string skycondition { get; set; }
            public string wdir { get; set; }
            public string wspd { get; set; }
            public string windchill { get; set; }
            public string windgusts { get; set; }

I also have ready the grid which shws all Data of the Forcast 3 days.
It looks like this

                                <ej:Grid ID="forcast3DaysGrid" runat="server" AllowScrolling="True" EnableTouch="true"" >
                                        <ej:Column Field="name" HeaderText="Name" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="value" HeaderText="Time" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="local_info" HeaderText="Local Info" TextAlign="Left"></ej:Column>
                                        <ej:Column Field="tempmin" HeaderText="Temp min" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="tempmax" HeaderText="Temp max" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="humidity" HeaderText="Humidity" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="sunmin" HeaderText="Sunrise" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="sunmid" HeaderText="Sun Mid" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="sunmout" HeaderText="Sunset" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="moon" HeaderText="Moon" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="moonin" HeaderText="Moonrise" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="moonout" HeaderText="Moonset" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="moondesc" HeaderText="Moon desc" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="moonsymbol" HeaderText="MoonSymbol" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="wind" HeaderText="Wind" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="windgusts" HeaderText="Windgusts" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="pressure" HeaderText="Pressure" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="rain" HeaderText="Rain" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="snowline" HeaderText="Snowline" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="wdir" HeaderText="Wdir" TextAlign="Left" ></ej:Column>
                                        <ej:Column Field="wspd" HeaderText="Wspd" TextAlign="Left" ></ej:Column>   
                                        <ej:Column Field="windgusts" HeaderText="Windgusts" TextAlign="Left" ></ej:Column>  
                                        <ej:Column Field="symboldesc" HeaderText="Symbol desc" TextAlign="Left" ></ej:Column>                                                               
                                        <ej:Column TemplateID="#columnTemplate" HeaderText="Symbol" TextAlign="Left" ></ej:Column>
                                    <ScrollSettings Height="375" Width="auto" VirtualScrollMode="Continuous" EnableVirtualization="true"></ScrollSettings>

Now I would like to have the details for the data which is available in the hour field, how can I do this?

Best regards

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 28, 2016 12:53 PM UTC

Hi Martin,  
We suspect that you would like to render the data in the details view. This can be achieved by using the detailsTemplate feature of the Grid. Template has been assigned to the DetailsTemplate API of the Grid whereas the DetailsDataBound has been used to render a Control where you can get the data currently expanding row. Therefore, the Grid will bind the dataSource with the given records. Refer to the following code example and Help Documents on DetailsTemplate. 
    <ej:Grid id="Grid" runat="server" allowpaging="True" DetailsTemplate="#GridContents"> 
        <ClientSideEvents DetailsDataBound="detailGridData" /> 
            <ej:Column Field="name" HeaderText="Name" TextAlign="Left" ></ej:Column> 
                  . . ..  
    <script id="GridContents" type="text/"> 
        <div id="gridTab{{:EmployeeID}}"> 
            <div id="detailGrid{{:EmployeeID}}"> 
    <script type="text/javascript"> 
        function detailGridData(e) { 
            e.detailsElement.find("#detailGrid" + e.data.EmployeeID).ejGrid({ 
                dataSource: e.data.hour, 
                columns: [ 
                        . . . 
We have an online demo on this that can be referred from the following link. 
Seeni Sakthi Kumar S. 

Martin Sickel
Replied On December 28, 2016 03:18 PM UTC

Thank you,

Your example fixes by issue.

Ragavee U S [Syncfusion]
Replied On December 30, 2016 04:38 AM UTC

Hi Martin, 
Thanks for your update. 
We are happy that your requirement is achieved. 
Ragavee U S. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon