Column Properties

The wijmo.grid.Column class has almost 40 properties which you can use to configure each column's appearance and behavior.

These properties are set automatically for auto-generated columns, but when creating columns in code you will normally set a few of these:

binding: Defines property of the data item to be shown in the column.
header: Defines the content of column's header cell.
format: Specifies format string used to convert numbers and dates into display strings for the column.
width: Specifies width of the column in pixels. You may also use 'star' sizing to specify the column width in relative units (e.g. '2*' is twice as wide as '*').
align: Defines the horizontal alignment of items in the column. This is set to null by default, which aligns data based on the column's data type. You can override the default by setting this property to 'left', 'right', or 'center'.
isReadOnly: Determines whether the column can be edited by the user. You can disable editing altogether by setting the grid's isReadOnly property to false.
isRequired: Determines whether users should be able to set values in the column to empty strings or null values.

For example, the grid below has a custom set of columns with the main properties set in code:

Country

Sales

Expenses

$81,733

$38,401

Germany

$20,603

$27,944

$44,218

$48,877

Japan

$29,191

$23,366

Italy

$46,951

$49,108

Greece

$86,237

$49,767

// This file locates: "Scripts/Lesson/C1FlexGrid/ColumnsProperties.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.initialize({
        allowResizing: 'None',
        autoGenerateColumns: false,
        columns: [
            { binding: 'Country', header: 'Country', width: '2*', align: 'center', isReadOnly: true },
            { binding: 'Sales', header: 'Sales', format: 'c0', width: '*' },
            { binding: 'Expenses', header: 'Expenses', format: 'c0', width: '*' },
        ]
    });
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: ColumnsProperties
        public ActionResult ColumnsProperties()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.ColumnsProperties_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsProperties_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsProperties_Text2)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1FlexGrid.ColumnsProperties_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.ColumnsProperties_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.ColumnsProperties_Text5)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.ColumnsProperties_Text6)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.ColumnsProperties_Text7)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.ColumnsProperties_Text8)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.ColumnsProperties_Text9)
    </li>
</ul>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsProperties_Text10)
</p>
@Html.C1().FlexGrid().Id("theGrid").Bind(Model)