Grid expand collapse

by ravimallya

HTML

<table role="grid">
  <colgroup>
    <col style="width:18em">
      <col style="width:3.5em">
        <col style="width:3.5em">
          <col style="width:3.5em">
            <col style="width:3.5em">
              <col style="width:.15em">
                <col style="width:3.5em">
                  <col style="width:3.5em">
                    <col style="width:3.5em">
                      <col style="width:3.5em">
                        <col style="width:.15em">
                          <col style="width:3.5em">
                            <col style="width:3.5em">
                              <col style="width:3.5em">
                                <col style="width:3.5em">
                                  <col style="width:.15em">
                                    <col style="width:3.5em">
                                      <col style="width:3.5em">
                                        <col style="width:3.5em">
                                          <col style="width:.15em">
                                            <col style="width:11.5em">
  </colgroup>
  <tbody role="rowgroup">

    <tr class="gr-None gr-Bold  if (data.CrtdUser == 'System') { }     gr-Row  gr-dataRow-currency  ng-scope" data-uid="ec5f3752-2db0-4f3f-ae8b-21e27de6dee0">
      <td>HEADCOUNT</td>

      <td class="gr-right gr-currency">6</td>
      <td class="gr-right gr-currency">6</td>
      <td class="gr-right gr-currency">6</td>
      <td class="gr-right gr-percent">600.0 %</td>
      <td class="gr-blank"></td>

      <td class="gr-right gr-currency">6</td>
      <td class="gr-right gr-currency">6</td>
      <td class="gr-right gr-currency">0</td>
      <td class="gr-right gr-percent">0.0 %</td>


      <td class="gr-blank"></td>

      <!--<td class="gr-center ">null</td>-->
      <td class="gr-right gr-currency">6</td>
      <td class="gr-right gr-currency">6</td>
      <td class="gr-right gr-currency">0</td>
      <td class="gr-right gr-percent">0.0 %</td>



     ...

CSS

.k-grid-header table,
.k-grid-content table,
.k-grid-footer table,
.k-grid-content-locked>table {
  table-layout: fixed
}

.k-grid-lockedcolumns {
  white-space: nowrap
}

.k-grid-content-locked,
.k-grid-content,
.k-pager-wrap {
  white-space: normal
}

.k-grid-header-locked,
.k-grid-content-locked,
.k-grid-footer-locked {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  position: relative;
  border-style: solid;
  border-width: 0 1px 0 0
}

.k-grid-header-locked+.k-grid-header-wrap,
.k-grid-content-locked+.k-grid-content,
.k-grid-footer-locked+.k-grid-footer-wrap {
  display: inline-block;
  vertical-align: top
}

.k-grid-toolbar {
  border-style: solid;
  border-width: 1px 0 0
}

.k-grid-header th.k-header:first-child,
.k-grid tbody td:first-child,
.k-grid tfoot td:first-child,
.k-filter-row>th:first-child {
  border-left-width: 0
}

.k-grid-header th.k-header.k-first {
  border-left-width: 1px
}

.k-grid-toolbar:first-child,
.k-grouping-header+.k-grid-toolbar {
  border-width: 0 0 1px
}

.k-footer-template td {
  border-style: solid;
  border-width: 1px 0 0 1px
}

.k-group-footer td {
  border-style: solid;
  border-width: 1px 0
}

.k-group-footer .k-group-cell+td {
  border-left-width: 1px
}

.k-grid-footer {
  border-style: solid;
  border-width: 1px 0 0
}

.k-grid-footer td {
  border-top-width: 0
}

.k-grid-footer>td {
  border-top-width: 1px
}

.k-pager-wrap {
  clear: both;
  overflow: hidden;
  position: relative;
  border-style: solid;
  border-width: 1px;
  line-height: 2.0em;
  padding: .333em 0 .333em .250em
}

.k-grid-pager {
  border-width: 1px 0 0
}

.k-grid .k-pager-numbers,
.k-pager-numbers .k-link,
.k-pager-numbers .k-state-selected {
  display: inline-block;
  vertical-align: top;
  margin-right: 1px
}

.k-pager-numbers {
  margin: 0 2px
}

.k-pager-numbers .k-state-selected {
  vertical-align: top
}

.k-pager-numbers .k-current-page {
  display: none
}

.k-pager-numbers li,
.k-pager-input {
  float: left
}

.k-grid...

JavaScript

$(function(){
$('.gr-None.gr-Normal, .gr-Single.gr-Normal').hide();
});



$(document).on('click', '.gr-None.gr-Bold', function() {
  $(this).find('span').text(function(_, value) {
    return value == '+' ? '-' : '+'
  });
  $(this).nextUntil('.gr-None.gr-Bold').slideToggle(100, function() {});
});