why the scrollbar override the toolbar?

Question

i have used the code in scrollbars top and bottom to create a grid similar to whats on the link with top and bottom scrollbars. But when i use

toolbar: [true, "top"],

with

$('<div><input type="button" value="Send" /></div>').appendTo("#t_grid");

the toolbar with the added button wont show instead it shows only the scrollbar at the top. it seems like the scrollbar is overriding the toolbar.

i have the following question:

How do i include my toolbar with the button along with the top scrollbar ? (in this the tool bar must be positioned above the top scrollbar)

score 1 · Accepted Answer · edited May 23 '17 at 12:00

The old demo, which I created for the answer, uses the top-toolbar for scrolling. Thus all content of the top-toolbar (the "Send" button in you case) will be scrolled.

One can easy fix the problem by inserting one more separate div after the div with the top-toolbar. The corresponding code will be

var $bdiv = $grid.closest(".ui-jqgrid-bdiv"),
    $topToolbar = $("#t_" + $grid[0].id),
    $scrollBar = $('<div class="ui-state-default" id="tscroll_' + $grid[0].id +
        '" style="overflow-x:scroll;overflow-y:hidden;"><div style="height:1px;width:' +
        $grid.width() + 'px;"></div></div>');

// insert the custom content in the  top toolbar
$('<div><input type="button" value="Send" /></div>').appendTo($topToolbar);
$topToolbar.css("height", "auto");

// append the new div with the scroll bar on top of the grid
$topToolbar.after($scrollBar[0]);

// synchronize the scroll position of $scrollBar and $bdiv
$scrollBar.scroll(function () {
    // synchronize the srollbar of the grid
    $bdiv.scrollLeft($(this).scrollLeft());
});
$bdiv.scroll(function () {
    // synchronize the srollbar of the toppbar
    $scrollBar.scrollLeft($(this).scrollLeft());
});

why the scrollbar override the toolbar?

1 Answers1