Bootstrap Group By V2 overrides hidden property of table asp.net core razor

Question

I am using the Bootstrap Group By V2 extension for an asp.net core razor application. Using the hidden property, I am hiding some of the table columns:

                <td hidden="@Model.IsHidden">
                    @Html.DisplayFor(modelItem => item.something)
                </td>

It's working as expected until I start using the Group By extension:

                <table id="table" class="table table-hover" data-group-by="true" data-group-by-field="@Model.GroupByColumnName">
                    <thead></thead>
                </table>

The grouping is working as expected but now all columns are being displayed even if their property is set to hidden. Any suggestions?

Answer 1

Try to use the CSS display property to hidden or show the cell content. Code like this:

            @{
                var showOrhidden = Model.IsHidden ? "none" : "block";
            }
            <td style="display:@showOrhidden"> 
                      @Html.DisplayFor(modelItem => item.something) 
            </td>

Besides, if using display:none, the cell will disappear, it might change the table structure, so, you could add a <div> tag in the td cell:

            @{
                var showOrhidden = Model.IsHidden ? "none" : "block";
            }
            <td> 
                 <div style="display:@showOrhidden">
                      @Html.DisplayFor(modelItem => item.something) 
                 </div>
            </td>