Detailed Grid

[Martin Sickel]

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]

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> 

 

https://help.syncfusion.com/aspnet/grid/row#details-template 

https://help.syncfusion.com/api/js/ejgrid#events:detailsdatabound 

https://help.syncfusion.com/api/js/ejgrid#members:detailstemplate 

 

We have an online demo on this that can be referred from the following link. 

 

http://asp.syncfusion.com/demos/web/grid/detailtemplate.aspx 

 

Regards, 

Seeni Sakthi Kumar S. 

[Martin Sickel]

Thank you,

Your example fixes by issue.

[Ragavee U S]

Hi Martin, 

  

Thanks for your update. 

 

We are happy that your requirement is achieved. 

  

Regards, 

Ragavee U S.