How to specify the width of a slick grid in percentage?

Is anybody knows how to set width of the grid in percentage?

for example 开发者_如何转开发 but in the page the width of grid is more than 2000 pixels. It does not get adjusted to page width.

Any help would be appreciated.

Thanks Padmanabhan

i see that this question is really old, but i came across this question while trying to figure out how to get my columns to take up the full width of the table. hopefully it'll help someone someday.

i couldn't figure out how to set the column widths explicitly but i did get it to work implicitly.

here's how to do it:

first in your column declaration add width: 300 (or whatever width you want)

{id:"name", name:"Student Name", field:"firstName", width: 300}

set this for all your columns, the ones you want wider put a bigger number, e.g. 500

then in your options declation add forceFitColumns: true

{enableCellNavigation: true, enableColumnReorder: false, forceFitColumns: true};

by doing this i was able to get my table columns to take up the remaining space of the table, and maintain the portions i want relative to each other.

I have a function to do a grid resize.

    function resizeGrid(newsize, grid) {
            $('#dataGrid').css('width', newsize);
            grid.resizeCanvas();
    }

Don't forget to add forceFitColumns: true to your grid options as conman says above

FYI, this appears to work out of the box in recent versions of SlickGrid. :)

Yes, it is possible, but I can not find an easy solution. So you have to customize it quite a bit.

I am currently working on a solution for this. Here is a working example, but it does have a few bugs. Some of which are from jsfiddle setup. http://jsfiddle.net/MQBLn/8/

basically I created a function that formats the cells based on the Column Heading Sizes. Then you have to call that function whenever there is an Action. (Sort, Resize, Etc.) Also I did have to make some minor changes to slick.grid.js So you will find it loaded at the top of JS section followed by custom js. Then some overwrite rules for css.

Here is my Cell Formatter Function

function formatCells(grid)
{
    var columns = grid.getColumns();
    var grid_width = grid.getGridPosition().width;
    var header = $(".slick-header-columns");

    for(var i in columns)
    {
        $(".slick-cell.r"+i).css("width", (Math.floor(((header.children().eq(parseFloat(i)).width()+9)/(grid_width-_scrollBarWidth))*10000)/100)+"%");
    }
}

I hope this is usefull and maybe one day built into SlickGrid as a setting.

The SlickGrid-formatter supply you with 5 parameters:

formatter: function ( row, cell, value, columnDef, dataContext )

You can adjust the columns' width using the dataContext parameter, within the specific formatter, etc: dataContext.width = 600 makes the specific column 600px.

Example

    {
        /* Categories */
        id: "categories",
        formatter: function ( row, cell, value, columnDef, dataContext ) {
            var html = '';

            if ( value.indexOf( 'variation-child' ) != -1 ) {
                return value;
            } else if ( value ) {
                for ( var i = 0; i < value.length; i++ ) {
                    if ( value[ i ] ) {
                        html += '<div class="box category-box" title="' + value[ i ] + '">' + value[ i ] + '</div>';
                    }
                }
            }

            columnDef.width = 600 * value.length;

            return html;
        },
        name: "Categories", field: "categories", sortable: true, editor: Slick.Editors.TaxonomyPopupEditor
    }

Remember to use grid.resizeCanvas(); (recalculate the widths), whenever you're done adding data to the grid.