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. Image for the cookie policy date

Is it possible to implement a color picker in a grid like the one in the demo https://ej2.syncfusion.com/aspnetcore/Grid/GridOverview#/material

And if it is, what is the best way to implement it....
 for example if there was a field called color in the grid https://ej2.syncfusion.com/aspnetcore/Grid/GridOverview#/material
...And in the grid, we want to display the color value in the cell.
...And when we click on the record the field colour is linked to a colorpicker.

other questions 
Should we have no filtering on the column when we only display the column? 
What edittype and type be of the e-grid-column, 

3 Replies

PS Pavithra Subramaniyam Syncfusion Team June 13, 2019 09:47 AM UTC

Hi Basil, 
Thanks for contacting Syncfusion support. 
From your query we suspect that you wan to render color picker for a column while editing . If yes you can achieve your requirement by using the edit template feature of Grid component which uses the “create”, ”read”, ”write” and ”destroy” methods to render custom components. You can also render the colorPicker in the Grid column by using the column template feature.  Please refer to the below code example , documentation link and sample link for more information. 
    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" queryCellInfo="colorPicker" allowSorting="true" allowGrouping="true" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Cancel", "Update"})"> 
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 
              .   .   . 
            <e-grid-column field="color" headerText="Color Picker" template="#color" edit="@(new {create="create" , write="write", destroy = "destroy" })" width="120"></e-grid-column> 
<script id="color" type="text/x-template"> 
    <div><input id="element" type="color" /></div> 
    // for creating ColorPicker in Grid column 
    function colorPicker(args) { 
        if (args.column.field == "color") { 
            var colorPicker = new ej.inputs.ColorPicker({ 
                mode: 'Palette', 
                disabled :true, 
                value: args.data[color] 
            }, args.cell.querySelector("#element")); 
       // for rendering the colorPicker in the edit form  
    var elem; 
    var colorPicker; 
    function create() { 
        elem = document.createElement('input'); 
        elem.id = "element" 
        return elem;  // create colorpicker element 
    function write(args) { 
        colorPicker = new ej.inputs.ColorPicker({ 
            mode: 'Palette', 
           value : args.rowData.color 
    function destroy() { 
You can filter the template column in which the filtering will be done based on the “field” value provided for the that column. And we don’t have any editType for the colorPicker component. You can achieve this by using the cell edit template feature as described above. 
Pavithra S. 

BB Basil Buwalda June 13, 2019 09:57 AM UTC

Fantastic I will give it a go tomorrow, thanks for your super quick response. 

PS Pavithra Subramaniyam Syncfusion Team June 13, 2019 10:45 AM UTC

Hi Basil, 

Thanks for your update. 

Please get back to us if you need any further assistance on this. 
Pavithra S. 

Live Chat Icon For mobile
Up arrow icon