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.
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)
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.