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 Core, 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.

Download Free 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 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.
• 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/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 to true the 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 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 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 true which means that the bound Grid columns can be filtered using the filtering UI.
• Locked
• Lockable
• IncludeInMenu

Custom Appearance

• ClientTemplate
• 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 only column to use a calculated field
        columns.Template("#=calculateField(data)#");


        // Define a command column with a "Destroy" button.
        columns.Command(commands =>
        {
            commands.Destroy();
        });
    })
)

    <kendo-grid name="grid">
        <columns>
            <column field="ProductID" />
            <column field="ProductName" title="Product Name" />
            <column field="OrderDate" format="{0:d}" />
            <column template="#=calculateField(data)#" />
            <column>
                <commands>
                    <column-command text="Delete" name="destroy"></column-command>
                </commands>
            </column>
        </columns>
    </kendo-grid>

<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 ClientTemplate is used when the Grid is configured for Ajax binding .

  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 #".

            @(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"))
                )
            )

    <kendo-grid name="grid">
        <datasource type="DataSourceTagHelperType.Ajax">
            <transport>
                <read url="@Url.Action("Products_Read", "Home")" />
            </transport>
        </datasource>

        <columns>
            <column field="ProductName" template="<strong>#:ProductName #</strong>" />

        </columns>
    </kendo-grid>

Features

• Widths
• Column Virtualization
• Resizing
• Reordering
• Multi-Column Headers
• ForeignKey Column
• Custom Commands
• Locked Columns