I want the header in the Grid

[Sridhar]

Hai Team,

           I am currently working angular 4 with syncfusion project.In that I want to give header in the grid.

           Please provide a quick solution for this issue.

           Herewith I attach the Html code for your reference.

HTML CODE

    <ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" [pageSettings]="pageSettings"

           [allowSorting]="true" [allowFiltering]="true" [filterSettings]="filterType" [toolbarSettings]="toolbarItems"[allowSearching]="true" [allowResizing]="true" width="90%">

            <e-columns>

                <e-column field="safetyID" [isPrimaryKey]="true" headerText="Safety ID" [visible]="false"></e-column>

                <e-column field="incidentNumber" headerText="Incident Number"></e-column>

                <e-column field="incidentTypeDesc" headerText="Incident Type"></e-column>

                <e-column field="incidentDatetime" headerText="Incident Datetime" type="date" format="{0:MM/dd/yyyy hh:mm:ss}"></e-column>

                <e-column field="locationDesc" headerText="Business Location"></e-column>

                <e-column field="incidentDesc" headerText="Incident Desc"></e-column>

                <e-column field="incidentStatus" headerText="Incident Status"></e-column>

                <e-column headerText="Action">

                    <ng-template e-template let-data>

                        <a class="fa fa-pencil-square-o" style="color:#005BAA;cursor:pointer" name="editdata" (click)="clicked($event)"

                           tooltip-placement="bottom" title="Convert To Incident"></a>

                    </ng-template>

                </e-column>

            </e-columns>

        </ej-grid>

Regards,
Sridhar

[Vignesh Natarajan]

Hi Sridhar, 

Thanks for using Syncfusion products. 

Before proceeding with your query, we need some clarification regarding your requirement. So kindly share the following details 

1. Do you want to customize the grid header. We have given the support for headertemplate support. Refer our UG documentation for your reference

https://help.syncfusion.com/angular/grid/columns#header-template  

2. Or do you want to show the header above the grid?.
3. Kindly share the screenshot or video demonstration regarding your requirement.

Above requested details will be helpful for us to validate the reported query.                           

Regards, 

Vignesh Natarajan 

[Sridhar]

Hai Team,

          I want to give some heading in the Grid and i will provide the screenshots for your better reference. I need to give some heading where i highlighted in the screenshot in yellow color.Please check it and let me know soon.

[Vignesh Natarajan]

Hi Sridhar, 

 

 

Thanks for the update. 

 

 

From your query we understand that you need to customize the Grid toolbar. We have given support to render custom toolbar items. We have achieved your requirement using Custom Toolbar feature of ejGrid. 

 

 

Refer the below code example 

 

 

[html] 

 

<ej-grid id="Grid" [dataSource]="gridData" [toolbarSettings]="toolbarSettings" allowPaging="true" allowSearching="true" [toolbarSettings]="toolbarItems" > 

    <e-columns> 

        <e-column field="OrderID" [isPrimaryKey]="true" headerText="OrderID"></e-column> 

        <e-column field="items.sachin" headerText="CustomerID"></e-column> 

        <e-column field="Freight" headerText="Freight" editType="numericedit"></e-column> 

        <e-column field="ShipCountry" headerText="ShipCountry" editType="dropdownedit"></e-column> 

        <e-column field="OrderDate" headerText="OrderDate" editType="datepicker" format="{0:dd/MM/yyyy}"></e-column> 

     </e-columns> 

</ej-grid> 

 

 

 

[TS] 

 

constructor() { 

        this.toolbarSettings={showToolbar:true, toolbarItems : ["search"],customToolbarItems:["Header"]}; 

        this.gridData = [ 

    

 

[index.html] 

 

<style type="text/css" class="cssStyles"> 

    .Header{ 

        width: 100px !important; 

    } 

      .Header:before 

      {        

          

          content:"Header"; 

      }  

  </style> 

 

 

  

 

Refer the below screenshot for the output 

 

 

 

 

 

 

For your convenience we have prepared a sample which can be downloaded from below link. 

 

 

Sample: http://www.syncfusion.com/downloads/support/forum/140528/7z/angular2-seeds669248372  

 

 

Refer our help documentation for your reference 

 

 

https://help.syncfusion.com/angular/grid/toolbar#custom-toolbar-items  

 

 

Regards, 

Vignesh Natarajan