# Bound Column Settings A bound column is declared through the `Bound` method, which specifies a data field. > important The data field names must be valid JavaScript identifiers and contain no spaces or special characters. The first character must be a letter. Bound columns support many settings, and the most commonly used settings are: ## For Appearance * Encoded - configures the HTML encoding of the bound property value. By default, it is set to `true` which means that the column values are encoded. * Format - specifies the format used when displaying the value of the bound property. By default, it is empty. For more information on the supported formats, refer to the [article about globalization](https://docs.telerik.com/kendo-ui/framework/globalization/overview). * Title - sets the text displayed in the header of the column. By default, the property name is used. The `Title` must not include non-encoded HTML content. Use a `ClientHeaderTemplate` instead. * Width - sets the width of the column in pixels or other units. By default, the width is not set and the column would try to accommodate its content. * Hidden * Media * MinScreenWidth * MinResizableWidth * HideOnGroup - specifies whether the column or field used to group the Grid data is hidden from the displayed columns. By default, it is set to `false`. If set to `true`, the column is hidden when the Grid is grouped through user interaction. The column is displayed again when the user ungroups by that field. ## For Functionality * Groupable - enables or disables the dragging of the column header to group by its bound property. By default, it is set to `true` which means that the bound Grid columns can be dragged for grouping. * Sortable - enables or disables the sorting by that column. * Template - sets the server template which is used when the bound field is displayed. * EditorTemplateName * Editable * Filterable - enables or disables the filtering UI. By default, it is set to `true` which means that the bound Grid columns can be filtered using the filtering UI. * Locked * Lockable * IncludeInMenu ### Custom Appearance * ClientTemplate - used when the Grid is configured for [Ajax binding](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/binding/ajax-binding). * Template - this is a column that is not bound to a specific field from the data, so it is not sortable or filterable. Template columns can still display data item values. * ClientHeaderTemplate * ClientFooterTemplate * ClientGroupHeaderTemplate * ClientGroupHeaderColumnTemplate * HtmlAttributes * HeaderHtmlAttributes * FooterHtmlAttributes ```Razor HtmlHelper @( Html.Kendo().Grid() .Name("grid") .Columns(columns => { // Define a column which will display the value of the ProductID property. columns.Bound(product => product.ProductID); // Define the column title to be different than the field name. columns.Bound(product => product.ProductName).Title("Product Name"); // Define the column to use a standard date format columns.Bound(product => product.OrderDate).Format("{0:d}"); // Define a template column. It needs a templated razor delegate. columns.Template(@ @Html.ActionLink("Edit", "Home", new { id = item.ProductID }) ); // Define a command column with a "Destroy" button. columns.Command(commands => { commands.Destroy(); }); }) ) ``` ```JavaScript ``` The [`Columns`](https://www.telerik.com/aspnet-mvc/documentation/api/kendo.mvc.ui.fluent/gridbuilder#columnssystemaction) method configures the Grid columns. If not used, the Grid creates a column for every public property of the model. * A [Kendo UI for jQuery template](https://docs.telerik.com/kendo-ui/framework/templates/overview) that specifies how the column is displayed. > note The `ClientTemplate` is used when the Grid is configured for [Ajax binding](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/binding/ajax-binding) or when [server binding](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/binding/server-binding) is combined with client-side data operations - when [`ServerOperation` is set to `false`](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/datasource/overview#enabling-client-data-processing). Client templates defined in server-side code are URL encoded before they are sent to the client. As a result, a `+` (plus) sign used in a binding expression is lost - for example, `"#= 3 + 5 #"`. To work around this issue, use either of the following approaches: * Use an auxiliary JavaScript function in the global scope that returns the desired value - for example, `"#= auxFunction(3, 5) #"`. * Encode the `+` (plus) sign - for example, `"#= 3 %2b 5 #"`. ```Razor HtmlHelper @(Html.Kendo().Grid() .Name("grid") .Columns(columns => { columns.Bound(product => product.ProductName).ClientTemplate("#:ProductName #"); }) .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("Products_Read", "Home")) ) ) ``` ## Features * [Widths](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/columns/widths) * [Column Virtualization](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/columns/virtualization) * [Resizing](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/columns/resizing) * [Reordering](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/columns/reordering) * [Multi-Column Headers](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/columns/multicolumn-headers) * [ForeignKey Column](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/columns/foreignkey-column) * [Custom Commands](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/columns/custom-commands) * [Locked Columns](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/columns/locked)