stacked headers in AngularJS

[Edouard]

Hi, I would like to know how to create stackedHeaders in angularjs version of ejGrid. I tried to merge the angularjs and javascript way but without success for now. Do you have a best practice for this ?

Thank you in advance,

EL.

[Edouard]

Here is an example that I'm trying to do, but it doesn't work. I see two colgroups generated into the DOM but they are empty :/ What did I miss ?

<div class="grid" ng-controller="MainController as mainCtrl">

<button ng-click="mainCtrl.add()">Add</button>

<div id="grid"

ej-grid

e-datasource="mainCtrl.dataSource"

e-allowpaging="true"

e-pagesettings-pagesize="10"

e-showStackedHeader="true">

<div e-stackedHeaderRows>

<div e-stackedHeaderColumns>

<div e-headertext:"Cols C1 and C2" column="c1,c2"></div>

<div e-headertext:"Cols C3 and C4" column="c3,c4"></div>

</div>

</div>

<div e-columns>

<div e-column e-field="c1" e-headertext="C1"></div>

<div e-column e-field="c2" e-headertext="C2"></div>

<div e-column e-field="c3" e-headertext="C3"></div>

<div e-column e-field="c4" e-headertext="C4"></div>

</div>

</div>

</div>

[Mohammed Farook J]

Hi Edouard 

 

Thanks for contacting Syncfusion supports. 

 

 

We have analyzed your provide code example  and we suspect that using stacked header columns declaration in your sample. Could you please found the code example of stacked header columns using Angular JS. 

 

 

 

<div ng-controller="PhoneListCtrl"> 

    <div class="content-container-fluid"> 

        <div class="row"> 

            <div class="cols-sample-area"> 

                <div id="Grid" ej-grid e-datasource="data" e-allowpaging="true" e-allowsorting="true" e-showstackedheader="true"> 

                    <div e-stackedheaderrows> 

                        <div e-stackedheaderrow> 

                            <div e-stackedheadercolumns> 

                                <div e-stackedheadercolumn e-headertext="col1" e-column="OrderID,CustomerID"></div> 

                                <div e-stackedheadercolumn e-headertext="col2" e-column="EmployeeID,Freight"></div> 

                            </div> 

                        </div> 

                    </div> 

                    <div e-columns> 

                        <div e-column e-field="OrderID" e-headertext="Order ID" e-textalign="right" e-width="75"></div> 

                        <div e-column e-field="CustomerID" e-headertext="Customer ID" e-width="80"></div> 

                        <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-textalign="right" e-width="75"></div> 

                        <div e-column e-field="Freight" e-headertext="Freight" e-textalign="right" e-format="{0:C}" e-width="75"></div> 

                        <div e-column e-field="OrderDate" e-headertext="Order Date" e-format="{0:MM/dd/yyyy}" e-textalign="right" e-width="80"></div> 

                    </div> 

                </div> 

            </div> 

        </div> 

    </div> 

</div> 

 

 

 

 

Regards, 

J.Mohammed Farook 

[Edouard]

Thank you!

[Thavasianand Sankaranarayanan]

Hi Edouard, 

 

We are happy that the problem has been solved at your end. 

 

Please get back to us if you need any further assistance.  

 

Regards, 

Thavasianand S.