Bound Column Settings
A bound column is declared through the Bound method, which specifies a data field.
The Columns is part of Telerik UI for ASP.NET MVC, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The data field names must be valid JavaScript identifiers and contain neither spaces, nor special characters. The first character should be a letter.
Bound columns support many settings and amongst the most used are the following settings:
For Appearance
- Encoded - configures the HTML encoding of the bound property value. By default, it is set to
truewhich 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.
- Title - sets the text displayed in the header of the column. By default, the property name is used. The
Titlemust not include non-encoded HTML content. Use aClientHeaderTemplateinstead. - 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/field that is used to group the data in the Grid should be hidden from the displayed columns. By default, it is set to
false. If set totruethe column will be hidden when the Grid is groupd via user interaction. The column will be displayed again if interaction to ungroup by it is performed.
For Functionality
- Groupable - enables or disables the dragging of the column header to group by its bound property. By default, it is set to
truewhich 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
- Sortable
- Filterable - enables or disables the filtering UI. By default, it is set to
truewhich 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.
- Template - This is a column that is not bound to a specific field from the data, so it is not sortable, nor filterable. Nevertheless, template columns can still display data item values.
- ClientHeaderTemplate
- ClientFooterTemplate
- ClientGroupHeaderTemplate
- ClientGroupHeaderColumnTemplate
- HtmlAttributes
- HeaderHtmlAttributes
- FooterHtmlAttributes
@( Html.Kendo().Grid<Product>()
.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(@<text>
@Html.ActionLink("Edit", "Home", new { id = item.ProductID })
</text>);
// Define a command column with a "Destroy" button.
columns.Command(commands =>
{
commands.Destroy();
});
})
)
<script>
function calculateField(data) {
return data.UnitPrice * data.UnitsInStock;
}
</script>
The Columns 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 which specifies the way the column is displayed.
The
ClientTemplateis used when the Grid is configured for Ajax binding or when server binding is combined with client-side data operations^—whenServerOperationis set tofalse.Client templates defined in server-side code are URL encoded before they are sent to the client. As a result, a
+(plus) sign, which is used inside a binding expression, is lost—for example,"#= 3 + 5 #".To work around this issue, use either f the following approaches:
- Use an auxiliary JavaScript function in the global scope, which returns the desired value—for example,
"#= auxFunction(3, 5) #". - Encode the
+(plus) sign—for example,"#= 3 %2b 5 #".
- Use an auxiliary JavaScript function in the global scope, which returns the desired value—for example,
@(Html.Kendo().Grid<Product>()
.Name("grid")
.Columns(
{
columns.Bound(product => product.ProductName).ClientTemplate("<strong>#:ProductName #</strong>");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Home"))
)
)