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

[TaeWook Kang]

Hi,

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

Regards.

[Nithya Sivaprakasam]

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.

[TaeWook Kang]

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.

[Rajapandiyan Settu]

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.