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

GridBuilder

The fluent API for configuring Kendo UI Grid for ASP.NET MVC.

Methods

TableHtmlAttributes(System.Object)

Parameters

attributes - System.Object

TableHtmlAttributes(System.Collections.Generic.IDictionary)

Parameters

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

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 id of the DataSource

Example


            @(Html.Kendo().Grid<Product>()
                .Name("grid")
                .DataSource("dataSource")
            )

Excel(System.Action)

Configures the Excel export settings.

Parameters

configurator - System.Action<GridExcelBuilder>

Example


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

Pdf(System.Action)

Configures the PDF export settings.

Parameters

configurator - System.Action<PDFSettingsBuilder>

Example


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

DetailTemplate(System.Action)

Sets the server-side detail template of the grid in ASPX views.

Parameters

codeBlockTemplate - System.Action<T>

The template as a code block

Example


            @model IEnumerable<Product>
            @(Html.Kendo().Grid(Model)
                .Name("grid")
                .DetailTemplate(product => {
                    )
                       Product Details:
                       <div>Product Name: @( product.ProductName )</div>
                       <div>Units In Stock: @( product.UnitsInStock )</div>
                    (
                })
                .Render();
            )

DetailTemplate(System.Func)

Sets the server-side detail template of the grid in Razor views.

Parameters

inlineTemplate - System.Func<T,Object>

The template

Example


            @model IEnumerable<Product>
            @(Html.Kendo().Grid(Model)
                .Name("grid")
                .DetailTemplate(@<text>
                   Product Details:
                   <div>Product Name: @product.ProductName</div>
                   <div>Units In Stock: @product.UnitsInStock</div>
                </text>)
            )

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>

RowTemplate(System.Action)

Sets the server-side row template of the grid in ASPX views.

Parameters

codeBlockTemplate - System.Action<T,Grid>

The template as a code block

Example


             @(@Page Inherits="System.Web.Mvc.ViewPage<IEnumerable<Product>>" )
             @( Html.Kendo().Grid(Model)
                .Name("grid")
                .RowTemplate((product, grid) =>
                {
                    )
                        <div>Product Name: @( product.ProductName )</div>
                        <div>Units In Stock: @( product.UnitsInStock )</div>
                    (
                })
             )

RowTemplate(System.Action)

Sets the server-side row template of the grid in ASPX views.

Parameters

codeBlockTemplate - System.Action<T>

The template as a code block

Example


             @(@Page Inherits="System.Web.Mvc.ViewPage<IEnumerable<Product>>" )
             @( Html.Kendo().Grid(Model)
                .Name("grid")
                .RowTemplate((product, grid) =>
                {
                    )
                        <div>Product Name: @( product.ProductName )</div>
                        <div>Units In Stock: @( product.UnitsInStock )</div>
                    (
                })
             )

RowTemplate(System.Func)

Sets the server-side row template of the grid in Razor views.

Parameters

inlineTemplate - System.Func<T,Object>

The template

Example


            @model IEnumerable<Product>
            @(Html.Kendo().Grid(Model)
                .Name("grid")
                .RowTemplate(@<text>
                   <div>Product Name: @product.ProductName</div>
                   <div>Units In Stock: @product.UnitsInStock</div>
                </text>)
            )

RowTemplate(System.Func)

Sets the server-side row template of the grid in Razor views.

Parameters

inlineTemplate - System.Func<Grid,Func>

The template

Example


            @model IEnumerable<Product>
            @(Html.Kendo().Grid(Model)
                .Name("grid")
                .RowTemplate(@<text>
                   <div>Product Name: @product.ProductName</div>
                   <div>Units In Stock: @product.UnitsInStock</div>
                </text>)
            )

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>

AutoBind(System.Boolean)

If set to false the widget will not bind to the data source during initialization; the default value is true. Setting AutoBind to false is supported in ajax-bound mode.

Parameters

value - System.Boolean

If true the grid will be automatically data bound, otherwise false

Example


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

AllowCopy(System.Boolean)

If set to true users can copy the selection to the clipboard and paste it to Excel or similar spreadsheet applications. Setting AllowCopy to true requires Selectable to be enabled.

Parameters

value - System.Boolean

If true the grid will be automatically data bound, otherwise false

Example


            @(Html.Kendo().Grid<Product>()
                .Name("grid")
                .AllowCopy(false)
                .Selectable(selectable => selectable
                         .Mode(GridSelectionMode.Multiple)
                         .Type(GridSelectionType.Cell))
                .DataSource(dataSource =>
                    // configure the data source
                    dataSource
                        .Ajax()
                        .Read(read => read.Action("Products_Read", "Home"))
                )
            )

AllowCopy(System.Action)

Parameters

configurator - System.Action<GridAllowCopyBuilder>

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

ColumnResizeHandleWidth(System.Int32)

Sets the width of the column resize handle. Apply a larger value for easier grasping.

Parameters

width - System.Int32

width in pixels

Example


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

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).Rows(true))
            )

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

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

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

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

RowAction(System.Action)

Sets a lambda which is executed for every table row rendered server-side by the grid.

Parameters

configurator - System.Action<GridRow>

The lambda which will be executed for every table row

Example


            @model IEnumerable<Product>
            @(Html.Kendo().Grid(Model)
                .Name("grid")
                .RowAction(row =>
                {
                    // "DataItem" is the Product instance to which the current row is bound
                    if (row.DataItem.UnitsInStock > 10)
                    {
                        //Set the background of the entire row
                        row.HtmlAttributes["style"] = "background:red;";
                    }
                });
            )

CellAction(System.Action)

Sets a lambda which is executed for every table cell rendered server-side by the grid.

Parameters

configurator - System.Action<GridCell>

The lambda which will be executed for every table cell

Example


            @model IEnumerable<Product>
            @(Html.Kendo().Grid(Model)
                .Name("grid")
                .CellAction(cell =>
                {
                   if (cell.Column.Member == "UnitsInStock")
                   {
                       if (cell.DataItem.UnitsInStock > 10)
                       {
                           //Set the background of this cell only
                           cell.HtmlAttributes["style"] = "background:red;";
                       }
                   }
                })
            )

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

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

Sortable()

Enables grid column sorting.

Example


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

Sortable(System.Action)

Parameters

configurator - System.Action<GridSortSettingsBuilder>

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)

Parameters

configurator - System.Action<GridSelectionSettingsBuilder>

PrefixUrlParameters(System.Boolean)

If set to true the grid will prefix the query string parameters with its name during server binding. By default the grid will prefix the query string parameters.

Parameters

prefix - System.Boolean

Example


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

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

ColumnMenu()

Enables the grid column menu.

Example


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

ColumnMenu(System.Action)

Sets the column menu configuration of the grid.

Parameters

configurator - System.Action<GridColumnMenuSettingsBuilder>

The lambda which configures the column menu

Example


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

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)

Parameters

configurator - System.Action<GridScrollSettingsBuilder>

Enables grid keyboard navigation.

Example


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

Sets the keyboard navigation configuration of the grid.

Parameters

configurator - System.Action<GridNavigatableSettingsBuilder>

The lambda which configures the keyboard navigation

Example


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

Events(System.Action)

Sets the event configuration of the grid.

Parameters

configurator - System.Action<GridEventBuilder>

The lambda which configures the events

Example


            @(Html.Kendo().Grid<Product>()
                .Name("grid")
                .DataSource(dataSource =>
                    // configure the data source
                    dataSource
                        .Ajax()
                        .Read(read => read.Action("Products_Read", "Home"))
                )
                .Events(events => events.DataBound("grid_dataBound"))
            )
            <script>
            function grid_dataBound(e) {
                // handle the dataBound event
            }
            </script>

Groupable(System.Action)

Sets the grouping configuration of the grid.

Parameters

configurator - System.Action<GridGroupingSettingsBuilder>

The lambda which configures the grouping

Example


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

Groupable()

Sets the grouping configuration of the grid.

Example


             @(Html.Kendo().Grid<Product>()
                 .Name("grid")
                 .Groupable(grouping => grouping.Enabled(true))
                 .DataSource(dataSource =>
                     // configure the data source
                     dataSource
                         .Ajax()
                         .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"))
                )
            )

NoRecords(System.Action)

Sets the noRecords configuration of the grid.

Parameters

configurator - System.Action<GridNoRecordsSettingsBuilder>

The lambda which configures the noRecords

Example


            @(Html.Kendo().Grid<OrderViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderID).Filterable(false);
                    columns.Bound(p => p.Freight);  
                })
                .NoRecords(n => n.Template("No data available on current page. Current page is: #=this.dataSource.page()#"))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                )
            )

NoRecords()

Sets the noRecords configuration of the grid.

Example


            @(Html.Kendo().Grid<OrderViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderID).Filterable(false);
                    columns.Bound(p => p.Freight);  
                })
                .NoRecords(n => n.Template("No data available on current page. Current page is: #=this.dataSource.page()#"))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                )
            )

NoRecords(System.String)

Enables grid noRecords and sets it's message.

Parameters

text - System.String

The message used for noRecords

Example


            @(Html.Kendo().Grid<OrderViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderID).Filterable(false);
                    columns.Bound(p => p.Freight);  
                })
                .NoRecords("No records")
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                )
            )

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

Example


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

PersistSelection()

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

Example


            @(Html.Kendo().Grid<OrderViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderID).Filterable(false);
                    columns.Bound(p => p.Freight);  
                })
                .Scrollable()
                .PersistSelection(true)
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .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"))
                )
            )

Search(System.Action)

Configures the Kendo UI Grid search bar settings.

Parameters

configurator - System.Action<GridSearchSettingsBuilder>

The configurator for the search setting.

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(300)
                .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"))
                 )
             )

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

Example


            @(Html.Kendo().Grid<OrderViewModel>()
                .Name("grid")
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("Orders_Read", "Grid"))
                )
                .EncodeTitles(true)
            )

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

Example


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

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.

Example


            @(Html.Kendo().Grid<OrderViewModel>()
                .Name("grid")
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("Orders_Read", "Grid"))
                )
                .EncodeTitles(true)
            )

ToComponent()

Returns the internal view component.

Name(System.String)

Sets the name of the component.

Parameters

componentName - System.String

The name of the component.

Example


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

Deferred(System.Boolean)

Suppress initialization script rendering. Note that this options should be used in conjunction with Kendo.Mvc.UI.Fluent.WidgetFactory.DeferredScripts(System.Boolean)

Parameters

deferred - System.Boolean

ModelMetadata(System.Web.Mvc.ModelMetadata)

Uses the Metadata of the Model.

Parameters

modelMetadata - System.Web.Mvc.ModelMetadata

The metadata set for the Model

HtmlAttributes(System.Object)

Sets the HTML attributes.

Parameters

attributes - System.Object

The HTML attributes.

HtmlAttributes(System.Collections.Generic.IDictionary)

Parameters

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

Render()

Renders the component.

Example


            @(@Page Inherits="System.Web.Mvc.ViewPage<IEnumerable<Product>>" )
            @( Html.Kendo().Grid(Model)
                .Name("grid")
                .DetailTemplate(product => {
                    )
                       Product Details:
                       <div>Product Name: @( product.ProductName )</div>
                       <div>Units In Stock: @( product.UnitsInStock )</div>
                    @(
                })
                .Render();
            )

ToHtmlString()

ToClientTemplate()

In this article
Not finding the help you need?