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
close icon

I want to change the color of the cell when it is "Edit Mode".

Hi,


I want to change the color that comes out green next time it's "Edit Mode".



Regards.


3 Replies

NS Nithya Sivaprakasam Syncfusion Team November 1, 2022 03:58 PM UTC

Hi TaeWook,


Greetings from Syncfusion Support.


Based on your query, we suspect that you want to change the color of the cell when it is in edit mode. We recommend you to use the following code to achieve your requirement by using CSS.


Sample code:


 <style>

      .e-grid td.e-updatedtd {

        background-color: skyblue;

        color: black;

      }

    </style>


Screenshot:



If this post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.


Regards,

Nithya Sivaprakasam.



TK TaeWook Kang November 7, 2022 05:48 AM UTC

Thank you for your good reply.


I'd like to ask you an additional question.


You can change the color of the row in 'Edit Mode' by modifying it in <style>, but I want to change the coloring depending on the value selected in a specific cell Is there a way?

Regards.



RS Rajapandiyan Settu Syncfusion Team November 10, 2022 12:54 PM UTC

Hi Taewook,


You can change the background color of updated td by looping the respective elements and applying inline style to it. We have achieved this by using dropdown’s change, cellSaved, actionComplete and batchCancel events. Find the below code and sample for your reference.


Dropdown change: https://ej2.syncfusion.com/javascript/documentation/api/drop-down-list#change

cellSaved: https://ej2.syncfusion.com/javascript/documentation/api/grid/#cellsaved
actionComplete: https://ej2.syncfusion.com/javascript/documentation/api/grid/#actioncomplete
batchCancel: https://ej2.syncfusion.com/javascript/documentation/api/grid/#batchcancel

 

[index.cshtml]

// bind the change event to the dropdown
@{

    var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { Change = "ddChange" };

}

 

 

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="273" toolbar="@(new List<string>() { "Add", "Delete","Update","Cancel" })" cellSaved="cellSaved" batchCancel="batchCancel" actionComplete="actionComplete">

  <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings>

  <e-grid-columns>

    ----

    <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" edit="new {@params = DropDownList }" width="150"></e-grid-column>

  </e-grid-columns>

</ejs-grid>

 

<script>

    var customColor = ''; // maintains the custom color

    function ddChange(args) {

        // bind the custom color based on the dropdown selected value

        switch (args.value) {

            case 'France':

               customColor = 'aqua';

               break;

            case 'Germany':

               customColor = 'chartreuse';

               break;

            case 'Denmark':

               customColor = 'bisque';

               break;

            case 'Switzerland':

               customColor = 'cornflowerblue';

               break;

            case 'Austria':

               customColor = 'lightcoral';

               break;

            default:

               customColor = 'mediumpurple';

        }

        changeBackground();

    }

    function cellSaved(args) {

        changeBackground();

    }

    // customize the background color of updated td

    function changeBackground() {

        if (customColor) {

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

            // get the batch edited cells using its class name

            var batchEditedCells = gridObj.element.querySelectorAll('.e-updatedtd');

            // loop the cells and apply inline style

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

                batchEditedCells[i].style.backgroundColor = customColor;

            }

        }

    }

    function actionComplete(args) {

        if (args.requestType == 'batchsave' || args.requestType == 'batchcancel') {

            customColor = ''; // empty the value after save action

        }

    }

    function batchCancel(args) {

        customColor = ''// empty the value after cancel action

    }

</script>

 


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_grid_batch_changeColor1139766085.zip


Regards,

Rajapandiyan S
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Loader.
Live Chat Icon For mobile
Up arrow icon