How to render the color picker component on React Grid

[Walter Konnerth]

Hi,

I have a grid and I would like to add the ColorPicker component to each row.

How could I do this?

Thanks,

[Vignesh Sivagnanam]

Hi Walter  

Greetings from Syncfusion support 

Based on your query you want to render the color picker component on each row of the grid. You can achieve your requirement using the EJ2 Grid column template feature to render the custom component in the column. 

Please refer the below code example and sample for your reference, 

Sample : https://stackblitz.com/edit/react-gh9mz1?file=index.js 

gridTemplate(props) { 

    return ( 

      <div className="colorpicker"> 

        <ColorPickerComponent id="color-picker" /> 

      </div> 

    ); 

  } 

…………………………………………………………. 

<GridComponent dataSource={employeeData} width="auto" height="359"> 

            <ColumnsDirective> 

              <ColumnDirective 

                headerText=" Color Picker " 

                width="180" 

                template={this.template} 

                textAlign="Center" 

              /> 

……………………………………………………. 

            </ColumnsDirective> 

          </GridComponent> 

Documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/#column-template 

Regards 

Vignesh Sivagnanam