Slot for custom footer/header

Hey there, I’m slowly dipping into parts of the library and so naturally some ideas are coming up 😃

What I’ve seen is that while a custom footer is supported, it essentially takes a bare-bones string with a few modifications. In my case there might be more that will come into the footer, such as a customized pagination.

So what would you say if the aurelia-slickgrid custom element would expose a named slot for both headers and footers like:

<slot name="slick-header"></slot>
<slot name="slick-footer"></slot>

so that the consumer could pump in whatever he likes in those places

<aurelia-slickgrid grid-id="grid2"
                       column-definitions.bind="columnDefinitions2"
                       grid-options.bind="gridOptions2"
                       dataset.bind="dataset2"
                       grid-height="300"
                       grid-width="800">
      <div slot="slick-header">A BIG HEADER</div>
      <div slot="slick-footer">That's my footer</div>
    </aurelia-slickgrid>

I’d like to discuss this first with you @ghiscoding but can afterwards provide a PR if you’d like

[ghiscoding]

The auto-resize tries to calculate the available size from the div container that you include aurelia-slickgrid inside, <div id="grid-container"> that is what the containerId is for.

However, the auto-resize doesn’t always work, it could depend on multiple factors that could screw up the calculation, for example in Salesforce, some of the grids are inside a white box and the auto-resize doesn’t seem to take it in consideration and I need to manually add padding. In the example below, if I don’t add the extra padding the grid goes outside the white box and I think it also doesn’t calculate the footer (where you see “Submit an Idea” and “Log an Issue”) either and because of that I need to a bottom padding of 80 and that fixes the example below (actually the Footer showing 1 of 1 items is a bit too close to the edge, I should probably increase the padding to 85 or something).

Things to note, whatever padding you add to the autoResize becomes part of the auto resize calculation, so if for example it calculates that it has 600px available and you provide a bottomPadding: 80, it will calculate 600 - 80 and resize the grid to a height of 520px. If you enable the Footer/Pagination, it will internally add bottomPadding to the calculation. Also how this is done is via a browser resize event to recalculate, basically this $(window).on("resize.grid." + this._gridUid), so every time you resize the browser it will resize the grid and so it’s not CSS, it’s really done with JS.

[zewa666]

so bottomPadding in that case would relate to the size of the slotted footer? What is containerId pointing to?

Well yeah, px rule the world 😉