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
@(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
@(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
@(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
@(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
@(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
@(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
@(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
@(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
@(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
@(Html.Kendo().ListView<ProductViewModel>()
.Name("productsListView")
.ClientAltTemplate(Html.Kendo()
.Template()
.AddHtml("<p>${data.ProductName}</p>")
)
)
Pageable()
Allows paging of the data.
Example
@(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
@(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
@(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
@(Html.Kendo().ListView<ProductViewModel>()
.Name("productsLitView")
.Scrollable(ListViewScrollableMode.Endless)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "ListView"))
.PageSize(21)
)
)
Navigatable()
Enables keyboard navigation.
Example
@(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
@(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
@(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
@(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
@(Html.Kendo().ListView<ProductViewModel>()
.Name("productsListView")
.AutoBind(false)
)
TagName(System.String)
Specifies ListView wrapper element tag name.
Parameters
tagName - System.String
Example
@(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
@(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
@(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
@(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
@(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
@(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
@(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
@(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
@(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
@(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
@(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
@(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
@(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
@(@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.