Make a tr line before other tr lines for grouping purpose.

hkhoanguyen

Hi, I'm working on Datatable and I would like to add tr for each group of tr, like doing the title of grouping
I ended up coding like this:

            <tbody>

                @foreach (var item1 in data1.DataItem)
                {
                    <tr>
                        <td>@item1.GroupingName</td>
                    </tr>
                    foreach (var item2 in data2.DataItem)
                    {
                        <tr>
                              <td>1</td>
                              <td>2</td>
                              <td>3</td>
                              <td>4</td>
                              <td>5</td>
                              <td>6</td>
                              <td>7</td>
                              <td>8</td>
                        </tr>
                      }
                 }
                </tbody>

But I have the error of Cannot set property '_DT_CellIndex' of undefined, I believe that the first loop of <tr> doesn't have the same tds as in the second loop.

As in the second loop the td may be different because I load them dynamically so there is no way I can predict there will be how many td in the second loop in order to predefine in the first loop.

Could you sugguest me some ideas about my case please ?

Thanks a lot.

Tom (DataTables)

Currently Datatables doesn't provide anyway to parse Colspan or Rowspan which would be required to operate grouping in this way.

If you change the structure of your above html you can use the same method provided in this example.

This requires the grouping information to be inside each row to allow the group calculation to be performed. The end result is exactly what you are looking for but the construct is different. This is how you can do that with your code example above.

<tbody>
 
    @foreach (var item1 in data1.DataItem)
    {
        foreach (var item2 in data2.DataItem)
        {
            <tr>
                  <td>@item1.GroupingName</td>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                  <td>5</td>
                  <td>6</td>
                  <td>7</td>
                  <td>8</td>
            </tr>
          }
     }
 </tbody>

Thanks

Tom