jQuery Grid Columns

Autogenerated columns
If the grid does not have specified column it will generate them on the fly by using the fields from the resolved data source:

 

$("#grid").shieldGrid({
    dataSource: {
        data: [
            { ID: 1, name: "name1" },
            { ID: 2, name: "name2" }
        ]
    }
});

In this case the grid will create two columns with header texts:ID and name.

Developer defined columns

You can define the grid columns via its columns property:

 

$("#grid").shieldGrid({
    dataSource: {
        data: [
            { ID: 1, name: "name1" },
            { ID: 2, name: "name2" }
        ]
    },
    columns: [
        { field: "ID", title: "Unique Number", format: "{0:c}" },
        { field: "name", title : "Name", width: "300px" }
    ]
});

In this case you have more flexibility in order to set columns’ widths, format the values, add additional attributes, etc. More information about all available columns’ settings you can find into the related grid columns’s api

Column Resizing

ShieldUI Grid supports column resizing. Resizing is enabled through the resizing initialization option. Column resizing requires scrolling to be enabled in the Grid:

$("#grid").shieldGrid({
    dataSource: {
        ...
    },
    columns: [
        { field: "ID", title: "Unique Number", format: "{0:c}" },
        { field: "name", title : "Name", width: "300px" }
    ],
    resizing: true,
    scrolling: true
});

When column resizing is enabled, hovering over the edges of the columns in the grid header changes the cursor to indicate columns can be resized.

By default, when resizing is enabled in the grid, all columns are freely resizable. Through additional options, columns may define their own resizing restrictions. This is possible through the resizable, minWidth and maxWidth initialization options for grid columns:

$("#grid").shieldGrid({
    dataSource: {
        ...
    },
    columns: [
        { field: "ID", resizable: false },
		{ field: "Name", minWidth: 40 },
		{ field: "Description", maxWidth: 300 }
    ],
    resizing: true,
    scrolling: true
});

In the above code snippet, resizing of the first column is disabled, while the second and third columns define min and max width, respectively.

Column Reordering

Shield UI Grid additionally supports column reordering. To enable column reordering, use the columnReorder initialization option:

$("#grid").shieldGrid({
    dataSource: {
        ...
    },
    columns: [
        { field: "ID", title: "Unique Number", format: "{0:c}" },
        { field: "name", title : "Name", width: "300px" }
    ],
    columnReorder: true
});

When dropping a column on a new position, the grid fires the command event with commandName equal to columnReorder. The command can be canceled to prevent the reorder action.

$("#grid").shieldGrid({
    dataSource: {
        ...
    },
    columns: [
        { field: "ID", title: "Unique Number", format: "{0:c}" },
        { field: "name", title : "Name", width: "300px" }
    ],
    columnReorder: true,
	events: {
		command: function (e) {
			if (e.commandName == "columnReorder") {
				//cancel any column reorder command
				e.cancel = true;
			}
		}
	}
});

When column reordering is enabled, a single grid column can be dragged and dropped between other two columns. Additionally, Shield UI Grid provides the reorderColumn method that accepts two arguments - the zero-based index of the column and the new destination index - and reorders the column to the destination index:

var grid = $("#grid").swidget();

// change the position of the third column to first
grid.reorderColumn(2, 0);