Highlight Cells That Are Editable

[Jorge Orellana]

I have created a grid where some but not all cell values can be edited (batch mode) and received some feedback from my users that it is not very intuitive to know which cells one is able to to edit unless you double click on a cell grid and you can begin to edit. 

I am looking for a way to highlight a cell be it by adding a border, or adding an icon with a pencil when I hover over the column/cells that I can edit. I haven't been able to find any documentation/examples on this, maybe i'm just not looking in the right places or maybe it's just no doable?

Thanks

[Joseph Christ Nithin Issack]

Hi Jorge, 

  Greetings from Syncfusion support. 

  Based on your query, you want to highlight the cells of the columns which are editable. Your requirement can be achieved by customizing the grid cells by adding a css class to the `customAttributes` property of the  column in the `created` event of the EJ2 Grid. 

Please refer the below code example. 

 

 

<style> 

    .highlight-editable-cells{ 

        background: yellow; 

    } 

</style> 

 

<script> 

 

    function created() { 

        var grid = document.getElementById('Grid').ej2_instances[0]; 

        var columns = grid.getColumns(); 

        for(var i = 0; i < columns.length; i++) { 

            if(!columns[i].isPrimaryKey && columns[i].allowEditing) { 

                columns[i].customAttributes = { class: "highlight-editable-cells"} 

            } 

        } 

    } 

     

</script> 

Please get back to us for further details. 

Regards, 

Joseph I.