<
style type="text/css">
.myGrid
{
width: 100%;
margin: 0px 0 0px 0;
border: solid 1px #525252;
border-collapse: collapse;
width: 600px;
}
.myGrid td
{
padding: 2px;
border: solid 1px #c1c1c1;
color: Black;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.9em;
width: 40px;
}
.myGrid th
{
color: #fff;
background: url(images/grid_header.png) repeat-x top;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.9em;
}
.conditionalRowColor
{
font-weight: bold;
background-color: Teal;
}
</style>
Step 4: Add below javascript in the aspx page. The javascript code highlighted as bold will change the color based on the condition provided.
<script language="javascript" type="text/javascript">
$(document).ready(function() {
function renderTable(result) {
var dtData = [];
$.each(result, function() {
dtData.push([
this.by,
this.Recipiename,
this.preparationtime,
this.cookingtime
]);
});
$('#grid').dataTable({ //grid is the id of the table
'aaData': dtData,
'bPaginate': false,
'bInfo': false,
'bFilter': false,
'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (aData[2] == "40 Mins") {
$('td:eq(0)', nRow).addClass('conditionalRowColor');
$('td:eq(1)', nRow).addClass('conditionalRowColor');
$('td:eq(2)', nRow).addClass('conditionalRowColor');
$('td:eq(3)', nRow).addClass('conditionalRowColor');
}
return nRow;
}
});
}
$.ajax({
type: "POST",
url: "jQueryDataTableConditionalRowColor.aspx/GetRecipie",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
renderTable(response.d);
},
failure: function(errMsg) {
$('#errorMessage').text(errMsg); //errorMessage is id of the div
}
});
});
</
script>
Step 5: Add a public static webmethod with name GetRecipie to fetch data from database which will be invoked by ajax call.
[WebMethod]
public static List<Recipie> GetRecipie()
{
string strQuery = "SELECT TOP 10 * FROM Recipie";
DataTable dtRecipie = null;
Recipie objRecipie;
string m_conString = CryptographyHelper.Decrypt(ConfigurationSettings.AppSettings["DBConnectionString"]);
SqlConnection con = GetConnection(m_conString);
using (con)
{
con.Open();
using (SqlDataAdapter sqlAdapter = new SqlDataAdapter(strQuery, con))
{
dtRecipie = new DataTable();
sqlAdapter.Fill(dtRecipie);
}
}
List<Recipie> drlist = new List<Recipie>();
foreach (DataRow row in dtRecipie.Rows)
{
objRecipie = new Recipie();
objRecipie.by = row["by"].ToString();
objRecipie.Recipiename = row["Recipiename"].ToString();
objRecipie.preparationtime = row["preparationtime"].ToString();
objRecipie.cookingtime = row["cookingtime"].ToString();
drlist.Add(objRecipie);
}
return drlist;
}
private static SqlConnection GetConnection(string m_conString)
{
SqlConnection con = new SqlConnection(m_conString);
return con;
}