Drop-down list in the grid. Selected option coloring problem.

[TaeWook Kang]

I created a dropdown list in a customized grid. When the dropdown list option was selected, an onchange event was used to change the color. Unfortunately, the event is not running.

What should I do to change the color of the option on the dropdown list?

Code:

xxx.cshtml

 <div class="col-md-9">

            <ejs-grid id="DropDown" dataSource="ViewBag.dataSource" toolbar="@(new List<string>(){"Add", "Delete", "Update", "Cancel"})" allowPaging="true" cellSelected="cellSeleted" queryCellInfo="templatedropdown">

                <e-grid-selectionsettings mode="Cell" type="Single" cellSelectionMode="BoxWithBorder"></e-grid-selectionsettings>

                <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

                <e-grid-columns>

                    <e-grid-column field="ProjectNo" headerText="Project No" textAlign="Right" width="120"></e-grid-column>

                    <e-grid-column field="ProjectName" headerText="Project Name" width="150" editType="dropdownedit"></e-grid-column>

                    <e-grid-column field="LaunchingDate" headerText="Date" validationRules="@(new { required=true})" textAlign="Right" editType="datepickeredit" width="120"></e-grid-column>

                    <e-grid-column field="Revision" headerText="Revision" width="170"></e-grid-column>

                    <e-grid-column headerText="Dropdown" width="200" template="#dropdown"></e-grid-column>

                </e-grid-columns>

            </ejs-grid>

        </div>

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

 <div id="dropdown">

<select id="list" class="e-control e-dropdownlist" name="list" onchange="columnDropdown(this)">

            <option value="OPEN" selected="selected">OPEN</option>

            <option value="RECHECK">RECHECK</option>

            <option value="COMPLETE">COMPLETE</option>

        </select>

    <div id="dropdown">

</div>

</script>

<script>

        function columnDropdown(e) {

            var selectList = document.getElementById("list")

            if (selectList.options[selectList.selectedIndex].value == "OPEN") {

                selectList.style.backgroundColor = '#CD5C5C';

                selectList.style.webkitTextFillColor = '#7ECC49';

            } if (selectList.options[selectList.selectedIndex].value == "RECHECK") {

                selectList.style.backgroundColor = '#7ECC49';

            } if (selectList.options[selectList.selectedIndex].value == "COMPLETE") {

                selectList.style.backgroundColor = '#DC143C'

            }

        }

</script>

[Ajith Govarthan]

Hi TaeWook Kang, 

Thanks for contacting Syncfusion support. 

Based on your query, you are facing issue in using the onchange event of dropdown with column template in your Grid application. So, we have checked your attached code example and found that you have used same id for all the dropdown components in the column template. 

So, we have used the unique dropdown id using the row data in the column template to access the onchange event for all the dropdown components. For your convenience, we have attached the code example, please refer them for your reference. 

Code example: 

Index.cshtml 

<ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })"> 

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

 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" validationRules="@(new { required= true })" width="120"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

        <e-grid-column headerText="Dropdown" width="200" template="#dropdown"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

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

 

    <div id="dropdown"> 

 

        <select id="${OrderID}" class="e-control e-dropdownlist" name="list" onchange="columnDropdown(this)"> // use any unique column data for dropdown id 

 

            <option value="OPEN" selected="selected">OPEN</option> 

 

            <option value="RECHECK">RECHECK</option> 

 

            <option value="COMPLETE">COMPLETE</option> 

 

        </select> 

        <div id="dropdown"> 

 

        </div> 

 

</script> 

 

 

 

<script> 

 

    function columnDropdown(e) { 

 

        if (e.selectedOptions[0].value == "OPEN") { 

 

            e.style.backgroundColor = '#CD5C5C'; 

 

            e.style.webkitTextFillColor = '#7ECC49'; 

 

        } if (e.selectedOptions[0].value == "RECHECK") { 

 

            e.style.backgroundColor = '#7ECC49'; 

 

        } if (e.selectedOptions[0].value == "COMPLETE") { 

 

            e.style.backgroundColor = '#DC143C' 

 

        } 

 

    } 

 

</script> 

 

Please get back to us if you need further information  

Regards, 

Ajith G.