Using the mobile drawer in _Layout in MVC

2 posts, 1 answers
  1. Joe
    Joe avatar
    1 posts
    Member since:
    Dec 2013

    Posted 20 Jan 2014 Link to this post

    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>
  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 22 Jan 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top