Nested stackes row

[Manolo]

Hi

I need nested stacked rows, something similar at this



How can I do it?

Thanks

[Balaji Marimuthu]

Hi Manolo, 

 

Thanks for contacting Syncfusion support. 

 

You can use the StackedHeaderRows property to display the nested stacked header rows in Grid. Refer to the Sample, Help document and code example as below. 

 

Sample: Sample-F124011 

 

Help Document: http://help.syncfusion.com/js/api/ejgrid#members:stackedheaderrows 

 

 

 

 

<ej:Grid ID="FlatGrid" runat="server" ShowStackedHeader="true" AllowPaging="True"> 

        <Columns> 

 

               . . .  

 

        </Columns> 

        <StackedHeaderRows> 

 

            <ej:StackedHeaderRow> 

                <StackedHeaderColumns> 

                    <ej:StackedHeaderColumn Column="OrderID,CustomerID,EmployeeID,Freight" HeaderText="Details of Orders" TextAlign="Center"/> 

                    <ej:StackedHeaderColumn Column="ShipCity,OrderDate" HeaderText="Details of ShipMent" TextAlign="Center"/> 

                </StackedHeaderColumns> 

            </ej:StackedHeaderRow> 

 

            <ej:StackedHeaderRow> 

                <StackedHeaderColumns> 

                    <ej:StackedHeaderColumn Column="OrderID,CustomerID,EmployeeID,Freight" HeaderText="Order Details" TextAlign="Center"/> 

                    <ej:StackedHeaderColumn Column="ShipCity" HeaderText="Ship City" CssClass="e-stackrow" /> 

                    <ej:StackedHeaderColumn Column="OrderDate" HeaderText="Order Date" CssClass="e-stackrow" /> 

                </StackedHeaderColumns> 

            </ej:StackedHeaderRow> 

 

        </StackedHeaderRows> 

        <ClientSideEvents DataBound="databound" /> 

    </ej:Grid> 

 

 

 

 

To merge the stacked header rows use the CssClass property and Client side event in Grid. Refer to the code example as below. 

 

Help Document: http://help.syncfusion.com/js/api/ejgrid#events:databound 

 

In following code example  we have used cssClass to find header and rowspan to merge the stackedheader rows. 

 

 

<ej:Grid ID="FlatGrid" runat="server" ShowStackedHeader="true" AllowPaging="True"> 

        <Columns> 

 

            . . .  

           

            <ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Width="80" Format="{0:MM/dd/yyyy}" CssClass="e-stackhdr" /> 

            <ej:Column Field="ShipCity" HeaderText="Ship City" Width="110" CssClass="e-stackhdr" /> 

        </Columns> 

        <StackedHeaderRows> 

            <ej:StackedHeaderRow> 

                

                    . . .  

 

                   <ej:StackedHeaderColumn Column="ShipCity" HeaderText="Ship City" CssClass="e-stackrow" /> 

                    <ej:StackedHeaderColumn Column="OrderDate" HeaderText="Order Date" CssClass="e-stackrow" /> 

                </StackedHeaderColumns> 

            </ej:StackedHeaderRow> 

        </StackedHeaderRows> 

        <ClientSideEvents DataBound="databound" /> 

    </ej:Grid> 

    <style> 

        th.e-stackhdr { 

            display: none; 

        } 

    </style> 

 

    <script type="text/javascript"> 

        function databound(args) { 

            var obj = $("#<%=FlatGrid.ClientID%>").ejGrid("instance"); 

          obj.getHeaderTable().find(".e-stackrow").attr("rowspan", 2);  //set rowspan - merging the stackedheader cells 

      } 

    </script> 

 

 

 

Regards, 

Balaji Marimuthu 

 

[Manolo]

Thanks a lot!

[Balaji Marimuthu]

Hi Manolo, 

Thanks for the update. 

We are happy to hear that the provided solution helped you. Please get back to us if you need any further assistance. 

Regards, 

Balaji Marimuthu 

[Manolo]

Ups... I've other problem with nested stacked rows.

The exportation to excel fail, also , when I export, the header style color is not imported.

I've modified your example for test

Attachment: SyncfusionASPNETApplication8_4819ff53.zip

[Balaji Marimuthu]

Hi Manolo, 

 

We have checked the issue and able to reproduce the below issue. The support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 

 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

 

 

To apply the style properties to the stacked header rows in exporting document, we suggest you to use the ServerExcelQueryCellInfo event, and customize style properties. 

 

 

protected void FlatGrid_ServerExcelExporting(object sender, Syncfusion.JavaScript.Web.GridEventArgs e) 

        { 

            ExcelExport exp = new ExcelExport(); 

            FlatGrid.Model.ServerExcelQueryCellInfo = querycell; 

            exp.Export(FlatGrid.Model, (IEnumerable)FlatGrid.DataSource, "SeguimientoElectricidad.xlsx", ExcelVersion.Excel2013, true, true, "none"); 

        } 

 

        protected void querycell(object obj) 

        { 

            IRange range = (IRange)obj; 

 

            range["A1:F1"].CellStyle.ColorIndex = ExcelKnownColors.Blue; 

            range["A2:F2"].CellStyle.ColorIndex = ExcelKnownColors.Blue; 

        } 

 

 

The ServerExcelQueryCellInfo event triggers for content only, so we have applied style to header rows by using the sheet range index. 

 

Help document: http://help.syncfusion.com/file-formats/xlsio/working-with-cell-or-range-formatting#create-a-style 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/157143/ze/SyncfusionASPNETApplication8-208282070 

 

Regards, 

Balaji Marimuthu