Set fixed width for every column

[StefanoSega]

Hallo,

sorry for the question, probably this issue was discussed even in the past but I didn't found any solutions that fits my needs.

My problem is: I need to set a fixed width for almost every column of the Backgrid, and is fine for me if the text contained in some cells use more than one line.

I successfully did it using classes with the "width" valorized (and eventually "white-space: normal" set?), at least for the custom columns:

var columns = [{ name: "btnDetails", label: "", editable: false, sortable: false, cell: DetailsCell } var DetailsCell = Backgrid.Cell.extend({ template: _.template("<button type=\"button\" class=\"btn btn-info btn-sm\">"

• "<span class=\"glyphicon glyphicon-info-sign\"> Details"
• ""), events: { "click": "detailsRow" }, detailsRow: function (e) { e.preventDefault(); alert('det'); }, render: function () { this.$el.html(this.template()); this.delegateEvents(); return this; }, className: 'grid_btns grid_width_details' });

... where the class "grid_width_details" set the width of the column.

But how to do it for the standard cells that has for the "cell" property a value like "string" or "date"? And for those cells that use the extension MomentCell in the "cell" property?

{ name: "DateISO", label: "Date / Hour", editable: false, sortable: true, cell: Backgrid.Extension.MomentCell.extend({ modelFormat: "YYYY/M/D HH:mm:ss.SSS", displayLang: "it-it", displayFormat: "DD/MM/YYYY hh:mm:ss" }) }

Thank you! Footourism

[christinedraper]

I don't know if this is recommended practice, but here's what I did. I basically extended the Cell class to have a width property, which I set to be the name of the style that specifies the width.

var originalCellInitialize = Backgrid.Cell.prototype.initialize;
Backgrid.Cell.prototype.initialize = function(options){
    originalCellInitialize.apply(this, arguments);
    var width = options.column.get("width");
    if (width) { 
        this.$el.addClass(width); 
    }
};

I had to do this in some other base cells too, e.g. SelectAllHeaderCell - in this case I gave it a sensible default.

var originalInitialize = Backgrid.Extension.SelectAllHeaderCell.prototype.initialize; Backgrid.Extension.SelectAllHeaderCell.prototype.initialize = function (options) {

originalInitialize.apply(this, arguments);

var width = options.column.get("width") || 'twi-w-small';
this.$el.addClass(width); 
}

Then when I define the columns I specify the width: var columns = [{ name : "rowNumber", label : "#" cell : "string", width: 'twi-w-small', editable : false },... ];

[StefanoSega]

Hallo, and thank you for the reply,

sorry but I don't understand how to use this code ... you mean that this part:

var originalCellInitialize = Backgrid.Cell.prototype.initialize; Backgrid.Cell.prototype.initialize = function(options){ originalCellInitialize.apply(this, arguments); var width = options.column.get("width"); if (width) { this.$el.addClass(width); } }; should be integrated into the backgrid.min.js file? And then I'll have a new property "width" on the column to use and assign a value like "300px"? Or I can use that code directly in the page to extend the Cell class and use the new property? I tried to include it into the page and then use the "width" property, but nothing changes and still the columns autoadapt their width.

Thank you, Stefano

Date: Mon, 8 Dec 2014 06:57:25 -0800 From: notifications@github.com To: backgrid@noreply.github.com CC: zwonimir@live.it Subject: Re: [backgrid] Set fixed width for every column (#550)

I don't know if this is recommended practice, but here's what I did. I basically extended the Cell class to have a width property, which I set to be the name of the style that specifies the width.

var originalCellInitialize = Backgrid.Cell.prototype.initialize; Backgrid.Cell.prototype.initialize = function(options){ originalCellInitialize.apply(this, arguments); var width = options.column.get("width"); if (width) { this.$el.addClass(width); } };

I had to do this in some other base cells too, e.g. SelectAllHeaderCell - in this case I gave it a sensible default.

var originalInitialize = Backgrid.Extension.SelectAllHeaderCell.prototype.initialize;

Backgrid.Extension.SelectAllHeaderCell.prototype.initialize = function (options) {

originalInitialize.apply(this, arguments);

var width = options.column.get("width") || 'twi-w-small'; this.$el.addClass(width); }

Then when I define the columns I specify the width:

        var columns = [{

            name : "rowNumber",

            label : "#"

            cell : "string",

            width: 'twi-w-small',

            editable : false

        },...

        ];

— Reply to this email directly or view it on GitHub.

                  =

[StefanoSega]

Sorry for the preivous mail :D of course, the property get a class name.

It works fine, thanks! Stefano

Date: Mon, 8 Dec 2014 06:57:25 -0800 From: notifications@github.com To: backgrid@noreply.github.com CC: zwonimir@live.it Subject: Re: [backgrid] Set fixed width for every column (#550)

I don't know if this is recommended practice, but here's what I did. I basically extended the Cell class to have a width property, which I set to be the name of the style that specifies the width.

var originalCellInitialize = Backgrid.Cell.prototype.initialize; Backgrid.Cell.prototype.initialize = function(options){ originalCellInitialize.apply(this, arguments); var width = options.column.get("width"); if (width) { this.$el.addClass(width); } };

I had to do this in some other base cells too, e.g. SelectAllHeaderCell - in this case I gave it a sensible default.

var originalInitialize = Backgrid.Extension.SelectAllHeaderCell.prototype.initialize;

Backgrid.Extension.SelectAllHeaderCell.prototype.initialize = function (options) {

originalInitialize.apply(this, arguments);

var width = options.column.get("width") || 'twi-w-small'; this.$el.addClass(width); }

Then when I define the columns I specify the width:

        var columns = [{

            name : "rowNumber",

            label : "#"

            cell : "string",

            width: 'twi-w-small',

            editable : false

        },...

        ];

— Reply to this email directly or view it on GitHub.

                  =