CODEWITHSUNDEEP
jquery-uislickgrid
Chris
Chris

Reputation: 7855

Custom header cell rendering in Slickgrid

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.

Upvotes: 3

Views: 5880

Answers (1)

kavun
kavun

Reputation: 3381

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()

Upvotes: 4

Related Questions