Jsgrid: Empty grid with long header doesn't have horizontal scrollbar

[tabalinas]

jsfiddle: https://jsfiddle.net/rhwxue73/

Issue is based on https://github.com/tabalinas/jsgrid/issues/744

[richraid21]

colspan Only specifies the number of columns that a cell element will overlap. It does not specify the intended width. Cell widths are determined by content, or set by an override css prop. Setting the width of the "Not Found" td element to the sum of all columns' width should fix the problem.

[lhuacacolqui]

I have the same problem, help me.
Scroll should be activated

[saeedallahyari]

Hi.
Kindly.

Is this problem still unresolved? or fixed that?
It have adversely effect on user experience.

[saeedallahyari]

After read some issue about this problem, I think if you want to resolve that as simple way, you can do like this https://jsfiddle.net/c6wtLmc0/1/

{ type: "control" , width : 80, _createInsertSwitchButton: function() { var $span = $('<span></span>'); $('<button class="btn btn-default btn-xs" title=add">New</button>').appendTo($span) .click(function (e) { e.preventDefault(); $("#jsGrid").jsGrid("insertItem", [{}]); }); return $span;}}

In other word, in my opinion you can change insert button behavior very simply and apply all your validation in other place(for example validate in editing)
I know that doing by this way might not be good, but it works in my case.
I hope it would be help others.

[hk298]

It would be nice to have a fix for this. I have a table with lots of columns and filter boxes everywhere, and I observed the following:

• scroll to the right to make a column visible that normally does not show
• enter a filter condition that results in no data found
• the refresh of the table will reset the scrolling to the left
• now you can't see the filter condition anymore and you can't change it because there's no scrollbar.

A workaround is to click into any filter and then hit tab until the table scrolls to the right. However, if you have only one filter in the rightmost column you're kinda screwed (reload of the whole page is necessary).

[hk298]

Here's a modified __createNoDataRow_ that implements richraid21's idea:

        _createNoDataRow: function() {
            var amountOfFields = 0;
            var totalWidth = 0;
            this._eachField(function(field, index) {
                amountOfFields++;
                totalWidth += field.width;
            });

            return $("<tr>")
                .addClass(this.noDataRowClass)
                .append($("<td>")
                .addClass(this.cellClass)
                .attr("colspan", amountOfFields)
                .attr("width", totalWidth)
                .append(this.renderTemplate(this.noDataContent, this)));
        },

Works for me...

[MarkusSeiberl]

Hi,
I had the same problem and found a simple fix. Just paste the code directly before the jsgrid-element.

<style>
     .jsgrid-grid-header,
     .jsgrid-grid-body {
         overflow: auto; 
} 
</style>

Here is the JSFiddle link: https://jsfiddle.net/kL8arzeo

[abolognino]

As a quick and dirty workaround we show add a single empty row when there is no data.