3

I'd like to render the header cells of Slickgrid myself and the only way how i can do this at the moment is via the onHeaderCellRendered callback. The problem here is, that slickgrid (as the name of the callback suggests) has already finished rendering the header cell.

So if i add something to the cell and it's getting wider than before what happens is that the header cell will be as wide as i want it to be but the the table cells of that column will stay the same width as before.

grid.onHeaderCellRendered.subscribe(function(e, args){
     //adding some stuff to args.node, setting the width of args.node to something wider via
     //$(args.node).width(...);
});

And here's how it looks. (green = correct width, red = old width).

enter image description here

My question is, if there is a way to tell the grid (Hey grid i rendered the header cell myself please update the column widths).

I already tried a lot of things. Amongst others i made the method applyColumnWidths() located in the Slickgrid sources available outside but this didn't workout either.

If the answer is "There is no way to do this" i'll try to implement this myself for slickgrid.

Community
  • 1
  • 1
Chris
  • 7,675
  • 8
  • 51
  • 101

1 Answers1

4

If you want to supply custom HTML to render in the header, you can supply a HTML string for the name property of a column like

{
    id: 'columnID',
    field: 'columnField',
    name: '<span class="red">Some Red Text</span>'
}

you can see that this will work because .updateColumnHeader() simply uses jQuery.fn.html() to set the header content based on what you pass in for name. https://github.com/mleibman/SlickGrid/blob/master/slick.grid.js#L494

If you want to change the width of a column after the column is rendered, you should look into how the draggable column resize is implement, and piggy back off of that. https://github.com/mleibman/SlickGrid/blob/master/slick.grid.js#L848

My guess is that calling the already exposed grid.autosizeColumns() would be better than just calling applyColumnWidths() because it will also call applyColumnHeaderWidths()

kavun
  • 3,358
  • 3
  • 25
  • 45
  • Is there a better way to get this accomplished? I find it hard to belive that the only way to customize the rendering of the header is to hardcode HTML into the Javascript... Is there some sort of event available to accomplish this? – Marko Nov 09 '13 at 17:25
  • Your options are to either hardcode the HTML in the `columnDefinition.name` or write a plugin similar to [`Slick.Plugins.HeaderMenu`](http://mleibman.github.io/SlickGrid/examples/example-plugin-headermenu.html) or [`Slick.Plugins.HeaderButtons`](http://mleibman.github.io/SlickGrid/examples/example-plugin-headerbuttons.html) – kavun Nov 09 '13 at 17:32
  • the slick header plugins subscribe to the `onHeaderCellRendered` event and append contend to the header node dynamically - https://github.com/mleibman/SlickGrid/blob/master/plugins/slick.headerbuttons.js#L91 – kavun Nov 09 '13 at 17:41