Kendo.Mvc.UI.Fluent.GridBuilder

Defines the fluent API for configuring the Kendo UI Grid

Methods

EnableCustomBinding(System.Boolean)

If set to true the grid will perform custom binding.

Parameters

value System.Boolean

If true enables custom binding.

Example (Razor)

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

Binds the grid to a list of objects

Parameters

dataSource System.Collections.Generic.IEnumerable<T>

The data source.

Example (Razor)

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

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

Editable(System.Action<Kendo.Mvc.UI.Fluent.GridEditingSettingsBuilder<T>>)

Sets the editing configuration of the grid.

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.GridEditingSettingsBuilder>

The lambda which configures the editing

Example (Razor)

@(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 Kendo.Mvc.UI.GridEditMode

The lambda which configures the editing

Example (Razor)

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

Enables grid editing.

Example (Razor)

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

DataSource(System.Action<Kendo.Mvc.UI.Fluent.DataSourceBuilder<T>>)

Sets the data source configuration of the grid.

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.DataSourceBuilder>

The lambda which configures the data source

Example (Razor)

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

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

@(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<Kendo.Mvc.UI.Fluent.GridPageableSettingsBuilder>)

Sets the paging configuration of the grid.

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.GridPageableSettingsBuilder>

The lambda which configures the paging

Example (Razor)

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

@(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<Kendo.Mvc.UI.Fluent.GridFilterableSettingsBuilder>)

Sets the filtering configuration of the grid.

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.GridFilterableSettingsBuilder>

The lambda which configures the filtering

Example (Razor)

@(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<Kendo.Mvc.UI.Fluent.GridResizingSettingsBuilder>)

Sets the resizing configuration of the grid.

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.GridResizingSettingsBuilder>

The lambda which configures the resizing

Example (Razor)

@(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<Kendo.Mvc.UI.Fluent.GridReorderingSettingsBuilder>)

Sets the reordering configuration of the grid.

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.GridReorderingSettingsBuilder>

The lambda which configures the reordering

Example (Razor)

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

@(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<Kendo.Mvc.UI.Fluent.GridSelectionSettingsBuilder>)

Sets the selection configuration of the grid.

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.GridSelectionSettingsBuilder>

The lambda which configures the selection

Example (Razor)

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

@(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<Kendo.Mvc.UI.Fluent.GridScrollSettingsBuilder>)

Sets the scrolling configuration of the grid.

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.GridScrollSettingsBuilder>

The lambda which configures the scrolling

Example (Razor)

@(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<Kendo.Mvc.UI.Fluent.GridColumnFactory<T>>)

Sets the column configuration of the grid.

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.GridColumnFactory>

The lambda which configures columns

Example (ASPX)

<%: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

Mobile(Kendo.Mvc.UI.MobileMode)

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

Parameters

type Kendo.Mvc.UI.MobileMode

ToolBar(System.Action<Kendo.Mvc.UI.Fluent.GridToolBarCommandFactory<T>>)

Sets the toolbar configuration of the grid.

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.GridToolBarCommandFactory>

The lambda which configures the toolbar

Example (Razor)

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

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

@(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<Kendo.Mvc.UI.Grid<T>,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.Func<Kendo.Mvc.UI.Grid,System.String>

The template

Example (Razor)

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

ClientAltRowTemplate(System.Func<Kendo.Mvc.UI.Grid<T>,System.String>)

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

Parameters

template System.Func<Kendo.Mvc.UI.Grid,System.String>

The template

Example (Razor)

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

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 (Razor)

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

configurator System.Int32

Width(System.String)

Sets the width of the grid.

Parameters

configurator System.String

Height(System.Int32)

Sets the height of the grid.

Parameters

configurator System.Int32

Height(System.String)

Sets the height of the grid.

Parameters

configurator System.String

Messages(System.Action<Kendo.Mvc.UI.Fluent.GridMessagesBuilder>)

Configures the grid messages.

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.GridMessagesBuilder>

AllowCopy(System.Action<Kendo.Mvc.UI.Fluent.GridAllowCopySettingsBuilder<T>>)

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<Kendo.Mvc.UI.Fluent.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<Kendo.Mvc.UI.Fluent.GridColumnMenuSettingsBuilder<T>>)

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<Kendo.Mvc.UI.Fluent.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.

Excel(System.Action<Kendo.Mvc.UI.Fluent.GridExcelSettingsBuilder<T>>)

Configures the Kendo UI Grid Excel export settings.

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.GridExcelSettingsBuilder>

The configurator for the excel setting.

Groupable(System.Action<Kendo.Mvc.UI.Fluent.GridGroupableSettingsBuilder<T>>)

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<Kendo.Mvc.UI.Fluent.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.

Navigatable(System.Boolean)

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

Navigatable

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

NoRecords(System.Action<Kendo.Mvc.UI.Fluent.GridNoRecordsSettingsBuilder<T>>)

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<Kendo.Mvc.UI.Fluent.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<Kendo.Mvc.UI.Fluent.GridPdfSettingsBuilder<T>>)

Configures the Kendo UI Grid PDF export settings.

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.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<Kendo.Mvc.UI.Fluent.GridSearchSettingsBuilder<T>>)

Configures the Kendo UI Grid search bar settings.

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.GridSearchSettingsBuilder>

The configurator for the search setting.

Sortable(System.Action<Kendo.Mvc.UI.Fluent.GridSortableSettingsBuilder<T>>)

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<Kendo.Mvc.UI.Fluent.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.

Events(System.Action<Kendo.Mvc.UI.Fluent.GridEventBuilder>)

Configures the client-side events.

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.GridEventBuilder>

The client events action.

Example (ASPX)

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