how to initialize w2ui grid column width to content?

Question

$( document ).ready(function() {
    console.log( "ready!" );
    var records = [];
    var record1 = {
        recid: 1,
        strategy: "high/low",
        backtest: "v1",
        num_trades: 273,
        num_winners: 70,
        num_losers: 203
    };
    records.push(record1);
    var record2 = Object.assign({},record1);
    record2['recid']=2;
    record2['backtest']="v2";
    records.push(record2);    
    addStrategiesTable(records);
});

function addStrategiesTable(records) {
     $('#grid2').w2grid({
        name: 'grid2',
        header: 'Strategies',
        sortData: [
            { field: 'strategy', direction: 'desc' },
            { field: 'backtest', direction: 'desc' },
            { field: 'num_trades', direction: 'desc' },
            { field: 'num_winners', direction: 'desc' },
        ],
        columns: [
            {
                field: 'strategy',
                caption: 'Strategy',
                size: '100px',
                sortable: true
            },
            {
                field: 'backtest',
                caption: 'Backtest',
                sortable: true
            },
            {
                field: 'num_trades',
                caption: 'Num Trades',
                sortable: true
            },
            {
                field: 'num_winners',
                caption: 'Num Winners',
                sortable: true
            },
            {
                field: 'num_losers',
                caption: 'Num Losers',
                sortable: true
            }
        ],
        records: records
    });
}
 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
<div id="grid2" style="height: 300px;"></div>

I have a w2ui grid that is not behaving on initialization. It has 20 columns. When I refresh the browser, this is what I see:

It shows only 2 columns and 1 row, plus the table header only goes about half way, even though the table is set to almost 100%. I can see the border of the table stretching to that distance, but not the content. The two columns it does show are squashed together.

If I click on one of the column headers, then everything shows up correctly!

Here is the html:

   <div id="grid2" style="position:absolute; left:8px; right:8px; height: 400px;"></div>

The grid columns are set in javascript like this:

columns: [
    {
        field: 'strategy',
        caption: 'Strategy',
        sortable: true
    },
    plus 19 more

Any suggestions to fix this?

I tried to create a code snippet (above) that shows the issue but it just shows a barebones table with none of the w2ui functionality.

Answer 1

This is you exact code add there is only an error Just add your link to html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">

Put this in your html file.

$( document ).ready(function() {
    console.log( "ready!" );
    var records = [];
    var record1 = {
        recid: 1,
        strategy: "high/low",
        backtest: "v1",
        num_trades: 273,
        num_winners: 70,
        num_losers: 203
    };
    records.push(record1);
    var record2 = Object.assign({},record1);
    record2['recid']=2;
    record2['backtest']="v2";
    records.push(record2);    
    addStrategiesTable(records);
});

function addStrategiesTable(records) {
     $('#grid2').w2grid({
        name: 'grid2',
        header: 'Strategies',
        sortData: [
            { field: 'strategy', direction: 'desc' },
            { field: 'backtest', direction: 'desc' },
            { field: 'num_trades', direction: 'desc' },
            { field: 'num_winners', direction: 'desc' },
        ],
        columns: [
            {
                field: 'strategy',
                caption: 'Strategy',
                size: '100px',
                sortable: true
            },
            {
                field: 'backtest',
                caption: 'Backtest',
                sortable: true
            },
            {
                field: 'num_trades',
                caption: 'Num Trades',
                sortable: true
            },
            {
                field: 'num_winners',
                caption: 'Num Winners',
                sortable: true
            },
            {
                field: 'num_losers',
                caption: 'Num Losers',
                sortable: true
            }
        ],
        records: records
    });
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
<div id="grid2" style="height: 300px;"></div>

Answer 2

I did according to Notice

column.caption property is deprecated, please use column.text so caption replace with text

refer the snippet

$(document).ready(function () {
        console.log("ready!");
        var records = [];
        var record1 = {
            recid: 1,
            strategy: "high/low",
            backtest: "v1",
            num_trades: 273,
            num_winners: 70,
            num_losers: 203
        };
        records.push(record1);
        var record2 = Object.assign({}, record1);
        record2['recid'] = 2;
        record2['backtest'] = "v2";
        records.push(record2);
        addStrategiesTable(records);
    });

    function addStrategiesTable(records) {
        $('#grid2').w2grid({
            name: 'grid2',
            header: 'Strategies',
            sortData: [
                { field: 'strategy', direction: 'desc' },
                { field: 'backtest', direction: 'desc' },
                { field: 'num_trades', direction: 'desc' },
                { field: 'num_winners', direction: 'desc' },
            ],
            columns: [
                {
                    field: 'strategy',
                    text: 'Strategy',
                    size: '100px',
                    sortable: true
                },
                {
                    field: 'backtest',
                    text: 'Backtest',
                    sortable: true
                },
                {
                    field: 'num_trades',
                    text: 'Num Trades',
                    sortable: true
                },
                {
                    field: 'num_winners',
                    text: 'Num Winners',
                    sortable: true
                },
                {
                    field: 'num_losers',
                    text: 'Num Losers',
                    sortable: true
                }
            ],
            records: records
        });
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
    <script src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
</head>

<body>
    <div id="grid2" style="height: 300px;"></div>
</body>
</html>