How to put a small simple line graph inside a grid

[Zack]

Just need to essentially have a little line representing a trend of data inside a grid cell. Didn't know if there was an obvious way to do this.

      <ej-grid #grid id="Grid"

        [enableAltRow]="true"

        [allowSorting]="true"

        [dataSource]="data"

        (create)="onGridCreate($event)"

        class="herd-list-table">

        <e-columns>

          <e-column field="naab" headerText="NAAB" textAlign="left" width=150></e-column>

          <e-column field="name" headerText="Name" textAlign="left" width=150></e-column>

          <e-column field="priceTrend" headerText="Price Trend" [allowSorting]="false" textAlign="left" width=150></e-column>

          <e-column field="retailPrice" headerText="Retail Price" textAlign="left" width=150></e-column>

          <e-column field="specialPrice" headerText="Special Price" textAlign="left" width=150></e-column>

        </e-columns>

      </ej-grid>

The price trend column would probably be an array of data points. If this is not something easily done then maybe showing how to put in a picture or some other alternative.

[Seeni Sakthi Kumar Seeni Raj]

Hi Zack,  

 

Thanks for contacting Syncfusion Support.  

 

We can achieve your requirement “Placing controls with in the Grid Cell” using the column-template feature of the Grid. Refer to the following API Reference.  

 

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

https://help.syncfusion.com/api/js/ejgrid#members:columns-template 

 

In the following code example, we have placed an element in the template and later in the dataBound event and actionComplete event of the Grid, respective control will be rendered. 

 

 

<ej-grid #grid [allowPaging]="true" [pageSettings]="{pageSize: 2}" [dataSource]="GridDataManager" (actionComplete)="onPaging($event)" (dataBound)="onCreate($event)"> 

    <e-columns> 

        <e-column headerText="Lines" [template]="columnTemplate" width=600 textAlign="right"></e-column> 

 

    </e-columns> 

</ej-grid> 

 

    export class GridComponent { 

 

        public columnTemplate = "#columnTemplate"; 

    } 

 

Index.html 

 

<script type="text/x-jsrender" id="columnTemplate"> 

    <span id="container{{:OrderID}}"></span> 

</script> 

 

Therefore, in the dataBound event and actionComplete event, you can get the currentViewData of the Grid. Using the data, you can render the chart control within the Grid cells which were already rendered with an template elements as discussed about.  

 

onCreate(e){ 

        //Acces cell values using currentViewData 

        var data = e.model.currentViewData; 

        for(var i = 0; i < data.length; i++){ 

            $("#container" + data[i].OrderID).ejChart({ 

                series: 

                    [{ 

                        dataSource: data, 

                        xName: "Freight", 

                        yName: "EmployeeID", 

                        type: "line" 

                    }], 

            });       

        }   

    } 

    onPaging(e){ 

        if(e.requestType == "paging") { 

            //Acces cell values using currentViewData 

            var data = e.model.currentViewData; 

            for(var i = 0; i < data.length; i++) { 

                $("#container" + data[i].OrderID).ejChart({ 

                    series: 

                        [ 

                            { 

                                dataSource: data, 

                                xName: "Freight", 

                                yName: "EmployeeID", 

                                type: "line" 

                            } 

                        ] 

                });       

            }   

        } 

    } 

 

We have prepared a sample that can be downloaded from the following location. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/129221/ze/ejGridSample_ng2-1388499739.zip 

 

Regards,  

Seeni Sakthi Kumar S. 

[Zack]

I'd like to avoid paging. I was thinking something smaller using sparklines 

http://js.syncfusion.com/demos/web/#!/bootstrap/sparkline/defaultfunctionalities

https://help.syncfusion.com/angular-2/grid/columns

So far trying to merge these two with your response I've gotten to here 

      <ej-grid #grid id="Grid"

        [enableAltRow]="true"

        [allowSorting]="true"

        [dataSource]="data"

        (dataBound)="onCreate($event)"

        class="herd-list-table">

        <e-columns>

          <e-column field="naab" headerText="NAAB" textAlign="left" width=150>e-column>

          <e-column field="name" headerText="Name" textAlign="left" width=150>e-column>

          <e-column headerText="Price Trend" [allowSorting]="false" textAlign="right" width=150>

            <template e-template let-data>

              <span *ngIf="data.id" id="container{{data.id}}">hellospan>

            template>

          e-column>

          <e-column field="retailPrice" headerText="Retail Price" textAlign="left" width=150>e-column>

          <e-column field="specialPrice" headerText="Special Price" textAlign="left" width=150>e-column>

        e-columns>

      ej-grid>

  onCreate(e){ 

    //Acces cell values using currentViewData 

    var data = e.model.currentViewData; 

    for(var i = 0; i < data.length; i++){ 

      $("#container" + data[i].id).ejSparkline({ 

        dataSource: this.data[i].priceTrend,

        tooltip: {

          visible: true,

          font: {

              size: "12px",

          }

        },

        type: "line",

        size: { height: 20, width: 150 }

      });       

    }    

  } 

I'd also really like to avoid putting script tags into my index.html to grab a column template if at all possible.

[Zack]

Nevermind got it working can totally live with it. Thanks for the help!

[Zack]

Here is what I did, gets a spark line in the graph nicely and on sorting the other columns keeps the spark line in the chart. 

In the html template

      <ej-grid #grid id="Grid"

        [enableAltRow]="true"

        [allowSorting]="true"

        [dataSource]="data"

        (dataBound)="onCreate($event)"

        (actionComplete)="onComplete($event)"

        class="herd-list-table">

        <e-columns>

          <e-column field="naab" headerText="NAAB" textAlign="left" width=140></e-column>

          <e-column field="name" headerText="Name" textAlign="left" width=140></e-column>

          <e-column headerText="Price Trend" [template]="template" [allowSorting]="false" textAlign="left" width=160></e-column>

          <e-column field="retailPrice" headerText="Retail Price" textAlign="left" width=140></e-column>

          <e-column field="specialPrice" headerText="Special Price" textAlign="left" width=140></e-column>

        </e-columns>

      </ej-grid>

In the component

  public template= "#columnTemp"; 

  onCreate(e){ 

    var data = e.model.currentViewData; 

    for(var i = 0; i < data.length; i++){ 

      $("#container" + data[i].id).ejSparkline({ 

        dataSource: data[i].priceTrend,

        type: "line",

        size: { height: 20, width: 150 }

      });       

    }    

  } 

  onComplete(e){

    if(e.requestType == "sorting"){ 

      this.onCreate(e);

    }

  }

In the index.html 

  <script type="text/x-jsrender" id="columnTemp"> 

    <span id="container{{:id}}"></span>

  </script> 

Not really sure how it all works but it's very nice

[Seeni Sakthi Kumar Seeni Raj]

Hi Zack,  

 

Thanks for the update. We are happy to you hear that your requirement has been achieved and you are good to go. 

 

Regards, 

Seeni Sakthi Kumar S.