Naresh Kumar Naresh Kumar - 1 month ago 6
CSS Question

Set HTML Div Class Name Dynamically from Model

I am trying to change my table row class name dynamically from my model in datatable to highlight the lines with different color based on my status.

My code is working, and class name is being set. But the css style to table row is applied only to odd rows.

I want to apply the css style to all my rows based on my Model - OverAllStatus result. I also checked, that for all rows in my list - Model.InvoiceDetailsList there is over all status. And, for all those overall status results, i have css style.

My HTML - DataTable code:



<table id="tblDashBoardInvoices" class="table table-striped table-bordered" style="max-width: 100%">

<thead>
<tr style="background-color: #222222; color: white; font-size: small; align-content: center">
<th>VPL ID</th>
<th>From</th>
<th>To</th>
<th>Po Number</th>
<th>Po Qty</th>
<th>Invoice Number</th>
<th>Invoice Qty</th>
<th>Invoice Amount</th>
<th>Currency</th>
<th>Invoice Date</th>
<th>Packingslip Number</th>
<th>Payment Term</th>
<th>Invoice File Name</th>
<th>System File Name</th>
<th>Shipment Date</th>
<th>AP ID</th>
<th>AP Status</th>
<th>Traffic ID</th>
<th>Traffic Status</th>
<th>Wear House Status</th>
<th>Overall Status</th>
<th>By</th>
<th>Edit</th>
</tr>

</thead>
<tbody>
@foreach (var row in Model.InvoiceDetailsList)
{
<tr class="@row.OverAllStatus">
<td>@row.VplTransID</td>
<td>@row.SubmittedBy</td>
<td>@row.SubmittedTo</td>
<td>@row.PoNumber</td>
<td>@row.PoQty</td>
<td>@row.InvoiceNumber</td>
<td>@row.InvoiceQty</td>
<td>@row.InvoiceAmount</td>
<td>@row.InvoiceCurrency</td>
<td>@row.InvoiceDate</td>
<td>@row.TrackingId</td>
<td>@row.PaymentTerm</td>
<td>@row.SuppFileName</td>
<td>@row.SysFileName</td>
<td>@row.ShipmentDate</td>
<td>@row.ApTransactionId</td>
<td>@row.ApStatus</td>
<td>@row.TrafficTransactionId</td>
<td>@row.TrafficStatus</td>
<td>@row.WhStatus</td>
<td>@row.OverAllStatus</td>
<td>@row.UserName</td>
<td><a id="btnEdit" href="#" onclick="btnEditClick(@row.KeyId,'@row.VplTransID @row.ApTransactionId @row.TrafficTransactionId')"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a></td>
</tr>
}
</tbody>
</table>





My CSS:



<style>
.Saved {
background-color: #ADD7F2;
}

.InProgress {
background-color: #F1EA55;
}

.Cancelled {
background-color: #F93A07;
}

.Completed {
background-color: #CDEA6A;
}
</style>





Result:

enter image description here

Answer

I think your code is working for all the rows, but another css style definition is overwriting the background color(inspect the element using your browser tools and see which css classes are being applied). So make sure yours overwrite everything else.

You can use !IMPORTANT; to do so.

<style>
    .Saved {
        background-color: #ADD7F2 !IMPORTANT;
    }

    .InProgress {
        background-color: #F1EA55 !IMPORTANT;
    }

    .Cancelled {
        background-color: #F93A07 !IMPORTANT;
    }

    .Completed {
        background-color: #CDEA6A !IMPORTANT; 
    }
</style>
Comments