Solved

DataTable: Change the class for a column conditionally

Posted on 2016-09-13
5
59 Views
Last Modified: 2016-09-19
I have a Datatable with the following column:

{ title: "Status", data: "StatusName", class: "centered-text" }


I need to change the font color conditionally.  I created classes for each condition.  How could I change the class based on the data?  

Thank You,
Crystal
0
Comment
Question by:Crystal Rouse
  • 3
  • 2
5 Comments
 
LVL 42

Accepted Solution

by:
zephyr_hex earned 500 total points
ID: 41796317
By DataTable, I assume you mean in C# ?

One way to do this would be to select the rows in the DataTable that meet you condition, and modify the class.

//find the rows that meet your condition
DataRow[] rows = myDataTable.Select("title Like 'A%'");

//loop over those rows and add a new class
//note:  myDataTable is updated by this as well
for(int i = 0; i < rows.Length; i ++)
{
      rows[i]["class"] = rows[i]["class"] + " myNewClass";
}

Open in new window

0
 

Author Comment

by:Crystal Rouse
ID: 41796343
I'm using JavaScript and C#.  Trying to create a function to change the class based on the data.
0
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 41796376
ok, the code I gave you above is C#

If you want to change the class in JavaScript, then you actually would be modifying an HTML table (client side structure) and not a DataTable (server side stucture) because JavaScript is a client side language.
0
 

Author Comment

by:Crystal Rouse
ID: 41797899
I need to write a JavaScript function that I can call when the page loads to change the font of a column based on the data.  I can figure out most of this, just don't know how to find the column. I can get the entire table's class to change, just not the individual column.
0
 
LVL 42

Assisted Solution

by:zephyr_hex
zephyr_hex earned 500 total points
ID: 41798131
Here is a Fiddle Demo.

Given the following HTML:

<table id="myTable">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e</td>
      <td>f</td>
    </tr>
    <tr>
      <td>g</td>
      <td>h</td>
      <td>i</td>
    </tr>
  </tbody>
</table>
<input type="text" id="myTxt" placeholder="input column number">
<input type="button" id="myBtn" value="Do It">
<span id="mySpan"></span>

Open in new window


CSS:
.red {
  background-color: red;
}

Open in new window


You can access the column values and modify the CSS from jQuery:
$('#myBtn').click(function() {
  $("#mySpan").text("");
  $("#myDiv").remove();
  var colNum = $("#myTxt").val();
  if ($("#myTxt") === "") return;

  var col = $('#myTable tr > td:nth-child(' + colNum + '), table tr > th:nth-child(' + colNum + ')');

  col.addClass("red");
  $("#mySpan").before("<div id='myDiv'>Values from column:</div>");
  var span = "";
  col.each(function() {
    span = span + $(this).text() + " ";

  });
  $("#mySpan").text(span);
});

Open in new window

0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Extention Methods in C# 3.0 by Ivo Stoykov C# 3.0 offers extension methods. They allow extending existing classes without changing the class's source code or relying on inheritance. These are static methods invoked as instance method. This…
This article is for Object-Oriented Programming (OOP) beginners. An Interface contains declarations of events, indexers, methods and/or properties. Any class which implements the Interface should provide the concrete implementation for each Inter…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now