Moving SlickGrid's top panel

Question

I'm wondering how I would go about moving SlickGrid's top panel in DataView. I would like it to slide down above the column headers instead of below them.

http://mleibman.github.io/SlickGrid/examples/example4-model.html

If anyone knows how I can accomplish that, I'd be most grateful.

Thank You!

Answer 1

Figured it out...

I had to change the following in slick.grid.js,

  $focusSink = $("<div tabIndex='0' hideFocus style='position:fixed;width:0;height:0;top:0;left:0;outline:0;'></div>").appendTo($container);

  $headerScroller = $("<div class='slick-header ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
  $headers = $("<div class='slick-header-columns' style='left:-1000px' />").appendTo($headerScroller);
  $headers.width(getHeadersWidth());

  $headerRowScroller = $("<div class='slick-headerrow ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
  $headerRow = $("<div class='slick-headerrow-columns' />").appendTo($headerRowScroller);
  $headerRowSpacer = $("<div style='display:block;height:1px;position:absolute;top:0;left:0;'></div>")
      .css("width", getCanvasWidth() + scrollbarDimensions.width + "px")
      .appendTo($headerRowScroller);

  $topPanelScroller = $("<div class='slick-top-panel-scroller ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
  $topPanel = $("<div class='slick-top-panel' style='width:10000px' />").appendTo($topPanelScroller);

to this...

  $focusSink = $("<div tabIndex='0' hideFocus style='position:fixed;width:0;height:0;top:0;left:0;outline:0;'></div>").appendTo($container);

  $topPanelScroller = $("<div class='slick-top-panel-scroller ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
  $topPanel = $("<div class='slick-top-panel' style='width:10000px' />").appendTo($topPanelScroller);

  $headerScroller = $("<div class='slick-header ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
  $headers = $("<div class='slick-header-columns' style='left:-1000px' />").appendTo($headerScroller);
  $headers.width(getHeadersWidth());

  $headerRowScroller = $("<div class='slick-headerrow ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
  $headerRow = $("<div class='slick-headerrow-columns' />").appendTo($headerRowScroller);
  $headerRowSpacer = $("<div style='display:block;height:1px;position:absolute;top:0;left:0;'></div>")
      .css("width", getCanvasWidth() + scrollbarDimensions.width + "px")
      .appendTo($headerRowScroller);

Answer 2

replace this code in the example

$("#inlineFilterPanel")
  .appendTo(grid.getTopPanel())
  .show();

with

$('.grid-header')
  .after($("#inlineFilterPanel"))
  .show();