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

[Basil Buwalda]

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]

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. 

 

[index.cshtml] 

<div> 

    <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-columns> 

              .   .   . 

            <e-grid-column field="color" headerText="Color Picker" template="#color" edit="@(new {create="create" , write="write", destroy = "destroy" })" width="120"></e-grid-column> 

        </e-grid-columns> 

 

    </ejs-grid> 

</div> 

<script id="color" type="text/x-template"> 

    <div><input id="element" type="color" /></div> 

</script> 

 

<script> 

    // 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 

        }); 

        colorPicker.appendTo(this.elem); 

    } 

    function destroy() { 

        this.colorPicker.destroy(); 

    } 

 

</script> 

 

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. 

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-template 

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

                              https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/render-other-components-in-column/ 

 

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-dotnet-core-518702857  

 

Regards, 

Pavithra S. 

[Basil Buwalda]

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

[Pavithra Subramaniyam]

Hi Basil, 

Thanks for your update. 

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

 

Regards, 

Pavithra S.