Resizing Columns

The wijgrid widget automatically adjusts the column width according to the data entered in each cell. However, the widget also allows you to set the width of the columns by using the width option.

To resize column width in code

The script below sets the value of the first column to 40%. You can change the value of the width for any column. The value can be an integer or percentage.

Live Widget
Script

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ cellClicked: function (e, args) { alert(args.cell.value()); }, allowSorting: true, data: [ [27, 'Canada', 'Adams, Craig', 'RW'], [43, 'Canada', 'Boucher, Philippe', 'D', 'R'], [24, 'Canada', 'Cooke, Matt', 'LW', 'L'], [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'], [1, 'United States', 'Curry, John', 'G', 'L'], ], columns: [ {headerText: "Number", dataType:'number', width: "40%"}, //sets the width of the first column in percentage. {headerText: "Nationality", dataType:'string'}, {headerText: "Player", dataType:'string'}, {headerText: "Position", dataType:'string'}, ] }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            cellClicked: function (e, args) {
                alert(args.cell.value());
            },
            allowSorting: true,        
            data: [
                [27, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'],
                [1, 'United States', 'Curry, John', 'G', 'L'],
            ],
            columns: [
               {headerText: "Number", dataType:'number', width: "40%"}, //sets the width of the first column in percentage.
                {headerText: "Nationality", dataType:'string'},
                {headerText: "Player", dataType:'string'},
                {headerText: "Position", dataType:'string'},
      
            ]
        });
    });
    });
</script>

To resize column at runtime

You can also change the column width at runtime by setting the allowColSizing option to true. A user can drag the handle between two rows to resize them.

Live Widget
Script

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ cellClicked: function (e, args) { alert(args.cell.value()); }, allowSorting: true, allowColSizing: true,// allows user to change the column width data: [ [27, 'Canada', 'Adams, Craig', 'RW'], [43, 'Canada', 'Boucher, Philippe', 'D', 'R'], [24, 'Canada', 'Cooke, Matt', 'LW', 'L'], [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'], [1, 'United States', 'Curry, John', 'G', 'L'], ], columns: [ {headerText: "Number", dataType:'number'}, {headerText: "Nationality", dataType:'string'}, {headerText: "Player", dataType:'string'}, {headerText: "Position", dataType:'string'}, ] }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            cellClicked: function (e, args) {
                alert(args.cell.value());
            },
            allowSorting: true,                  
            allowColSizing: true,// allows user to change the column  width          
            data: [
                [27, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'],
                [1, 'United States', 'Curry, John', 'G', 'L'],
                  ],
            columns: [
                {headerText: "Number", dataType:'number'},
                {headerText: "Nationality", dataType:'string'},
                {headerText: "Player", dataType:'string'},
                {headerText: "Position", dataType:'string'},     
                    ]
        });
    });
    });
</script>