DrawerBuilder
Methods
AutoCollapse(System.Boolean)
Specifies if the Drawer will be automatically collapsed when an item is clicked.
Parameters
value - System.Boolean
The value that configures the collapsed state of the item.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.AutoCollapse(true)
)
Expanded(System.Boolean)
Specifies if the Drawer will be expanded by default.
Parameters
value - System.Boolean
The value that configures the expanded state of the Drawer.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.Expanded(true)
)
Position(System.String)
Sets the position of the Drawer. It can be left (default) or right.
Parameters
value - System.String
The value that configures the Drawer position.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.Position("right")
)
Mode(System.String)
Determines how the Drawer will interact with the associated content. The default mode ("overlay") will overlap the respective content with an overlay effect. The "push" mode will show the Drawer next to the content. The associated item will shrink its content.
Parameters
value - System.String
The value that configures the mode option.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.Mode("push")
)
Navigatable(System.Boolean)
Enables the keyboard navigation of the Drawer. By default keyboard navigation is disabled.
Parameters
value - System.Boolean
The value that enables the keyboard navigation.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.Navigatable(true)
)
Template(System.String)
Specifies the Drawer's content.
Parameters
value - System.String
The value that configures the template.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.Template(@"<ul>
<li data-role='drawer-item'><span class='k-item-text' data-id='item1'>Item 1</span></li>
<li data-role='drawer-item'><span class='k-item-text' data-id='item2'>Item 2</span></li></ul>
")
)
TemplateId(System.String)
Specifies the Drawer's content by using external Kendo UI template.
Parameters
value - System.String
The id of the Kendo UI template.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.TemplateId("drawer-template")
)
<script id="drawer-template" type="text/x-kendo-template">
<ul>
<li data-role='drawer-item'><span class='k-item-text' data-id='item1'>Item 1</span></li>
<li data-role='drawer-item'><span class='k-item-text' data-id='item2'>Item 2</span></li>
</ul>
</script>
TemplateView(System.Web.Mvc.MvcHtmlString)
Specifies the Drawer's content by using a partial View.
Parameters
value - System.Web.Mvc.MvcHtmlString
The Razor View that contains the content of the Drawer.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.TemplateView(Html.Partial("DrawerTemplateView"))
)
TemplateHandler(System.String)
Specifies the Drawer's content by using a JavaScript function.
Parameters
value - System.String
The JavaScript function that will return the content.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.TemplateHandler("drawerTemplate")
)
<script>
function drawerTemplate() {
return `<ul>
<li data-role='drawer-item'><span class='k-item-text' data-id='item1'>Item 1</span></li>
<li data-role='drawer-item'><span class='k-item-text' data-id='item2'>Item 2</span></li></ul>`;
}
</script>
Template(Kendo.Mvc.UI.TemplateBuilder)
Specifies the Drawer's content by using a Template component.
Parameters
template - TemplateBuilder<TModel>
The Template component that configures the template.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.Template(Html.Kendo().Template().AddHtml("<ul>" +
"<li data-role='drawer-item'><span class='k-item-text' data-id='item1'>Item 1</span></li>" +
"<li data-role='drawer-item'><span class='k-item-text' data-id='item2'>Item 2</span></li></ul>"))
)
MinHeight(System.Double)
Specifies the minimum height for the Drawer when the "push" mode is enabled. The "overlay" mode takes 100% of the page height.
Parameters
value - System.Double
The value that configures the minimum height.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.MinHeight(300)
)
Mini(System.Boolean)
Enables the "mini" mode of the Drawer - a compact view that is displayed when the Drawer is collapsed. Usually, it used to show only the icons when the Drawer's item contains icon and text. When it is enabled, it uses the main template.
Parameters
enabled - System.Boolean
Enables or disables the "mini" mode.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.Mini(true)
)
Mini(System.Action)
Configures the "mini" mode of the Drawer - a compact view that is displayed when the Drawer is collapsed. Usually, it used to show only the icons when the Drawer's item contains icon and text. When it is enabled, it uses the main template.
Parameters
configurator - System.Action<DrawerMiniSettingsBuilder>
The action that configures the "mini" mode.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.Mini(mode => mode.Width(45))
)
SwipeToOpen(System.Boolean)
By default, the users must swipe the respective content from an inner part of the view to activate the Drawer. When the option is disabled, swiping the associated content will not activate the Drawer. The Drawer will only be open by calling the show() client-side method. The option must be disabled for browsers that use side-swiping gestures for back/forward navigation, such as iOS Safari.
Parameters
value - System.Boolean
The value that configures the swipe option.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.SwipeToOpen(true)
)
Width(System.Double)
Defines a specific width for the Drawer when it is expanded.
Parameters
value - System.Double
The value that configures the width.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.Width(200)
)
Content(System.Action)
Defines the associated content for the Drawer.
Parameters
value - System.Action
The value for the content.
Content(System.Func)
The HTML string representing the associated content for the Drawer.
Parameters
value - System.Func<Object,Object>
The value wrapped in a text tag.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.Content(@<text>
<span>Content is here </span>
</text>)
)
Content(System.String)
The HTML string representing the associated content for the Drawer.
Parameters
value - System.String
The value for the content.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.Content(@"
<span>Content is here </span>
")
)
Events(System.Action)
Handles the client-side events of the Drawer.
Parameters
configurator - System.Action<DrawerEventBuilder>
The action that configures the available events.
Example
@(Html.Kendo().Drawer()
.Name("drawer")
.Events(events => events.Hide("onHide").Show("onShow"))
)
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>
AsChildComponent()
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();
)