Conditional statement using clock & datagrid

[crh313]

Hi all,

I fairly new to asp.net, and I need some help with writing a conditional statement to change a background row color of a data-table based on a JavaScript clock I have running on the webpage.

There is a particular column on my Datagrid called scheduled time, where I want that column to listen to the clock that I have defined on the webpage. The Datagrid table rows should change background colors based on the "scheduledTime" compared to the clock. There is a xlsx attached for a visual reference.

// Clock variables
 
  var currentTime = new Date ( );
 
  var currentHours = currentTime.getHours ( );
  var currentMinutes = currentTime.getMinutes ( );
  var currentSeconds = currentTime.getSeconds ( );

Thank you all for taking the time!

[Frinavale]

A DataGrid is rendered as an HTML <table> and it is given an ID which is automatically generated by ASP.NET to ensure that all HTML elements in the page have a unique ID (ensuring that the HTML is valid).

You can retrieve the HTML ID that is generated for the ASP.NET control using the ClientID property.

Check out this insight about How to use JavaScript in ASP.NET to get started. If you don't want to generate your JavaScript in your C# or VB.NET code behind, you could also use ASP shorthand to write the ClientID directly into the page like this:

<script type="text/javascript">
  function changeColumnColor(){
    var dataGridTable = document.getElementById("<%=myDataGrid.ClientID%>");
    //.....
  }
</script>

You can use the JavaScript getElementByID(id) method to retrieve the table in your JavaScript function that will set the column's color after a given time (using the settimeout(function) method).

Once you have a reference to the table, you can use the getElementsByTagName() method to retrieve all of the table rows (<tr>s).

Loop through all of the <tr>s and within that loop use the getElementByTagName method to retrieve all of the <td>s for the row... loop through these to retrieve the column you are looking for and set the style for the element to the desired style.

-Frinny