Why the Gridview backgroundcolor property not retaining on clicking link button in template field

Question

I have GridView on an ASP .NET Web Form. This GridView is bound to an SQLDataSource. All columns are TemplateField. The GridView is inside an UpdatePanel. One of the Columns is DropDownList. The HTML for this DropDownList is as follows:

<asp:DropDownList ID="DropDownList1" onchange="buildDropDown(this)" runat="server" Text='<%# Bind("[r_cal_M]") %>'>
    <asp:ListItem></asp:ListItem>
    <asp:ListItem>2016-09</asp:ListItem>
    <asp:ListItem>2016-10</asp:ListItem>
    <asp:ListItem>2016-11</asp:ListItem>
    <asp:ListItem>2016-12</asp:ListItem>
</asp:DropDownList>

The JavaScript for buildDropDown() Function is:

    function buildDropDown(obj) {
    var status = obj.options[obj.selectedIndex].value;
    var row = obj.parentNode.parentNode;
    var rowIndex = row.rowIndex - 1;

    var ddlReason = row.cells[1].getElementsByTagName('SELECT')[0];

    switch (status) {
        case "":
            row.style.backgroundColor = "rgb(255, 255, 255)";
            row.style.color = "rgb(0, 0, 0)";
            break;
        case "2016-09":
            row.style.backgroundColor = "rgb(198, 239, 206)";
            row.style.color = "rgb(0, 97, 0)";
            break;
        case "2016-10":
            row.style.backgroundColor = "rgb(1255, 199, 206)";
            row.style.color = "rgb(156, 0, 6)";
            break;
        case "2016-11":
            row.style.backgroundColor = "rgb(255, 235, 156)";
            row.style.color = "rgb(156, 101, 0)";
            break;
        case "2016-12":
            row.style.backgroundColor = "rgb(255, 255, 255)";
            row.style.color = "rgb(0, 0, 0)";
            break;
    }
}

The application is working fine but when I click the update button in the GridView the color of the row changes back to original.

How can I fix this?

Answer 1

try this working fine

<script type="text/javascript">
         function buildDropDown(obj) {

    var status = obj.options[obj.selectedIndex].value;
    var row = obj.parentNode.parentNode;
    var rowIndex = row.rowIndex - 1;

    switch (status) {
        case "":
            row.parentNode.parentNode.style.backgroundColor = "rgb(255, 255, 255)";
            row.parentNode.parentNode.style.color = "rgb(0, 0, 0)";
            break;
        case "2016-09":
            row.parentNode.parentNode.style.backgroundColor = "rgb(198, 239, 206)";
            row.parentNode.parentNode.style.color = "rgb(0, 97, 0)"
            break;
        case "2016-10":
            row.parentNode.parentNode.style.backgroundColor = "rgb(1255, 199, 206)";
            row.parentNode.parentNode.style.color = "rgb(156, 0, 6)";
            break;
        case "2016-11":
            row.parentNode.parentNode.style.backgroundColor = "rgb(255, 235, 156)";
            row.parentNode.parentNode.style.color = "rgb(156, 101, 0)";
            break;
        case "2016-12":
            row.parentNode.parentNode.style.backgroundColor = "rgb(255, 255, 255)";
            row.parentNode.parentNode.style.color = "rgb(0, 0, 0)";
            break;
    }
   }
 </script>