0

There's a BUNCH of topics about this problem, and I've gone through them, but have had trouble implementing them for my application.

I have a GridView that is bound to a SqlDataSource. The column widths change dependent on the content (I let the browser handle that). The GridView is sortable (the headers can be clicked on) and has columns with Edit and Delete buttons, that are dependent on DataKeys in each row.

From what I can tell the GridView is rendered in HTML as:

<div><table><tbody>
  <tr><th></th></tr>
  <tr><td></td></tr>
</tbody></table></div>

So there is no Thread section.

I have tried a number of the solutions on StackOverflow that use CSS or JavaScript or jQuery. The scripting solutions seem to dependent on there being a thread, and some suggested adding this to my code-behind to create threads at gridview_PreRender...

MyGridview.UseAccessibleHeader = true;
MyGridview.HeaderRow.TableSection = TableRowSection.TableHeader;

But I get an error, since MyGridview.HeaderRow doesn't exist, that I can't set to an instance of an object (the header) because it is null.

I also tried some CSS solutions, such as the one featured here: HTML fixed header table scrollbar It actually worked very close to what I need, except that the header row would end up with an odd white line crossing through it. I investigated this and found that it had to do with the border-collapse property. I could F12 into the Developer Tools for the web browser and fix it, but no matter what I set in the CSS, this would not be initially loaded at runtime.

Further more, while this worked in IE for me, it would not work in Chrome or Safari properly. The header bar would get squeezed left, as opposed to stretching to match the widths of the columns of the rest of the table. This is weird, seeing as the example page does render fine in Chrome and Safari (so my other CSS or code going on might be messing with this).

Is there some really obvious thing that I'm missing? Or maybe I'm not providing enough information to fix this? Ideally this would be a modular solution I could throw across a bunch of my web pages (that all use the same CSS to render the GridViews, already) and would be cross browser. I'm not opposed to a JavaScript solution, so long as the Sortable headers and the DataKey buttons persist.

Community
  • 1
  • 1
ohioDeveloper
  • 366
  • 3
  • 13
  • I still haven't found a good solution to this problem. I started working on just building a second table for the gridview headers (intending to use JS to match col widths so it matches the gridview), and this sort of works in IE. I can get that table match up width wise. But it fails in Chrome. It's like my JavaScript does absolutely nothing in Chrome. var gridView = document.getElementByID('gridview'); var tableHeader= document.getElementByID('header'); for (var i = 0, cell; cell = gridView.rows[0].cells[i]; i++) { tableHeader.rows[0].cells[i].width = (cell.scrollWidth) + "px"; } – ohioDeveloper Jun 20 '14 at 20:15

1 Answers1

0

The solution that I ended up using was to manually created a table with LinkButtons that would act as a header row, and use the _Click of those buttons to sort the Gridview. I then used JavaScript to hide the header bar on the table rendered by the Gridview, and put that in a scrollable div. It ended up working really well.

ohioDeveloper
  • 366
  • 3
  • 13