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

ListViewBuilder<T>

Class

Defines the fluent interface for configuring the ListView<T>.

Definition

Namespace:Kendo.Mvc.UI.Fluent

Assembly:Kendo.Mvc.dll

Type Parameters:

Syntax:

public class ListViewBuilder<T> : WidgetBuilderBase<ListView<T>, ListViewBuilder<T>>, IHtmlString where T : class

Inheritance: objectWidgetBuilderBase<ListView<T>, ListViewBuilder<T>>ListViewBuilder<T>

Implements: IHtmlString

Constructors

ListViewBuilder(ListView<T>)

Initializes a new instance of the ListView<T> class.

public ListViewBuilder(ListView<T> component)

Parameters:componentListView<T>

The component.

Methods

AriaLabel(string)

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

public ListViewBuilder<T> AriaLabel(string value)

Parameters:valuestring

The value for AriaLabel

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.AriaLabel("ListView with products")
)

AutoBind(bool)

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.

public ListViewBuilder<T> AutoBind(bool value)

Parameters:valuebool

If true ListView will be automatically data bound, otherwise false

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.AutoBind(false)
)

BindTo(IEnumerable)

Binds the ListView to a list of objects

public ListViewBuilder<T> BindTo(IEnumerable dataSource)

Parameters:dataSourceIEnumerable

The IEnumerable list of objects.

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.BindTo((IEnumerable)ViewData["Products"])
)

BindTo(IEnumerable<T>)

Binds the ListView to a list of objects

public ListViewBuilder<T> BindTo(IEnumerable<T> dataSource)

Parameters:dataSourceIEnumerable<T>

The data source.

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.BindTo((IEnumerable&lt;ProductViewModel&gt;) ViewData["Products"])
)

Bordered(bool)

Renders border around the listview element.

public ListViewBuilder<T> Bordered(bool value)

Parameters:valuebool

The value for Bordered

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.Bordered(true)
.DataSource(dataSource =&gt; dataSource
.Ajax()
.Read(read =&gt; read.Action("Products_Read", "ListView"))
.PageSize(21)
)
)

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

public ListViewBuilder<T> Borders(string value)

Parameters:valuestring

The value for Borders

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.Borders("horizontal")
.DataSource(dataSource =&gt; dataSource
.Ajax()
.Read(read =&gt; read.Action("Products_Read", "ListView"))
.PageSize(21)
)
)

ClientAltTemplate<TModel>(TemplateBuilder<TModel>)

Specifies ListView alternating item template.

public ListViewBuilder<T> ClientAltTemplate<TModel>(TemplateBuilder<TModel> template)

Parameters:templateTemplateBuilder<TModel>

The template component which contains the template.

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.ClientAltTemplate(Html.Kendo()
.Template()
.AddHtml("&lt;p&gt;${data.ProductName}&lt;/p&gt;")
)
)

ClientAltTemplateHandler(string)

Specifies ListView alternating item template.

public ListViewBuilder<T> ClientAltTemplateHandler(string template)

Parameters:templatestringReturns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.ClientAltTemplateHandler("listViewHandler")
)

ClientAltTemplateId(string)

Specifies ListView alternating item template.

public ListViewBuilder<T> ClientAltTemplateId(string templateId)

Parameters:templateIdstring

The Id of the script element which contains the template.

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.ClientAltTemplateId("listViewTemplate")
)

ClientAltTemplateView(MvcHtmlString)

Specifies ListView alternating item template.

public ListViewBuilder<T> ClientAltTemplateView(MvcHtmlString template)

Parameters:templateMvcHtmlString

The view which contains the template.

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.ClientAltTemplateView(Html.Partial("listViewTemplate"));
)

ClientTemplate<TModel>(TemplateBuilder<TModel>)

Specifies ListView item template.

public ListViewBuilder<T> ClientTemplate<TModel>(TemplateBuilder<TModel> template)

Parameters:templateTemplateBuilder<TModel>

The template component which contains the template.

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.ClientTemplate(Html.Kendo()
.Template()
.AddHtml("&lt;p&gt;${data.ProductName}&lt;/p&gt;")
)
)

ClientTemplateHandler(string)

Specifies ListView item template.

public ListViewBuilder<T> ClientTemplateHandler(string template)

Parameters:templatestringReturns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.ClientTemplateHandler("listViewHandler")
)

ClientTemplateId(string)

Specifies ListView item template.

public ListViewBuilder<T> ClientTemplateId(string templateId)

Parameters:templateIdstring

The Id of the script element which contains the template.

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.ClientTemplateId("listViewTemplate")
)

ClientTemplateView(MvcHtmlString)

Specifies ListView item template.

public ListViewBuilder<T> ClientTemplateView(MvcHtmlString template)

Parameters:templateMvcHtmlString

The view which contains the template.

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.ClientTemplateView(Html.Partial("listViewTemplate"))
)

ContentElement(string)

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

public ListViewBuilder<T> ContentElement(string value)

Parameters:valuestring

The value for ContentElement

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.ContentElement("article")
.DataSource(dataSource =&gt; dataSource
.Ajax()
.Read(read =&gt; read.Action("Products_Read", "ListView"))
.PageSize(21)
)
)

DataSource(Action<ListViewAjaxDataSourceBuilder<T>>)

Binds the ListView to a DataSource.

public ListViewBuilder<T> DataSource(Action<ListViewAjaxDataSourceBuilder<T>> configurator)

Parameters:configuratorAction<ListViewAjaxDataSourceBuilder<T>>

The DataSourceBuilder<TModel> configurator.

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.DataSource(dataSource =&gt; dataSource
.Ajax()
.Read(read =&gt; read.Action("Products_Read", "ListView"))
.PageSize(21)
)
)

DataSource(string)

Binds the ListView to an existing DataSource instance.

public ListViewBuilder<T> DataSource(string dataSourceId)

Parameters:dataSourceIdstring

The name of the client DataSource instance.

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().DataSource&lt;ProductViewModel&gt;()
.Name("dataSource1")
.Ajax(dataSource =&gt; dataSource
.PageSize(10)
.Read(read =&gt; read.Action("Products_Read", "DataSource"))
)
)
@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.DataSource("dataSource1")
)

Editable()

Enables ListView editing.

public ListViewBuilder<T> Editable()

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.Editable()
.DataSource(dataSource =&gt; dataSource
.Ajax()
.Model(model =&gt; model.Id("ProductID"))
.Read(read =&gt; read.Action("Products_Read", "ListView"))
.Update(update =&gt; update.Action("Products_Update", "ListView"))
.PageSize(21)
)
)

Editable(Action<ListViewEditingSettingsBuilder<T>>)

Configures the ListView editing settings.

public ListViewBuilder<T> Editable(Action<ListViewEditingSettingsBuilder<T>> configurator)

Parameters:configuratorAction<ListViewEditingSettingsBuilder<T>>

The editing settings configurator.

Returns:

ListViewBuilder<T>

Example:

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

Events(Action<ListViewEventBuilder>)

Configures the client-side events.

public ListViewBuilder<T> Events(Action<ListViewEventBuilder> configurator)

Parameters:configuratorAction<ListViewEventBuilder>

The client events action.

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.Events(events =&gt; events
.DataBound("onDataBound")
)
)

Flex(Action<ListViewFlexSettingsBuilder>)

Flex layout settings

public ListViewBuilder<T> Flex(Action<ListViewFlexSettingsBuilder> configurator)

Parameters:configuratorAction<ListViewFlexSettingsBuilder>

The configurator for the flex setting.

Returns:

ListViewBuilder<T>

Example:

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

Grid(Action<ListViewGridSettingsBuilder>)

Grid layout settings.

public ListViewBuilder<T> Grid(Action<ListViewGridSettingsBuilder> configurator)

Parameters:configuratorAction<ListViewGridSettingsBuilder>

The configurator for the grid setting.

Returns:

ListViewBuilder<T>

Example:

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

Layout(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..

public ListViewBuilder<T> Layout(string value)

Parameters:valuestring

The value for Layout

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.Layout("flex")
.DataSource(dataSource =&gt; dataSource
.Ajax()
.Read(read =&gt; read.Action("Products_Read", "ListView"))
.PageSize(21)
)
)

Navigatable()

Enables keyboard navigation.

public ListViewBuilder<T> Navigatable()

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.Navigatable()
.DataSource(dataSource =&gt; dataSource
.Ajax()
.Read(read =&gt; read.Action("Products_Read", "ListView"))
.PageSize(21)
)
)

Pageable()

Allows paging of the data.

public ListViewBuilder<T> Pageable()

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.Pageable()
.DataSource(dataSource =&gt; dataSource
.Ajax()
.Read(read =&gt; read.Action("Products_Read", "ListView"))
.PageSize(21)
)
)

Pageable(Action<ListViewPageableBuilder>)

Allows paging of the data.

public ListViewBuilder<T> Pageable(Action<ListViewPageableBuilder> pagerAction)

Parameters:pagerActionAction<ListViewPageableBuilder>

Use builder to define paging settings.

Returns:

ListViewBuilder<T>

Example:

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

Scrollable()

If set, the ListView will display a scrollbar when the content exceeds the ListView's height. By default, scrolling is disabled.

public ListViewBuilder<T> Scrollable()

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsLitView")
.Scrollable()
.DataSource(dataSource =&gt; dataSource
.Ajax()
.Read(read =&gt; read.Action("Products_Read", "ListView"))
.PageSize(21)
)
)

Scrollable(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.

public ListViewBuilder<T> Scrollable(ListViewScrollableMode mode)

Parameters:modeListViewScrollableMode

The value for Scrollable

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsLitView")
.Scrollable(ListViewScrollableMode.Endless)
.DataSource(dataSource =&gt; dataSource
.Ajax()
.Read(read =&gt; read.Action("Products_Read", "ListView"))
.PageSize(21)
)
)

Selectable()

Enables single item selection.

public ListViewBuilder<T> Selectable()

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.Selectable()
.DataSource(dataSource =&gt; dataSource
.Ajax()
.Read(read =&gt; read.Action("Products_Read", "ListView"))
.PageSize(21)
)
)

Selectable(Action<ListViewSelectionSettingsBuilder>)

Enables selection in the specified selection mode.

public ListViewBuilder<T> Selectable(Action<ListViewSelectionSettingsBuilder> selectionAction)

Parameters:selectionActionAction<ListViewSelectionSettingsBuilder>

Use builder to define the selection mode.

Returns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.Selectable(select=&gt;select.Mode(ListViewSelectionMode.Multiple))
.DataSource(dataSource =&gt; dataSource
.Ajax()
.Read(read =&gt; read.Action("Products_Read", "ListView"))
.PageSize(21)
)
)

TagName(string)

Specifies ListView wrapper element tag name.

public ListViewBuilder<T> TagName(string tagName)

Parameters:tagNamestringReturns:

ListViewBuilder<T>

Example:

@(Html.Kendo().ListView&lt;ProductViewModel&gt;()
.Name("productsListView")
.TagName("div")
)