New to Telerik UI for ASP.NET Core? Download free 30-day trial

GridBuilder

Defines the fluent API for configuring the Kendo UI Grid

Properties

WriteAction - Func

Methods

EnableCustomBinding(System.Boolean)

If set to true the grid will perform custom binding.

Parameters

value - System.Boolean

If true enables custom binding.

Example


            @(Html.Kendo().Grid<Product>()
                .Name("grid")
                .EnableCustomBinding(true)
                .DataSource(dataSource =>
                    // configure the data source
                    dataSource
                        .Ajax()
                        .Read(read => read.Action("Products_Read", "Home"))
                )
            )

BindTo(System.Collections.Generic.IEnumerable)

Binds the grid to a list of objects

Parameters

dataSource - System.Collections.Generic.IEnumerable<T>

The data source.

Example


            @model IEnumerable<Product>
            @(Html.Kendo().Grid<Product>()
                .Name("grid")
                .BindTo(Model)
            )

BindTo(System.Collections.IEnumerable)

Binds the grid to a list of objects

Parameters

dataSource - System.Collections.IEnumerable

The data source.

Example


            @model IEnumerable;
            @(Html.Kendo().Grid<Product>()
                .Name("grid")
                .BindTo(Model)
            )

Editable(System.Action)

Sets the editing configuration of the grid.

Parameters

configurator - System.Action<GridEditingSettingsBuilder>

The lambda which configures the editing

Example


             @(Html.Kendo().Grid<Product>()
                .Name("Grid")
                .DataSource(dataSource =>
                    // configure the data source
                    dataSource
                     .Ajax()
                     .Read(read => read.Action("Products_Read", "Home"))
                )
               .Editable(editing => editing.Mode(GridEditMode.PopUp))
            )

Editable(Kendo.Mvc.UI.GridEditMode)

Sets the edit mode of the grid.

Parameters

editMode - GridEditMode

The lambda which configures the editing

Example


             @(Html.Kendo().Grid<Product>()
                .Name("Grid")
                .DataSource(dataSource =>
                    // configure the data source
                    dataSource
                     .Ajax()
                     .Read(read => read.Action("Products_Read", "Home"))
                )
               .Editable(editing => editing.Mode(GridEditMode.PopUp))
            )

Editable()

Sets the editing configuration of the grid.

Example


             @(Html.Kendo().Grid<Product>()
                .Name("Grid")
                .DataSource(dataSource =>
                    // configure the data source
                    dataSource
                     .Ajax()
                     .Read(read => read.Action("Products_Read", "Home"))
                )
               .Editable(editing => editing.Mode(GridEditMode.PopUp))
            )

DataSource(System.Action)

Sets the data source configuration of the grid.

Parameters

configurator - System.Action<DataSourceBuilder>

The lambda which configures the data source

Example


            @(Html.Kendo().Grid<Product>()
                .Name("grid")
                .DataSource(dataSource =>
                    // configure the data source
                    dataSource
                        .Ajax()
                        .Read(read => read.Action("Products_Read", "Home"))
                )
            )

DataSource(System.String)

Sets the ID of the DataSource widget used by the Grid.

Parameters

dataSourceId - System.String

The name of the DataSource

Example


            @(Html.Kendo().Grid<Product>()
                .Name("grid")
                .DataSource("dataSource1")
            )
            @(Html.Kendo().DataSource<Product>()
                .Name("dataSource1")
                .Ajax(ds=>ds
                    .Read(read => read.Action("Products_Read", "Home"))
                    .PageSize(20)
                )
            )

Pageable()

Enables grid paging.

Example


             @(Html.Kendo().Grid<Product>()
                 .Name("grid")
                 .Pageable()
                 .DataSource(dataSource =>
                     // configure the data source
                     dataSource
                         .Ajax()
                         .Read(read => read.Action("Products_Read", "Home"))
                 )
             )

Pageable(System.Action)

Sets the paging configuration of the grid.

Parameters

configurator - System.Action<GridPageableSettingsBuilder>

The lambda which configures the paging

Example


             @(Html.Kendo().Grid<Product>()
                 .Name("grid")
                 .Pageable(paging =>
                     paging.Refresh(true)
                 )
                 .DataSource(dataSource =>
                     // configure the data source
                     dataSource
                         .Ajax()
                         .Read(read => read.Action("Products_Read", "Home"))
                 )
             )

Filterable()

Enables grid filtering.

Example


             @(Html.Kendo().Grid<Product>()
                 .Name("grid")
                 .Filterable()
                 .DataSource(dataSource =>
                     // configure the data source
                     dataSource
                         .Ajax()
                         .Read(read => read.Action("Products_Read", "Home"))
                 )
             )

Filterable(System.Action)

Sets the filtering configuration of the grid.

Parameters

configurator - System.Action<GridFilterableSettingsBuilder>

The lambda which configures the filtering

Example


             @(Html.Kendo().Grid<Product>()
                 .Name("grid")
                 .Filterable(filtering => filtering.Enabled(true))
                 .DataSource(dataSource =>
                     // configure the data source
                     dataSource
                         .Ajax()
                         .Read(read => read.Action("Products_Read", "Home"))
                 )
             )

Resizable(System.Action)

Sets the resizing configuration of the grid.

Parameters

configurator - System.Action<GridResizingSettingsBuilder>

The lambda which configures the resizing

Example


             @(Html.Kendo().Grid<Product>()
                .Name("Grid")
                .DataSource(dataSource =>
                    // configure the data source
                    dataSource
                     .Ajax()
                     .Read(read => read.Action("Products_Read", "Home"))
                )
               .Resizable(resizing => resizing.Columns(true))
            )

Reorderable(System.Action)

Sets the reordering configuration of the grid.

Parameters

configurator - System.Action<GridReorderingSettingsBuilder>

The lambda which configures the reordering

Example


             @(Html.Kendo().Grid<Product>()
                .Name("Grid")
                .DataSource(dataSource =>
                    // configure the data source
                    dataSource
                     .Ajax()
                     .Read(read => read.Action("Products_Read", "Home"))
                )
               .Reorderable(reordering => reordering.Columns(true))
            )

Selectable()

Enables grid row selection.

Example


             @(Html.Kendo().Grid<Product>()
                 .Name("grid")
                 .Selectable()
                 .DataSource(dataSource =>
                     // configure the data source
                     dataSource
                         .Ajax()
                         .Read(read => read.Action("Products_Read", "Home"))
                 )
             )

Selectable(System.Action)

Sets the selection configuration of the grid.

Parameters

configurator - System.Action<GridSelectionSettingsBuilder>

The lambda which configures the selection

Example


             @(Html.Kendo().Grid<Product>()
                 .Name("grid")
                 .Selectable(selection => selection.Enabled(true))
                 .DataSource(dataSource =>
                     // configure the data source
                     dataSource
                         .Ajax()
                         .Read(read => read.Action("Products_Read", "Home"))
                 )
             )

Scrollable()

Enables grid scrolling.

Example


             @(Html.Kendo().Grid<Product>()
                 .Name("grid")
                 .Scrollable()
                 .DataSource(dataSource =>
                     // configure the data source
                     dataSource
                         .Ajax()
                         .Read(read => read.Action("Products_Read", "Home"))
                 )
             )

Scrollable(System.Action)

Sets the scrolling configuration of the grid.

Parameters

configurator - System.Action<GridScrollSettingsBuilder>

The lambda which configures the scrolling

Example


             @(Html.Kendo().Grid<Product>()
                 .Name("grid")
                 .Scrollable(scrolling => scrolling.Enabled(true))
                 .DataSource(dataSource =>
                     // configure the data source
                     dataSource
                         .Ajax()
                         .Read(read => read.Action("Products_Read", "Home"))
                 )
             )

Columns(System.Action)

Sets the column configuration of the grid.

Parameters

configurator - System.Action<GridColumnFactory>

The lambda which configures columns

Example


            <%:Html.Kendo().Grid<Product>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(product => product.ProductName).Title("Product Name");
                    columns.Command(command => command.Destroy());
                })
                .DataSource(dataSource =>
                    // configure the data source
                    dataSource
                        .Ajax()
                        .Destroy(destroy => destroy.Action("Products_Destroy", "Home"))
                        .Read(read => read.Action("Products_Read", "Home"))
                )
            %>

Mobile()

Enables the adaptive rendering when viewed on mobile browser

Example


            @(Html.Kendo().Grid<OrderViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderID).Filterable(false);
                    columns.Bound(p => p.Freight);  
                })
                .Mobile()
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Read(read => read.Action("Orders_Read", "Grid"))
                )
            )

Mobile(Kendo.Mvc.UI.MobileMode)

Used to determine if adaptive rendering should be used when viewed on mobile browser

Parameters

type - MobileMode

Defines the type of the Mobile Mode

Example


            @(Html.Kendo().Grid<OrderViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderID).Filterable(false);
                    columns.Bound(p => p.Freight);  
                })
                .Mobile(MobileMode.Phone)
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Read(read => read.Action("Orders_Read", "Grid"))
                )
            )

ToolBar(System.Action)

Sets the toolbar configuration of the grid.

Parameters

configurator - System.Action<GridToolBarCommandFactory>

The lambda which configures the toolbar

Example


             @(Html.Kendo().Grid<Product>()
                .Name("Grid")
                .DataSource(dataSource =>
                    // configure the data source
                    dataSource
                     .Ajax()
                     .Read(read => read.Action("Products_Read", "Home"))
                )
               .ToolBar(commands => commands.Create())
            )

ClientRowTemplate(System.String)

Sets the client-side row template of the grid. The client-side row template must contain a table row element (tr).

Parameters

template - System.String

The template

Example


            @(Html.Kendo().Grid<Product>()
                .Name("grid")
                .DataSource(dataSource =>
                    // configure the data source
                    dataSource
                        .Ajax()
                        .Read(read => read.Action("Products_Read", "Home"))
                )
                .ClientRowTemplate(
                "<tr>" +
                    "<td>#: ProductName #</td>" +
                    "<td>#: UnitsInStock #</td>" +
                "</tr>"
                )
            )

ClientAltRowTemplate(System.String)

Sets the client-side alt row template of the grid. The client-side alt row template must contain a table row element (tr).

Parameters

template - System.String

The template

Example


            @(Html.Kendo().Grid<Product>()
                .Name("grid")
                .DataSource(dataSource =>
                    // configure the data source
                    dataSource
                        .Ajax()
                        .Read(read => read.Action("Products_Read", "Home"))
                )
                .ClientAltRowTemplate(
                "<tr class='k-alt'>" +
                    "<td>#: ProductName #</td>" +
                    "<td>#: UnitsInStock #</td>" +
                "</tr>"
                )
            )

ClientRowTemplate(System.Func)

Parameters

template - System.Func<Grid,String>

ClientAltRowTemplate(System.Func)

Parameters

template - System.Func<Grid,String>

ClientDetailTemplateId(System.String)

Sets the id of the script element which contains the client-side detail template of the grid.

Parameters

id - System.String

The id

Example


            @(Html.Kendo().Grid<Product>()
                .Name("grid")
                .DataSource(dataSource =>
                    // configure the data source
                    dataSource
                        .Ajax()
                        .Read(read => read.Action("Products_Read", "Home"))
                )
                .ClientDetailTemplateId("detail-template")
            )
            <script id="detail-template" type="text/x-kendo-template">
                Product Details:
                <div>Product Name: #: ProductName # </div>
                <div>Units In Stock: #: UnitsInStock #</div>
            </script>

Width(System.Int32)

Sets the width of the grid.

Parameters

pixelWidth - System.Int32

The width of the Grid

Example


            @(Html.Kendo().Grid<OrderViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderID).Filterable(false);
                    columns.Bound(p => p.Freight);  
                })
                .Width(300px)
                .Scrollable()
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Read(read => read.Action("Orders_Read", "Grid"))
                )
            )

Width(System.String)

Sets the width of the grid.

Parameters

value - System.String

The width of the Grid

Example


            @(Html.Kendo().Grid<OrderViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderID).Filterable(false);
                    columns.Bound(p => p.Freight);  
                })
                .Width("300px")
                .Scrollable()
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Read(read => read.Action("Orders_Read", "Grid"))
                )
            )

Height(System.Int32)

Sets the height of the grid.

Parameters

pixelHeight - System.Int32

The height of the grid. Numeric values are treated as pixels.

Example


             @(Html.Kendo().Grid<OrderViewModel>()
                 .Name("grid")
                 .Columns(columns =>
                 {
                     columns.Bound(p => p.OrderID).Filterable(false);
                     columns.Bound(p => p.Freight);
                 })
                 .Height(400)
                 .Pageable()
                 .DataSource(dataSource => dataSource
                     .Ajax()
                     .PageSize(10)
                     .Read(read => read.Action("Orders_Read", "Grid"))
                 )
             )

Height(System.String)

Sets the height of the grid.

Parameters

value - System.String

The height of the grid.

Example


             @(Html.Kendo().Grid<OrderViewModel>()
                 .Name("grid")
                 .Columns(columns =>
                 {
                     columns.Bound(p => p.OrderID).Filterable(false);
                     columns.Bound(p => p.Freight);
                 })
                 .Height("400px")
                 .Pageable()
                 .DataSource(dataSource => dataSource
                     .Ajax()
                     .PageSize(10)
                     .Read(read => read.Action("Orders_Read", "Grid"))
                 )
             )

Messages(System.Action)

Configures the grid messages.

Parameters

configurator - System.Action<GridMessagesBuilder>

Defines the text of the messages used by the Grid

Example


            @(Html.Kendo().Grid<OrderViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderID).Filterable(false);
                    columns.Bound(p => p.Freight);  
                })
                .Messages(m => m.ExpandCollapseColumnHeader("E/C"))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Read(read => read.Action("Orders_Read", "Grid"))
                )
            )

AllowCopy(System.Action)

If set to true and selection of the Grid is enabled the user could copy the selection into the clipboard and paste it into Excel or other similar programs that understand TSV/CSV formats. By default allowCopy is disabled and the default format is TSV. Can be set to a JavaScript object which represents the allowCopy configuration.

Parameters

configurator - System.Action<GridAllowCopySettingsBuilder>

The configurator for the allowcopy setting.

AllowCopy()

If set to true and selection of the Grid is enabled the user could copy the selection into the clipboard and paste it into Excel or other similar programs that understand TSV/CSV formats. By default allowCopy is disabled and the default format is TSV. Can be set to a JavaScript object which represents the allowCopy configuration.

AllowCopy(System.Boolean)

If set to true and selection of the Grid is enabled the user could copy the selection into the clipboard and paste it into Excel or other similar programs that understand TSV/CSV formats. By default allowCopy is disabled and the default format is TSV. Can be set to a JavaScript object which represents the allowCopy configuration.

Parameters

enabled - System.Boolean

Enables or disables the allowcopy option.

AutoBind(System.Boolean)

If set to false, the Grid will not bind to the data source during initialization, i.e. it will not call the fetch method of the dataSource instance. In such scenarios data binding will occur when the change event of the dataSource instance is fired. By default, autoBind is set to true and the widget will bind to the data source specified in the configuration.

Parameters

value - System.Boolean

The value for AutoBind

ColumnResizeHandleWidth(System.Double)

Defines the width of the column resize handle in pixels. Apply a larger value for easier grasping.

Parameters

value - System.Double

The value for ColumnResizeHandleWidth

ColumnMenu(System.Action)

If set to true the grid will display the column menu when the user clicks the chevron icon in the column headers. The column menu allows the user to show and hide columns, filter and sort (if filtering and sorting are enabled). By default the column menu is not enabled.Can be set to a JavaScript object which represents the column menu configuration.

Parameters

configurator - System.Action<GridColumnMenuSettingsBuilder>

The configurator for the columnmenu setting.

ColumnMenu()

If set to true the grid will display the column menu when the user clicks the chevron icon in the column headers. The column menu allows the user to show and hide columns, filter and sort (if filtering and sorting are enabled). By default the column menu is not enabled.Can be set to a JavaScript object which represents the column menu configuration.

ColumnMenu(System.Boolean)

If set to true the grid will display the column menu when the user clicks the chevron icon in the column headers. The column menu allows the user to show and hide columns, filter and sort (if filtering and sorting are enabled). By default the column menu is not enabled.Can be set to a JavaScript object which represents the column menu configuration.

Parameters

enabled - System.Boolean

Enables or disables the columnmenu option.

EncodeTitles(System.Boolean)

If set to true the column title will be HTML-encoded before it is displayed. If set to false the column title will be displayed as is.

Parameters

value - System.Boolean

The value for EncodeTitles

EncodeTitles()

If set to true the column title will be HTML-encoded before it is displayed. If set to false the column title will be displayed as is.

Excel(System.Action)

Configures the Kendo UI Grid Excel export settings.

Parameters

configurator - System.Action<GridExcelSettingsBuilder>

The configurator for the excel setting.

Groupable(System.Action)

If set to true the user could group the grid by dragging the column header cells. By default grouping is disabled.Can be set to a JavaScript object which represents the grouping configuration.

Parameters

configurator - System.Action<GridGroupableSettingsBuilder>

The configurator for the groupable setting.

Groupable()

If set to true the user could group the grid by dragging the column header cells. By default grouping is disabled.Can be set to a JavaScript object which represents the grouping configuration.

Groupable(System.Boolean)

If set to true the user could group the grid by dragging the column header cells. By default grouping is disabled.Can be set to a JavaScript object which represents the grouping configuration.

Parameters

enabled - System.Boolean

Enables or disables the groupable option.

If set to true the use could navigate the widget using the keyboard navigation. By default keyboard navigation is disabled.

Parameters

value - System.Boolean

The value for Navigatable

If set to true the use could navigate the widget using the keyboard navigation. By default keyboard navigation is disabled.

NoRecords(System.Action)

If set to true and current view contains no records, message similar to "No records available" will be displayed. By default this option is disabled.

Parameters

configurator - System.Action<GridNoRecordsSettingsBuilder>

The configurator for the norecords setting.

NoRecords()

If set to true and current view contains no records, message similar to "No records available" will be displayed. By default this option is disabled.

NoRecords(System.Boolean)

If set to true and current view contains no records, message similar to "No records available" will be displayed. By default this option is disabled.

Parameters

enabled - System.Boolean

Enables or disables the norecords option.

Pdf(System.Action)

Configures the Kendo UI Grid PDF export settings.

Parameters

configurator - System.Action<GridPdfSettingsBuilder>

The configurator for the pdf setting.

PersistSelection(System.Boolean)

Sets a value indicating whether the selection will be persisted when sorting, paging, filtering and etc are performed.

Parameters

value - System.Boolean

The value for PersistSelection

PersistSelection()

Sets a value indicating whether the selection will be persisted when sorting, paging, filtering and etc are performed.

Search(System.Action)

Configures the Kendo UI Grid search bar settings.

Parameters

configurator - System.Action<GridSearchSettingsBuilder>

The configurator for the search setting.

Sortable(System.Action)

If set to true the user could sort the grid by clicking the column header cells. By default sorting is disabled.Can be set to a JavaScript object which represents the sorting configuration.

Parameters

configurator - System.Action<GridSortableSettingsBuilder>

The configurator for the sortable setting.

Sortable()

If set to true the user could sort the grid by clicking the column header cells. By default sorting is disabled.Can be set to a JavaScript object which represents the sorting configuration.

Sortable(System.Boolean)

If set to true the user could sort the grid by clicking the column header cells. By default sorting is disabled.Can be set to a JavaScript object which represents the sorting configuration.

Parameters

enabled - System.Boolean

Enables or disables the sortable option.

LoaderType(Kendo.Mvc.UI.GridLoaderType)

Defines the type of the loader that will be displayed while loading the data

Parameters

value - GridLoaderType

The value for LoaderType

Events(System.Action)

Configures the client-side events.

Parameters

configurator - System.Action<GridEventBuilder>

The client events action.

Example


            @(Html.Kendo().Grid()
                  .Name("Grid")
                  .Events(events => events
                      .BeforeEdit("onBeforeEdit")
                  )
            )

ToComponent()

Returns the internal view component.

Expression(System.String)

Sets the name of the component.

Parameters

modelExpression - System.String

Explorer(Microsoft.AspNetCore.Mvc.ViewFeatures.ModelExplorer)

Sets the name of the component.

Parameters

modelExplorer - Microsoft.AspNetCore.Mvc.ViewFeatures.ModelExplorer

Name(System.String)

Sets the name of the component.

Parameters

componentName - System.String

The name.

Deferred(System.Boolean)

Suppress initialization script rendering. Note that this options should be used in conjunction with

Parameters

deferred - System.Boolean

HtmlAttributes(System.Object)

Sets the HTML attributes.

Parameters

attributes - System.Object

The HTML attributes.

HtmlAttributes(System.Collections.Generic.IDictionary)

Sets the HTML attributes.

Parameters

attributes - System.Collections.Generic.IDictionary<String,Object>

The HTML attributes.

Render()

Renders the component in place.

ToHtmlString()

WriteTo(System.IO.TextWriter,System.Text.Encodings.Web.HtmlEncoder)

Parameters

writer - System.IO.TextWriter
encoder - System.Text.Encodings.Web.HtmlEncoder

ToClientTemplate()

In this article
Not finding the help you need?