This is a migrated thread and some comments may be shown as answers.

[Solved] Grouping not adding the group row

2 Answers 156 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Josh Anderson asked on 30 Jun 2011, 09:23 PM

Grouped.PNG

Not-grouped.PNG

I'm using the Grid component to render a groupable grid populated via ajax. The grid renders fine, sorting and paging works, ajax refresh works, but when I try to do grouping, the rendering gets all screwed up. Attached are screen caps of the grid pre- and post-grouping.

The grid definition is pretty straight-forward:

<div id="tabAccounts" class="tab_content">

@(Html.Telerik().Grid<SharedSimpleAccountListViewModel>()

.Name("AcctGrid")

.Columns(columns =>

{

columns.Bound(x => x.Number)

.HeaderHtmlAttributes(new { @style = "text-align: center;" })

.HtmlAttributes(new { @style = "text-align: center;" });

columns.Bound(x => x.ProviderOrganizationFriendlyName)

.Title("Provider");

columns.Bound(x => x.Name)

.Title("Account Name");

columns.Bound(x => x.BillingLocationName)

.Title("Location");

})

.Groupable()

.DataBinding(db => db.Ajax().Select("CustomerAccounts", "Customers", new { id = Model.Id }))

.Pageable(pager => pager.PageSize(50))

.Sortable()

)

</div>

The controller action is also straight-forward (I won't paste since it's just a retrieval from the repository).

Inspecting the HTML after the grouping, it appears that it's not adding the table row element for the group. Here's the HTML that exists after a grouping attempt:

<table cellspacing="0">

<colgroup>

<col class="t-group-col"><col><col><col><col>

</colgroup>

<thead class="t-grid-header">

<tr>

<th class="t-group-cell t-header"> </th>

<th style="text-align: center;" scope="col" class="t-header">

<a href="/Customers/Details/408?AcctGrid-orderBy=Number-asc" class="t-link">Number</a>

</th>

<th scope="col" class="t-header">

<a href="/Customers/Details/408?AcctGrid-orderBy=ProviderOrganizationFriendlyName-asc" class="t-link">Provider</a>

</th>

<th scope="col" class="t-header">

<a href="/Customers/Details/408?AcctGrid-orderBy=Name-asc" class="t-link">Account Name</a>

</th>

<th scope="col" class="t-header t-last-header">

<a href="/Customers/Details/408?AcctGrid-orderBy=BillingLocationName-asc" class="t-link">Location</a>

</th>

</tr>

</thead>

<tbody>

<tr>

<td style="text-align: center;">00002</td>

<td>Qwest Communications</td>

<td>Test account 2 </td>

<td class="t-last">Location 2</td>

</tr>

<tr class="t-alt">

<td style="text-align: center;">00001</td>

<td>Qwest Communications</td>

<td>Test account 1</td>

<td class="t-last">Location 1</td>

</tr>

</tbody>

</table>

[Solved] Grouping not adding the group row

2 Answers, 1 is accepted