Multipe columns without header side by side in angular

[Dileep]

Hi I am trying to implement the above design in the suncfusion grid but facing the issue . can we loop through the e-columns in syncfusion does it supports ?

Below is my code : 

<ejs-grid [dataSource]='allData' allowPaging='true'  [pageSettings]='pageSettings' height = '300' >

                                    <e-columns>

                                        <e-column  width='70' field='accountDescription' headerText='Order ID' ></e-column>

                                        <e-column width='30' field='dueDate' headerText='Customer Name' >

                                            <ng-template e-template let-data>

                                                <button type="button" class="btn ey-orange-capsule capsule">Pending</button>                                                                  

                                            </ng-template>

                                        </e-column>

                                       

                                    </e-columns>

                                </ejs-grid>

But the output is showing only 2 columns . can anyone please suggest how I can achieve the above design and the data is coming from api call, need a button too in the columns and don't want the headers in the grid . 

[Rajapandi Ravi]

Hi Dileep, 

Based on your query we could see that you like to render multiple columns without header along with buttons. We have checked your shared code example and we found that you are defining the ng-template with wrong format (ng-template e-template). So, we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information. 

 

<ejs-grid [dataSource]='allData' allowPaging='true' height = '300' > 

<e-columns> 

    <e-column width='70' field='accountDescription' headerText='Order ID'></e-column> 

    <e-column width='30' headerText='status'> 

        <ng-template #template let-data>//define the template with proper format 

            <button type="button" class="btn ey-orange-capsule capsule">Pending</button> 

        </ng-template> 

    </e-column> 

 

    <e-column width='70' field='description' headerText='Customer Name'> 

    </e-column> 

    <e-column width='30' headerText='status'> 

        <ng-template #template let-data> 

            <button type="button" class="btn ey-orange-capsule capsule">Pending</button> 

        </ng-template> 

    </e-column> 

 

    <e-column width='70' field='name' headerText='Customer Name'> 

    </e-column> 

    <e-column width='30' headerText='status'> 

        <ng-template #template let-data> 

            <button type="button" class="btn ey-orange-capsule capsule">Pending</button> 

        </ng-template> 

    </e-column> 

</e-columns> 

</ejs-grid> 

 

<style> 

    .e-gridheader { 

        display: none; //hide the header 

    } 

</style> 

 

Sample: https://stackblitz.com/edit/angular-j13hft?file=app.component.html 

Regards, 

Rajapandi R