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

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

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

ToHtmlString()

ToClientTemplate()

In this article
Not finding the help you need?