We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

How to put a small simple line graph inside a grid

Thread ID:

Created:

Updated:

Platform:

Replies:

129221 Mar 5,2017 08:08 PM Mar 7,2017 11:03 PM Angular 5
loading
Tags: ejGrid
Zack
Asked On March 5, 2017 08:08 PM

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 [Syncfusion]
Replied On March 6, 2017 04:26 AM

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.  
 
 
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. 
 
 
Regards,  
Seeni Sakthi Kumar S. 


Zack
Replied On March 7, 2017 09:30 AM

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 = 0i < data.lengthi++){ 
      $("#container" + data[i].id).ejSparkline({ 
        dataSource: this.data[i].priceTrend,
        tooltip: {
          visible: true,
          font: {
              size: "12px",
          }
        },
        type: "line",
        size: { height: 20width: 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
Replied On March 7, 2017 09:33 AM

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

Zack
Replied On March 7, 2017 10:02 AM

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 = 0i < data.lengthi++){ 
      $("#container" + data[i].id).ejSparkline({ 
        dataSource: data[i].priceTrend,
        type: "line",
        size: { height: 20width: 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 [Syncfusion]
Replied On March 7, 2017 11:03 PM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;