Angular 9 grid column grouping

[Neha Singh]

Hello Team,

Urgent :

Need to create a grid with two columns 'Facility' & 'Devices', further 'Devices' will get converted to three columns 'Total', 'Active' & 'InActive'.

1) Facility

2) Devices

     a) Total

     b) Active

     c) InActive

Not getting a way to display my data in such format. I have attach a screenshot for the sample look.

URGENT HELP REQUIRED

Regards

Neha

Attachment: gridsyncfusion_e95fdb55.zip

[Sujith Kumar Rajkumar]

Hi Neha, 

 

Greetings from Syncfusion support. 

 

Based on the query we could understand that your requirement is to render sub-headers under a header in the Grid. You can achieve this requirement by using the stacked columns functionality of the EJ2 Grid. 

 

It can be rendered by providing the sub header properties in the columns property of the Grid column. More details on this can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/#resize-stacked-column 

 

We have also prepared a sample based on this for your reference. You can find it below, 

 

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

 

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

 

Regards, 

Sujith R 

[Neha Singh]

Thank you Sujith. Actually I am already done with the integration part. Just one help required in this incident.

In columnModel how to use icon instead of headertext.

To be specific instead of headerText 'Active' I need to use one image from my asset folder.

Just this if you can respond quickly.

I am left with this only.

Thanks in advance

[Neha Singh]

Hello Sujith,

Can I expect a response quickly please?

Regards

Neha

[Sujith Kumar Rajkumar]

Hi Neha, 

 

You can achieve your requirement of displaying icon in column header text using the columns headerTemplate property. Since you need to render it for the stacked header columns, we suggest you to use the TypeScript way to achieve the same as demonstrated in the below code snippet, 

 

this.orderColumns = [ 

    { 

        field: 'Freight', 

        headerTemplate: `<div> 

                            <span class="e-icons e-add"></span> Freight 

                         </div>`, 

        width: 120, 

        format: 'C1', 

        textAlign: 'Right', 

        minWidth: 10 

    } 

]; 

 

In the above code we have used a default ‘add’ icon available with the Syncfusion components. Instead of this you can specify the required icon here. 

 

We have modified the previously shared sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/angular-qwujz1-cfacuh?file=app.component.ts 

 

More details on this can be checked in the below documentation links, 

 

Header template(TS approach): https://ej2.syncfusion.com/documentation/grid/columns/#header-template 

 

Header template(angular approach): https://ej2.syncfusion.com/angular/documentation/grid/columns/#header-template 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Neha Singh]

Thank you Sujith. It is bringing add icon but still I am not able to bring image from asset folder. I have to bring custom image there. Can you please keep one svg in asset folder and then provide sample with same?

Really appreciate your effort. But kind of final sample. :)

Waiting for sample.

Regards

Neha 

[Sujith Kumar Rajkumar]

Hi Neha, 

 

You’re welcome. And as for this query – “Can you please keep one svg in asset folder and then provide sample with same?”, you can display a local svg image in the header template by loading it in the image tag as demonstrated in the below code snippet, 

 

this.orderColumns = [ 

      { 

          field: 'OrderDate', 

          headerTemplate: `<img style="height: 25px;" src= "../assets/calendarIcon.svg"/>`, 

          format: 'yMd', 

          width: 130, 

      } 

] 

 

Please find the below sample prepared based on this for your reference, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/164828/ze/GridHeadertemplate180708936 

 

Regards, 

Sujith R 

[Neha Singh]

Hello Sujith,

Thank you:)

your solution worked.

I am here with one more issue

How to change line chart style for last segment | ASP.NET Core Forums | Syncfusion

Is there any sample available for Angular?

For null values I need to show dotted line else solid line.

Regards

Neha

[Srihari Muthukaruppan]

Hi Neha, 

  

We would like to let you know that there are no direct support to achieve your requirement through line chart. Hence we suggest you to use MultiColoredLine chart and loaded event to achieve your requirement. Please find the sample, code snippet and screenshot below for your reference. 

  

Sample: https://stackblitz.com/edit/angular-6r8igd-uloddr?file=app.component.ts 

  

Code Snippet: 

App.component.html: 

  

<ejs-chart 

      style="display:block" 

      align="center" 

      id="chart" 

      [title]="title" 

      [primaryXAxis]="primaryXAxis" 

      [primaryYAxis]="primaryYAxis" 

      [tooltip]="tooltip" 

      (load)="load($event)" 

      (loaded)="loaded($event)" 

      [chartArea]="chartArea" 

      [width]="width" 

      [legendSettings]="legend" 

    > 

      <e-series-collection> 

        <e-series 

          [dataSource]="data" 

          type="MultiColoredLine" 

          xName="x" 

          yName="y" 

          name="Rainfall" 

          width="1.5" 

          [emptyPointSettings]="emptyPoint" 

          pointColorMapping="color" 

        > 

        </e-series> 

      </e-series-collection> 

    </ejs-chart> 

  

App.component.ts: 

// add your additional code here 

public data: Object[] = [ 

    { x: new Date(2005, 0, 1), y: 21, color: "blue" }, 

    { x: new Date(2006, 0, 1), y: 24, color: "blue" }, 

    { x: new Date(2007, 0, 1), y: null, color: "red" }, 

    { x: new Date(2008, 0, 1), y: 38, color: "blue" }, 

    { x: new Date(2009, 0, 1), y: 54, color: "blue" }, 

    { x: new Date(2010, 0, 1), y: null, color: "red" }, 

    { x: new Date(2011, 0, 1), y: 70, color: "blue" } 

  ]; 

  

public emptyPoint: Object = { 

    mode: "Average" 

  }; 

  

public loaded(args: ILoadedEventArgs): void { 

    for (var i = 0; i < args.chart.series[0].dataSource["length"]; i++) { 

      if (args.chart.series[0].dataSource[i].y == null) { 

        document 

          .getElementById("chart_Series_0_Point_" + i) 

          .setAttribute("stroke-dasharray", "5,5"); 

      } 

    } 

  } 

  

// add your additional code here 

  

  

Screenshot: 

 

  

Let us know if you have any concerns. 

  

Regards, 

Srihari M