How to render a chart inside grid column

[Alvaro]

Hello,

I'm trying to add a bar chart into grid column for all rows

I got this grid

var grid = new ej.grids.Grid({

            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog', showDeleteConfirmDialog: true },

            toolbar: ['Add', 'Edit', 'Delete'],

            columns: [

                { field: 'Id', headerText: 'Id', width: 80, visible: false, isPrimaryKey: true },
                { field: 'Name', headerText: 'Item', width: 120, validationRules: { required: true } },

                { field: 'MinValue', headerText: 'Min Value, width: 120 },

                { field: 'MaxValue', headerText: 'Max Value', width: 120 }

            ]

        });

        grid.appendTo('#grid');

I need to draw [Name] in column_1 and [Bar Chart] in column_2 with MinValue and MaxValue, something like this

It does not need to be exactly the same as the image, but as similar as possible, im using ES5 btw

[Rajapandiyan Settu]

Hi Alvaro, 

 

Greetings from Syncfusion support. 

 

Query: I'm trying to add a bar chart into grid column for all rows 

 

Please refer the below demo sample which illustrates how to render the chart control in EJ2 grid. 

 

Demo: https://ej2.syncfusion.com/javascript/demos/#/material/sparkline/spark-grid.html  

Sample: https://stackblitz.com/edit/hjbj2y?file=index.js  

In the demo sample, the columnTemplate feature is used to render the char control in the column. By using columnTemplate feature, we have initialized the element in the cell. Then we rendered the chart controls to that element in the created event of Grid. 

columnTemplate: https://ej2.syncfusion.com/javascript/documentation/grid/columns/#column-template  

created: https://ej2.syncfusion.com/javascript/documentation/api/grid#created  

Note: If grid data action like Paging, Filtering, Searching, etc., enabled in the Grid then render the chart control in dataBound event of grid instead of created event.  

dataBound: https://ej2.syncfusion.com/javascript/documentation/api/grid#databound  

sample: https://stackblitz.com/edit/oijtdb-uhq6r1?file=index.js 

Please get back to us if you need further assistance with this. 

 

Regards,   

Rajapandiyan S