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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Detailed Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

128023 Dec 27,2016 08:43 AM Dec 29,2016 11:38 PM ASP.NET Web Forms 3
loading
Tags: Grid
Martin Sickel
Asked On December 27, 2016 08:43 AM

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"" >
                                    <Columns>
                                        <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>
                                    </Columns>
                                    <ScrollSettings Height="375" Width="auto" VirtualScrollMode="Continuous" EnableVirtualization="true"></ScrollSettings>
                                </ej:Grid>

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
Martin


Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 28, 2016 07:53 AM

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" /> 
        <Columns> 
            <ej:Column Field="name" HeaderText="Name" TextAlign="Left" ></ej:Column> 
                  . . ..  
        </Columns> 
    </ej:Grid> 
 
    <script id="GridContents" type="text/"> 
        <div id="gridTab{{:EmployeeID}}"> 
            <div id="detailGrid{{:EmployeeID}}"> 
            </div> 
        </div> 
    </script> 
 
    <script type="text/javascript"> 
        function detailGridData(e) { 
            e.detailsElement.find("#detailGrid" + e.data.EmployeeID).ejGrid({ 
                dataSource: e.data.hour, 
                columns: [ 
                        . . . 
                ] 
            }); 
        } 
    </script> 
 
 
We have an online demo on this that can be referred from the following link. 
 
 
Regards, 
Seeni Sakthi Kumar S. 


Martin Sickel
Replied On December 28, 2016 10:18 AM

Thank you,

Your example fixes by issue.

Ragavee U S [Syncfusion]
Replied On December 29, 2016 11:38 PM

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


CONFIRMATION

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.

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

;