ListViewBuilder

Methods

BindTo(System.Collections.Generic.IEnumerable)

Binds the ListView to a list of objects

Parameters

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

The data source.

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                .Name("productsListView")
                .BindTo((IEnumerable<ProductViewModel>) ViewData["Products"])
            )
             

BindTo(System.Collections.IEnumerable)

Binds the ListView to a list of objects

Parameters

dataSource - System.Collections.IEnumerable

The IEnumerable list of objects.

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                .Name("productsListView")
                .BindTo((IEnumerable)ViewData["Products"])
            )
             

ClientTemplateId(System.String)

Specifies ListView item template.

Parameters

templateId - System.String

The Id of the script element which contains the template.

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                    .Name("productsListView")
                    .ClientTemplateId("listViewTemplate")
            )
             

ClientTemplateView(System.Web.Mvc.MvcHtmlString)

Specifies ListView item template.

Parameters

template - System.Web.Mvc.MvcHtmlString

The view which contains the template.

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                    .Name("productsListView")
                    .ClientTemplateView(Html.Partial("listViewTemplate"))
            )
             

ClientTemplateHandler(System.String)

Specifies ListView item template.

Parameters

template - System.String

The function handler which contains the template.

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                        .Name("productsListView")
                        .ClientTemplateHandler("listViewHandler")
            )
             

ClientTemplate(Kendo.Mvc.UI.TemplateBuilder)

Specifies ListView item template.

Parameters

template - TemplateBuilder<TModel>

The template component which contains the template.

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                        .Name("productsListView")
                        .ClientTemplate(Html.Kendo()
                                .Template()
                                .AddHtml("<p>${data.ProductName}</p>")
                        )
            )
             

ClientAltTemplateId(System.String)

Specifies ListView alternating item template.

Parameters

templateId - System.String

The Id of the script element which contains the template.

Example

Razor
 
             @(Html.Kendo().ListView<ProductViewModel>()
                    .Name("productsListView")
                    .ClientAltTemplateId("listViewTemplate")
             )
             

ClientAltTemplateView(System.Web.Mvc.MvcHtmlString)

Specifies ListView alternating item template.

Parameters

template - System.Web.Mvc.MvcHtmlString

The view which contains the template.

Example

Razor
 
             @(Html.Kendo().ListView<ProductViewModel>()
                    .Name("productsListView")
                    .ClientAltTemplateView(Html.Partial("listViewTemplate"));
             )
             

ClientAltTemplateHandler(System.String)

Specifies ListView alternating item template.

Parameters

template - System.String

The view which contains the template.

Example

Razor
 
             @(Html.Kendo().ListView<ProductViewModel>()
                        .Name("productsListView")
                        .ClientAltTemplateHandler("listViewHandler")
             )
             

ClientAltTemplate(Kendo.Mvc.UI.TemplateBuilder)

Specifies ListView alternating item template.

Parameters

template - TemplateBuilder<TModel>

The template component which contains the template.

Example

Razor
 
             @(Html.Kendo().ListView<ProductViewModel>()
                        .Name("productsListView")
                        .ClientAltTemplate(Html.Kendo()
                                .Template()
                                .AddHtml("<p>${data.ProductName}</p>")
                        )
             )
             

Pageable()

Allows paging of the data.

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                    .Name("productsListView")
                    .Pageable()
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Read(read => read.Action("Products_Read", "ListView"))
                        .PageSize(21)
                    )
            )
             

Pageable(System.Action)

Allows paging of the data.

Parameters

pagerAction - System.Action<PageableBuilder>

Use builder to define paging settings.

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                    .Name("productsListView")
                    .Pageable(paging=>paging.Numeric(true).PreviousNext(true).PageSizes(false))
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Read(read => read.Action("Products_Read", "ListView"))
                        .PageSize(21)
                    )
            )
             

Scrollable()

If set the listview will display a scrollbar when the content exceeds the listview height value. By default scrolling is disabled.

Example

Razor
 
             @(Html.Kendo().ListView<ProductViewModel>()
                    .Name("productsLitView")
                    .Scrollable()
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Read(read => read.Action("Products_Read", "ListView"))
                        .PageSize(21)
                    )
            )
             

Scrollable(Kendo.Mvc.UI.ListViewScrollableMode)

In endless scrolling mode the listview should be configured to display a scrollbar. Scrolling to the end of the scrollbar will load more items (equal to the pageSize number) and append them to the listview DOM element utill all items are loaded and displayed.

Parameters

mode - ListViewScrollableMode

The value for Scrollable

Example

Razor
 
             @(Html.Kendo().ListView<ProductViewModel>()
                    .Name("productsLitView")
                    .Scrollable(ListViewScrollableMode.Endless)
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Read(read => read.Action("Products_Read", "ListView"))
                        .PageSize(21)
                    )
            )
             

Enables keyboard navigation.

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                    .Name("productsListView")
                    .Navigatable()
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Read(read => read.Action("Products_Read", "ListView"))
                        .PageSize(21)
                    )
            )
             

Selectable()

Enables single item selection.

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                    .Name("productsListView")
                    .Selectable()
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Read(read => read.Action("Products_Read", "ListView"))
                        .PageSize(21)
                    )
            )
             

Selectable(System.Action)

Enables selection in the specified selection mode.

Parameters

selectionAction - System.Action<ListViewSelectionSettingsBuilder>

Use builder to define the selection mode.

Example

Razor
 
             @(Html.Kendo().ListView<ProductViewModel>()
                    .Name("productsListView")
                    .Selectable(select=>select.Mode(ListViewSelectionMode.Multiple))
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Read(read => read.Action("Products_Read", "ListView"))
                        .PageSize(21)
                    )
            )
             

AriaLabel(System.String)

Sets an aria-label attribute on the ListView content element (the element with role listbox or list).

Parameters

value - System.String

The value for AriaLabel

Example

Razor
 
             @(Html.Kendo().ListView<ProductViewModel>()
                    .Name("productsListView")
                    .AriaLabel("ListView with products")
             )
             

AutoBind(System.Boolean)

Specifies if the ListView should be automatically bound on initial load. This is only possible if AJAX binding is used, and widget is not initialy populated on the server.

Parameters

value - System.Boolean

If true ListView will be automatically data bound, otherwise false

Example

Razor
 
             @(Html.Kendo().ListView<ProductViewModel>()
                    .Name("productsListView")
                    .AutoBind(false)
             )
             

TagName(System.String)

Specifies ListView wrapper element tag name.

Parameters

tagName - System.String

Example

Razor
 
             @(Html.Kendo().ListView<ProductViewModel>()
                    .Name("productsListView")
                    .TagName("div")
             )
             

Editable(System.Action)

Configures the ListView editing settings.

Parameters

configurator - System.Action<ListViewEditingSettingsBuilder>

The editing settings configurator.

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                   .Name("productsListView")
                   .Editable(edit => edit.Enabled(true))
                   .DataSource(dataSource => dataSource
                       .Ajax()
                       .Model(model => model.Id("ProductID"))
                       .Read(read => read.Action("Products_Read", "ListView"))
                       .Update(update => update.Action("Products_Update", "ListView"))
                       .PageSize(21)
                   )
            )
             

Editable()

Configures the ListView editing settings.

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                   .Name("productsListView")
                   .Editable(edit => edit.Enabled(true))
                   .DataSource(dataSource => dataSource
                       .Ajax()
                       .Model(model => model.Id("ProductID"))
                       .Read(read => read.Action("Products_Read", "ListView"))
                       .Update(update => update.Action("Products_Update", "ListView"))
                       .PageSize(21)
                   )
            )
             

Events(System.Action)

Configures the client-side events.

Parameters

configurator - System.Action<ListViewEventBuilder>

The client events action.

Example

Razor
 
             @(Html.Kendo().ListView<ProductViewModel>()
                        .Name("productsListView")
                        .Events(events => events
                            .DataBound("onDataBound")
                        )
             )
             

DataSource(System.Action)

Binds the ListView to a DataSource.

Parameters

configurator - System.Action<ListViewAjaxDataSourceBuilder>

The DataSourceBuilder configurator.

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                .Name("productsListView")
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("Products_Read", "ListView"))
                    .PageSize(21)
                )
            )
             

DataSource(System.String)

Binds the ListView to an existing DataSource instance.

Parameters

dataSourceId - System.String

The name of the client DataSource instance.

Example

Razor
 
            @(Html.Kendo().DataSource<ProductViewModel>()
                .Name("dataSource1")
                .Ajax(dataSource => dataSource
                   .PageSize(10)
                   .Read(read => read.Action("Products_Read", "DataSource"))
                )
            )
            @(Html.Kendo().ListView<ProductViewModel>()
                .Name("productsListView")
                .DataSource("dataSource1")
            )
             

Bordered(System.Boolean)

Renders border around the listview element.

Parameters

value - System.Boolean

The value for Bordered

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                .Name("productsListView")
                .Bordered(true)
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("Products_Read", "ListView"))
                    .PageSize(21)
                )
            )
             

Borders(System.String)

Renders border around the listview items. Valid values are: all: renders borders around listview items.; horizontal: renders top border of listview items. Useful when setting layout: "flex" and flex.direction: column. or vertical: renders top border of listview items. Useful when setting layout: "flex" and flex.direction: row..

Parameters

value - System.String

The value for Borders

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                .Name("productsListView")
                .Borders("horizontal")
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("Products_Read", "ListView"))
                    .PageSize(21)
                )
            )
             

Layout(System.String)

Specify the layout of listview content. Valid options are: flex: This is equivalent to display: flex. It defines a flex container and enables a flex context for all its direct children. Think of flex items as primarily laying out either in horizontal rows or vertical columns. or grid: This is equivalent to display: grid. It defines the element as a grid container and establishes a new grid formatting context for its contents..

Parameters

value - System.String

The value for Layout

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                .Name("productsListView")
                .Layout("flex")
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("Products_Read", "ListView"))
                    .PageSize(21)
                )
            )
             

Flex(System.Action)

Flex layout settings

Parameters

configurator - System.Action<ListViewFlexSettingsBuilder>

The configurator for the flex setting.

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                .Name("productsListView")
                .Flex(flex => flex.Direction("row").Wrap("nowrap"))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("Products_Read", "ListView"))
                    .PageSize(21)
                )
            )
             

Grid(System.Action)

Grid layout settings.

Parameters

configurator - System.Action<ListViewGridSettingsBuilder>

The configurator for the grid setting.

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                .Name("productsListView")
                .Grid(grid => grid.Rows(2).Cols(5).Gutter(false))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("Products_Read", "ListView"))
                    .PageSize(21)
                )
            )
             

ContentElement(System.String)

Defines the type of element that holds the listview content. The default value is "div".

Parameters

value - System.String

The value for ContentElement

Example

Razor
 
            @(Html.Kendo().ListView<ProductViewModel>()
                .Name("productsListView")
                .ContentElement("article")
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("Products_Read", "ListView"))
                    .PageSize(21)
                )
            )
             

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

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

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>

AsModule(System.Boolean)

Specifies whether the initialization script of the component will be rendered as a JavaScript module.

Parameters

value - System.Boolean

Render()

Renders the component.

Example

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

ScriptAttributes(System.Object,System.Boolean)

Sets the JavaScript attributes to the initialization script.

Parameters

attributes - System.Object

The JavaScript attributes.

overrideAttributes - System.Boolean

Argument which determines whether attributes should be overriden.

ScriptAttributes(System.Collections.Generic.IDictionary,System.Boolean)

Sets the JavaScript attributes to the initialization script.

Parameters

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

The JavaScript attributes.

overrideAttributes - System.Boolean

Argument which determines whether attributes should be overriden.

ToHtmlString()

ToClientTemplate()