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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Nested stackes row

Thread ID:

Created:

Updated:

Platform:

Replies:

124011 May 9,2016 07:45 AM UTC May 18,2016 01:24 PM UTC ASP.NET Web Forms 5
loading
Tags: Grid
Manolo
Asked On May 9, 2016 07:45 AM UTC

Hi

I need nested stacked rows, something similar at this



How can I do it?

Thanks

Balaji Marimuthu [Syncfusion]
Replied On May 10, 2016 06:51 AM UTC

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 
 
 
 
 
 
<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. 
 
 
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
Replied On May 10, 2016 07:13 AM UTC

Thanks a lot!

Balaji Marimuthu [Syncfusion]
Replied On May 11, 2016 04:06 AM UTC

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
Replied On May 17, 2016 07:43 AM UTC

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 [Syncfusion]
Replied On May 18, 2016 01:24 PM UTC

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. 
 
 
 
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. 
 
 
 
Regards, 
Balaji Marimuthu 
 


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

;