How To Pass Gridview Ids And Other Controls Into Jquery Functions?

I am learning a lot more about jQuery and Javascript, and I am loving it! The power you have over a webform, control, etc with this language beats client-server methodologies hands

Solution 1:

First of all, since you're starting with Javascript / jQuery, I'll give you some suggestions:

• Always pay attention to the ASP.NET's generated HTML code
• Since you will be manipulating the Nodes, HTMLElements, etc, it's important to understand them
• If you're not sure how to find a node, take a time to learn the CSSselectors
• Study pure/vanilla Javascript before going to jQuery. It's always good to know what you're doing
• Take a look at the style guides. Functions, for example, should be named camelCased.

---

I've changed your functions to be generic, independent on the parent GridView.

The fully commented code is below. If you have any questions, please, leave a comment!

functiongridViewCheckAll(chk) {
  // parentNode of the chk is the td// parentNode of the td is the tr// parentNode of the tr is the tbody// children of the tbody is the trsvar cell = chk.parentNode,
      row = cell.parentNode,
      tbody = row.parentNode,
      rows = tbody.children;

  // querySelectorAll to get all the td tags children of tr// and indexOf to get what is the index of the chk's td// note that I'm using the indexOf Array's method// I'm doing that since the property children is not an Arrayvar index = [].indexOf.call(row.children, cell);

  // loop through the rowsfor (var i = 1; i < rows.length; i++) {
    // gets the current row, and gets the cell with the same index of the chk's cell// then, finds all the checkboxes inside itvar checkBoxes = rows[i].children[index].querySelectorAll('input[type=checkbox]');

    // loops through the checkboxes and check/highlight themfor (var j = 0; j < checkBoxes.length; j++) {
      checkBoxes[j].checked = chk.checked;
      highlightRow(checkBoxes[j]);
    }
  }
}

Instead of manually changing the row colors, you could be using CSS classes, and better than that, you could be using the tr:nth-of-type(even) and tr:nth-of-type(odd) for that.

Your HighLightRow function could be rewrited as below:

function highlightRow(chk) {
  var row = chk.parentNode.parentNode;
  if (chk.checked)
    row.classList.add('selected-row');
  else
    row.classList.remove('selected-row');
}

Then, you should have a CSS like this:

table.grid-view > tbody > tr {
  background-color: white;
}

table.grid-view > tbody > tr:nth-of-type(odd) {
  background-color: #EEE;
}

table.grid-view > tbody > tr.selected-row {
  background-color: yellow;
}

And you would need to put a CssClass attribute into your GridView:

<asp:GridViewID="gvStudents"runat="server"CssClass="grid-view" (...)>

And remove the AlternatingRowStyle and RowStyle, since they place a style attribute each row:

<AlternatingRowStyleBackColor="#EEEEEE" /><RowStyleBackColor="White" />

I've created a plunker for you, so you can play with the code above.