i want to show/hide command column based on column field in typescript

[divakar]

Hi Team,

   We are  using  EJ1 Components with angular 4 with typescript.

  1 , In my project , I have scenerio to show/hide command column based on column data. 

  2,  I need to show the Grid Header not column header. (Example : If Item details grid is showing means , I want to give the whole grid header like Item Details).

  

 Its there any option available for Ej grid components.

Waiting for your valuable reply.

Thanks,

Divakaran N

  

[Thavasianand Sankaranarayanan]

Hi Divakar, 

Thanks for contacting Syncfusion support. 

Query 1 : In my project , I have scenario to show/hide command column based on column data 

 

We have achieved your requirement using the rowDataBound event.  

In the below code example we have disabled the edit button when the EmployeeID value is greater than 4. 

[html] 

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" (rowDataBound)="onRowDataBound($event)"> 

  <e-columns> 

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

      <e-column field="EmployeeID"></e-column> 

      <e-column field="Freight"></e-column> 

      <e-column field="ShipCountry"></e-column> 

      <e-column  headerText= "Manage Records" [commands]="buttons"></e-column> 

  </e-columns> 

</ej-grid> 

 

[Ts Page] 

export class GridComponent { 

    public gridData; 

    public editSettings; 

    public buttons; 

   

    @ViewChild('gridRef') Grid: EJComponents<ej.Grid, any>; 

    filterSettings: any; 

    constructor() { 

            this.gridData = (window as any).gridData; 

            this.editSettings={allowEditing:true,allowAdding:true,allowDeleting:true}; 

            this.buttons=[    { type: "edit", buttonOptions: { text: "Edit" } }, 

                              { type: "delete", buttonOptions: { text: "Delete" } }, 

                             { type: "save", buttonOptions: { text: "Save" } }, 

                              { type: "cancel", buttonOptions: { text: "Cancel" } } 

                         ]; 

    } 

 

    onRowDataBound(args:any){ 

        var button = args.row.find(".e-rowcell.e-unboundcell").find(".e-editbutton"); 

          if(args.rowData.EmployeeID >4) 

          button.ejButton("disable"); 

    }    

} 

 

Query 2 :  I need to show the Grid Header not column header.  

 

To achieve this requirement we suggest you to use the stacked header feature of ejGrid. Please refer the following help documentation for details of Stacked header. 

https://help.syncfusion.com/angular/grid/stackedheader 

If this does not meet your requirement please provide a screenshot of your requirement so that we can provide appropriate solution for the query. 

Regards, 

Thavasianand S. 

[divakar]

Hi Team ,  

Thanks for your Support . 

But this will not solve  my problem , 

 Please see the below code for understaning purpose,

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

                 [stackedHeaderRows]="stackedHeaderRows" [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>

                    <ng-template e-template let-data>

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

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

                    </ng-template>

                </e-column>

            </e-columns>

        </ej-grid>

Based on the "Incident Status" field value , I want to show/hide command column button ..( Example, If incident Status is reported means show only "Convert to Incident" Button alone .. If incident Status is "Inprogress", show only View Incident button

Please help me on this

                      

Thanks,

Divakaran N

[Thavasianand Sankaranarayanan]

Hi Divakar, 

We have achieved your requirement using the ngIf condition in the ng-template element. 

In the below code example we have showed the “Convert To Incident” anchor tag if EmployeeID field is greater than 4 and showed “View Incident” if EmployeeID is less than 4. Similarly you can show the required tag based on your data. 

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" > 

  <e-columns> 

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

      <e-column field="EmployeeID" headerText="EmployeeID"></e-column> 

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

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

      <e-column headerText="Action"> 

        <ng-template e-template let-data> 

          <div *ngIf="data.EmployeeID > 4"> 

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

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

          </div> 

           <div *ngIf="data.EmployeeID <= 4"> 

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

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

           </div> 

        </ng-template>      

    </e-column> 

  </e-columns> 

</ej-grid> 

 

Note: Also multiple ng-template elements cannot be defined under the same element. So we suggest you to use the below provided solution. 

 

Refer the below screenshot. 

 

We have prepared a sample for your reference. Please refer the below link for sample. 

Sample : https://www.syncfusion.com/downloads/support/forum/140262/7z/Command_Column-1543235558 

Regards, 

Thavasianand S. 

[Jayabharathi J]

Hi Team, 

 Thanks for your support . Its really helped me a lot but for stacked Header ,But I have one more query on this . 

I tried your  shared code but stacked header is not covering the  command column. 

How to add the command column in stacked header . Please help me on this. 

<ej-grid id="workdaysgrid" [dataSource]="dsgridclostworkdaysdata" [allowResizing]="true" width="30%"> 

                                <e-columns> 

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

                                    <e-column field="typeInfo" headerText="Type Info"></e-column> 

                                    <e-column field="startDate" headerText="Start Date" type="date" format="{0:MM/dd/yyyy hh:mm:ss}"></e-column> 

                                    <e-column field="endDate" headerText="End Date" type="date" format="{0:MM/dd/yyyy hh:mm:ss}"></e-column> 

                                    <e-column field="totalLost" headerText="Total Lost"></e-column> 

                                    <e-column headerText=""> 

                                        <ng-template e-template let-data> 

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

                                               tooltip-placement="bottom" title="Delete"></a> 

                                        </ng-template> 

                                    </e-column> 

                                </e-columns> 

                            </ej-grid> 

Thanks, 

Divakaran N 

[Thavasianand Sankaranarayanan]

Hi Divakaran, 

Query : I tried your  shared code but stacked header is not covering the  command column.  

 

To achieve your requirement we suggest you to provide the field value for the command column and use that field value in the stackedheader columns property. Because the stacked header will be added for the columns based on the field value.  

Please refer the below code example. 

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings"  [showStackedHeader]="true" [stackedHeaderRows]="stackedHeaderRows"> 

  <e-columns> 

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

      <e-column field="Freight"></e-column> 

      <e-column field="Action" headerText="Action"> 

        <ng-template e-template let-data>  

          <div *ngIf="data.EmployeeID > 4">  

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

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

          </div>  

           <div *ngIf="data.EmployeeID <= 4">  

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

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

           </div>  

        </ng-template>   

    </e-column> 

    <e-column field="EmployeeID"></e-column>     

    <e-column field="ShipCountry"></e-column> 

  </e-columns> 

</ej-grid> 

 

[component.ts] 

export class GridComponent { 

    public gridData; 

    public editSettings; 

    public stackedHeaderRows: any; 

 

   

    @ViewChild('gridRef') Grid: EJComponents<ej.Grid, any>; 

    filterSettings: any; 

    constructor() { 

            this.gridData = (window as any).gridData; 

            this.editSettings={allowEditing:true,allowAdding:true,allowDeleting:true}; 

            this.stackedHeaderRows = [{ 

                stackedHeaderColumns: 

                [ 

                    { headerText: "Order Details", column: "OrderID,Action,Freight" }, 

                ] 

            }]; 

    } 

 

Refer the below image. 

 

Refer the help documentation. 

Link: https://help.syncfusion.com/angular/grid/stackedheader#adding-stacked-header-columns 

Regards, 

Thavasianand S.