[Solved] Grouping applied to Detail View Nested Grid displays garbage images in Group Header row

[Gary]

I have the case where a nested grid in the detail view of the primary grid, I'm getting garbage images in the Header row when I apply the grouping parameter.  Has anyone seen this?  See the attached image.  Here's the code (it's in VB):

Dim gridBuilder As Fluent.GridBuilder(Of ProcessorMetrics.pmt_modules) = Html.Telerik().Grid(Model) _

 .Name("ModulesGrid").Sortable()

 gridBuilder.Columns(Function(cols) cols.Template(Function(f) String.Format("{0}", f.Name)).Title("Module").Width(95).FooterTemplate("<a href='javascript:AddModule();'>Add Module</a>"))

 gridBuilder.Columns(Function(cols) cols.Template(Function(f) String.Format("{0:#,###}", f.TotalAvailCPU)).Title("CPU (uSecs)").HtmlAttributes(New With {.Style = "text-align:right"}))

 gridBuilder.Columns(Function(cols) cols.Template(Function(f) String.Format("{0:#,###}", f.TotalAvailRAM)).Title("RAM (B)"))

 gridBuilder.Columns(Function(cols) cols.Template(Function(f) String.Format("{0:#,###}", f.TotalAvailFLASH)).Title("ROM (B)").HtmlAttributes(New With {.Style = "text-align:right"}))

 gridBuilder.Columns(Function(cols) cols.Template(Function(f) String.Format("{0:#,###}", f.sumTotals("BudgetSysKerCPU"))).Title("CPU (uSecs)").HtmlAttributes(New With {.Style = "text-align:right"}))

 gridBuilder.Columns(Function(cols) cols.Template(Function(f) String.Format("{0:#,###}", f.sumTotals("BudgetSysKerRAM") * f.PageSizeInBytes)).Title("RAM (B)").HtmlAttributes(New With {.Style = "text-align:right"}))

 gridBuilder.Columns(Function(cols) cols.Template(Function(f) String.Format("{0:#,###}", f.sumTotals("MeasuredSysKerCPU"))).Title("ROM (B)").HtmlAttributes(New With {.Style = "text-align:right"}))

 gridBuilder.Columns(Function(cols) cols.Template(Function(f) String.Format("{0:#,###}", f.sumTotals("MeasuredSysKerRAM") * f.PageSizeInBytes)).Title("RAM (B)").HtmlAttributes(New With {.Style = "text-align:right"}))

 gridBuilder.Columns(Function(cols) cols.Template(Function(f) String.Format("{0:#,###}", f.sumTotals("MeasuredFLASH") * f.PageSizeInBytes)).Title("RAM (B)").HtmlAttributes(New With {.Style = "text-align:right"}))

 gridBuilder.Columns(Function(cols) cols.Template(Function(f) String.Format("{0:P}", (f.TotalAvailCPU - f.sumTotals("BudgetSysKerCPU")) / f.TotalAvailCPU)).Title("CPU (%)").HtmlAttributes(New With {.Style = "text-align:right"}))

 gridBuilder.Columns(Function(cols) cols.Template(Function(f) String.Format("{0:P}", (f.TotalAvailRAM - f.sumTotals("BudgetSysKerRAM") * f.PageSizeInBytes) / f.TotalAvailRAM)).Title("RAM (%)").HtmlAttributes(New With {.Style = "text-align:right"}))

 gridBuilder.Columns(Function(cols) cols.Template(Function(f) String.Format("{0:P}", (f.TotalAvailCPU - f.sumTotals("MeasuredSysKerCPU")) / f.TotalAvailCPU)).Title("CPU (%)").HtmlAttributes(New With {.Style = "text-align:right"}))

 gridBuilder.Columns(Function(cols) cols.Template(Function(f) String.Format("{0:P}", (f.TotalAvailRAM - f.sumTotals("MeasuredSysKerRAM") * f.PageSizeInBytes) / f.TotalAvailRAM)).Title("RAM (%)").HtmlAttributes(New With {.Style = "text-align:right"}))

 gridBuilder.Columns(Function(cols) cols.Template(Function(f) String.Format("{0:P}", (f.TotalAvailFLASH - f.sumTotals("MeasuredFLASH") * f.PageSizeInBytes) / f.TotalAvailFLASH)).Title("RAM (%)").HtmlAttributes(New With {.Style = "text-align:right"}))

 gridBuilder.DetailView(Function(dv) dv.Template(Function(e) Html.Telerik().Grid(e.pmt_processes) _

 .Name("Processes" & e.Name) _
.Groupable(Function(grouping) grouping.Groups(Function(groups) groups.Add(Function(f) f.pmt_categories.Name))) _

 .Columns(Function(cols) cols.Bound(Function(f) f.Name).Title("Process Name")) _

 .Columns(Function(cols) cols.Bound(Function(f) f.Version).Title("Version")) _

 .Columns(Function(cols) cols.Bound(Function(f) f.MeasuredSysKerCPU).Title("CPU (uSecs)").HtmlAttributes(New With {.Style = "text-align:right"})) _

 .Columns(Function(cols) cols.Bound(Function(f) f.MeasuredSysKerRAM).Title("RAM (pgs)").HtmlAttributes(New With {.Style = "text-align:right"})) _

 .Columns(Function(cols) cols.Bound(Function(f) f.MeasuredFLASH).Title("ROM (pgs)").HtmlAttributes(New With {.Style = "text-align:right"})) _

 .Columns(Function(cols) cols.Bound(Function(f) f.BudgetSysKerCPU).Title("CPU (uSecs)").HtmlAttributes(New With {.Style = "text-align:right"})) _

.Columns(Function(cols) cols.Bound(Function(f) f.BudgetSysKerRAM).Title("RAM (pgs)").HtmlAttributes(New With {.Style = "text-align:right"})) _

 .Columns(Function(cols) cols.Template(Function(f) "0.0").Title("Delta CPU (uSecs)").HtmlAttributes(New With {.Style = "text-align:right"})) _

.Columns(Function(cols) cols.Template(Function(f) "0.0").Title("Delta RAM (pgs)").HtmlAttributes(New With {.Style = "text-align:right"})) _

 .Columns(Function(cols) cols.Template(Function(f) "0.0").Title("Delta FLASH (pgs)").HtmlAttributes(New With {.Style = "text-align:right"})) _

.Sortable(Function(s) s.SortMode(GridSortMode.MultipleColumn).OrderBy(Function(so) so.Add("pmt_categories.Name")).OrderBy(Function(so) so.Add("Name"))) _

))

gridBuilder.HtmlAttributes(New With {.Style = "font-size:11px;"})

gridBuilder.Render()

[Georgi Krustev]

Hello Gary,

 
This issue could be caused only by custom applied styles. When the cell height is bigger then the one defined in the telerik CSS files, then the sprite is shown. The class "t-grouping-row" shows image which is part of the sprite. That is why when the row height is bigger then the defined one, the rest of the sprite is shown.

Check this video, which shows the hierarchical grid and how I was able to reproduce the issue there.

Here are the possible solutions of the issue:

#1: If you do not need higher row, then you should find which style on the page override CSS of the grouping row.

#2: If you need to so high row, then you should change the background image of the grouping row. As I mentioned its background currently is sprite.png. You will need to make your own image and show it instead of the sprite.

Best regards,
Georgi Krustev
the Telerik team

[Gary]

Thank you for your help.  You were correct that I had another CSS style overiding the t-grouping-header.  Was able to track it down quickly after reading your post. It looks so obvious now.