This is a migrated thread and some comments may be shown as answers.

Using the mobile drawer in _Layout in MVC

1 Answer 182 Views
Drawer (Mobile)
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 20 Jan 2014, 08:41 PM
I am getting an 'object reference not set to an instance of an object' error on the mobile drawer when trying to add it to the _Layout.cshtml of my application.  Are you allowed to use the mobile drawer in the _Layout without setting up any mobile views or mobile layouts?  If so, could you provide an example or show me where I am going wrong.  Below are code snippets from my _Layout.cshtml file:

Below are my CSS and JS files in the head section of _Layout.cshtml:
<link href="@Url.Content("~/Content/kendo/2013.3.1119/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.3.1119/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.3.1119/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
 
<link href="@Url.Content("~/Content/bootstrap/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap/bootstrap-theme.min.css")" rel="stylesheet" type="text/css" />
 
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
 
<script src="@Url.Content("~/Scripts/kendo/2013.3.1119/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.3.1119/kendo.all.min.js")"></script>

Below is where I am creating my mobile drawer inside of the body tag in my _Layout.cshtml file:
@(Html.Kendo().MobileDrawer()
    .Name("my-drawer")
    .HtmlAttributes(new { style = "width: 270px" })
    .Content(obj =>
        Html.Kendo().MobileListView().Type("group")
            .Items(root =>
            {
                root.Add().Text("Navigation");
                root.Add().Text("Account");
            })
    )
)
 
<div class="container">
    <div class="row">
        <!-- main area -->
        <div class="col-xs-12">
            @RenderBody()
        </div>
    </div>
</div>

And below is my JavaScript that I have at the bottom of my body tag in _Layout.cshtml:
script src="@Url.Content("~/Scripts/bootstrap/bootstrap.min.js")" type="text/javascript"></script>
 
<script type="text/javascript">
    var app = new kendo.mobile.Application(document.body,
        {
            skin: "flat",
            initial: @Url.Action("Index", "Home")
        });
</script>

1 Answer, 1 is accepted

Sort by
0
Accepted
Kiril Nikolov
Telerik team
answered on 22 Jan 2014, 09:10 AM
Hello Joe,

It should not be a problem to include the Kendo UI Drawer inside your _Layout.cshtml file. Please check the attached project and let me know if it helps.

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Drawer (Mobile)
Asked by
Joe
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or