CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-grid
user1907849
user1907849

Reputation: 990

Getting the header name of a checkbox in a row

I have a checkbox in a grid , I need to find the header name of that particular element on click of a button which is outside the grid.

I have the grid structure as follows:

<thead class="k-grid-header">
  <tr role="row">
    <th scope="col" class="k-header">Type</th>
    <th scope="col" class="k-header" colspan="2">Building</th>
    <th scope="col" class="k-header" colspan="3">Manufacture</th>
    <th scope="col" class="k-header" colspan="3">Building2</th>
    <th scope="col" class="k-header" colspan="3">Manufacture2</th>
  </tr>
</thead>
<tbody role="group">
  <tr>
     <td>
       <input type="checkbox" class="Tags" >
     </td>
     ... other td tags without checkbox
  </tr>
</tbody>

In my javascript file I get the object on click of the button as :

var objectCheckBox= $("input[class=Tags]:checked");

Now objectCheckBox will contain the checked element . I need to find the header name for this particular column , I tried the following but not arriving at the solution:

objectCheckBox[i].parentNode.parentNode.children[1].innerText .

How to get the header name in jquery or javascript?

Upvotes: 0

Views: 248

Answers (1)

guradio
guradio

Reputation: 15555

  1. Using index of the parent TD of the checked checkbox.
  2. Use it to select the th and get the text

var ind = $("input[class=Tags]:checked").parent('td').index();
console.log(ind)
console.log($('.k-header').eq(ind).text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead class="k-grid-header">
  <tr role="row">
    <th scope="col" class="k-header">Type</th>
    <th scope="col" class="k-header" colspan="2">Building</th>
    <th scope="col" class="k-header" colspan="3">Manufacture</th>
    <th scope="col" class="k-header" colspan="3">Building2</th>
    <th scope="col" class="k-header" colspan="3">Manufacture2</th>
  </tr>
</thead>
<tbody role="group">
  <tr>
    <td>
      <input type="checkbox" class="Tags" checked />
    </td>

  </tr>
</tbody>
</table>

Upvotes: 2

Related Questions