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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





145231 Jun 13,2019 12:33 AM UTC Jun 13,2019 10:45 AM UTC ASP.NET Core - EJ 2 3
Tags: DataGrid
Basil Buwalda
Asked On June 13, 2019 01:13 AM UTC

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, 

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 

Basil Buwalda
Replied On June 13, 2019 09:57 AM UTC

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

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon