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.

score 0 · Answer 1 · answered Apr 22 '21 at 06:27

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>

Thank you for taking the time to try and answer the question. Unfortunately, that did not solve the problem. If you change your "text" back to "caption", it still works. The reason you got it to work was because I had put the css in the css panel whereas you put it directly in the html. I'm not familiar with the snippet tool so I followed what I thought it was directing me to do. I don't understand why they have a separate css panel when using it causes code to fail. — user3217883, Apr 22 '21 at 14:36
I replaced "caption" with "text" in my program code and still has the same problem. That's the problem with code snippets. They work in the snippet but not in the real code. Very difficult to isolate the real problem. I'm hoping someone who uses w2ui a lot will have seen this same issue where you have to click on the table header to get everything to display correctly. Why? — user3217883, Apr 22 '21 at 14:40
can u send a git link for a full project or at least a full code block for this issue so I can take a closer look? — ashen madusanka, Apr 23 '21 at 03:25
I finally figured it out. The table was inside a tab, and the tab had a class from a previous, w2ui tab that was somehow interfering with the table creation. That was a hard one to figure out. Thanks again for your help. I figured it out by working on the full code block that you requested. — user3217883, Apr 23 '21 at 18:42

score 0 · Answer 2 · answered Apr 23 '21 at 18:43

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>

Need more information and code like a link to the website – Allancoding Apr 23 '21 at 18:45 — Allancoding, Apr 23 '21 at 18:45

how to initialize w2ui grid column width to content?

2 Answers2