Can't seem to set SwipeToOpen = False

4 posts, 0 answers
  1. Gregory
    Gregory avatar
    14 posts
    Member since:
    Feb 2014

    Posted 01 Oct 2015 Link to this post

    Anyone know how to set the drawer control to not activate on swipe? I can't seem to set the SwipeToOpen property to false... Is this how you are supposed to do it?

     

        @(Html.Kendo().MobileDrawer()
            .Name("my-drawer")
            .SwipeToOpen(false)

     

    ...

     

     

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 05 Oct 2015 Link to this post

    Hello Gregory,

     

    I have tested this functionality in a simple example and it worked as expected. Please see the attached project and let me know if it works on your machine as well.

     

    Regards,
    Kiril Nikolov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Gregory
    Gregory avatar
    14 posts
    Member since:
    Feb 2014

    Posted 08 Oct 2015 in reply to Kiril Nikolov Link to this post

    Thank You!  I am testing having it enabled and disabled.  Do you know off hand if the drawer SwipeToOpen can be true and have a swipe left on the detail view to show a button to delete the the record? I have almost gotten it to work. However, the drawer stops opening unless the button is visible. Do you know off hand why that could be?

    Below is a page I tried to do this on. I took the swipe functions from the mobilelistview sample and put them in the drawer sample. (It's only works to show the button on the first record because it's static data and I didn't put a button on all the records yet)

     

    @{    
        Layout = "~/Areas/razor/Views/Shared/_MobileLayout.cshtml";
    }

    @(Html.Kendo().MobileView()
           .Name("drawer-home")
           .Layout("drawer-layout")
           .Title("Inbox")
           .Events(events => events.Init("listViewInit"))
           .Content(obj =>       
               Html.Kendo().MobileListView()
                    .Name("MainListView")
                    .TemplateId("itemTemplate")
                    .HtmlAttributes(new { @class = "inboxList" })
                    .Items(items =>
                    {
                        items.Add().Content(
                        @<text>
                            <h3 class="time">07:56</h3><h3>John Doe</h3>
                            <h2>Monday meeting</h2>
                            <p>Hi Tom, Since Monday I'll be out of office, I'm rescheduling the meeting for Tuesday.</p>
                            <p>test</p>
                            @(Html.Kendo().MobileButton()
                                        .Text("Delete")
                                        .HtmlAttributes(new { @class = "delete" })
                            )
                        </text>);

                        items.Add().Content(
                        @<text>
                            <h3 class="time">08:21</h3><h3>Joe Harper</h3>
                            <h2>I'm sorry, Tom</h2>
                            <p>Hi Tom, my aunt comes for a visit this Saturday, so I can't come back to St. Pete...</p>
                        </text>);

                        items.Add().Content(
                        @<text>
                            <h3 class="time">08:33</h3><h3>Sarah Connor</h3>
                            <h2>Regarding org chart changes</h2>
                            <p>Tom, I checked the new org chart last night and I have some reservations about it...</p>
                        </text>);

                        items.Add().Content(
                        @<text>
                            <h3 class="time">08:40</h3><h3>John Doe</h3>
                            <h2>Re: Regarding org chart changes</h2>
                            <p>Agree with Sarah...</p>
                        </text>);

                        items.Add().Content(
                        @<text>
                            <h3 class="time">09:16</h3><h3>Jane Parker</h3>
                            <h2>Your Costume is ready</h2>
                            <p>Hi mr. Sawyer, I'm sorry for the delay, your Halloween costume is ready. The bears...</p>
                        </text>);

                        items.Add().Content(
                        @<text>
                            <h3 class="time">11:03</h3><h3>Becky Thatcher</h3>
                            <h2>Out tonight?</h2>
                            <p>Honey, wanna go out tonight to grab some chicken? My weekly vouchers for cooking...</p>
                        </text>);
                    })
            )
    )

    @(Html.Kendo().MobileView()
           .Name("drawer-starred")
           .Layout("drawer-layout")
           .Title("Starred Items")
           .Content(obj =>
                Html.Kendo().MobileListView()
                    .Items(items => 
                    {
                        items.Add().Icon("star").Text("Monday meeting");
                        items.Add().Icon("star").Text("Regarding org chart changes");
                        items.Add().Icon("star").Text("Re: Regarding org chart changes");
                        items.Add().Icon("star").Text("Your Costume is ready");
                        items.Add().Icon("star").Text("Out tonight?");
                    })
           )
    )

    @(Html.Kendo().MobileView()
           .Name("drawer-drafts")
           .Layout("drawer-layout")
            .Title("Drafts")
           .Content(obj =>
                Html.Kendo().MobileListView()
                    .Items(items => 
                    {
                        items.Add().Icon("compose").Text("Re: Monday meeting");
                        items.Add().Icon("compose").Text("Untitled message 1");
                        items.Add().Icon("compose").Text("Untitled message 2");
                        items.Add().Icon("compose").Text("Re: Regarding org chart changes");
                        items.Add().Icon("compose").Text("Re: Re: Regarding org chart changes");
                        items.Add().Icon("compose").Text("Re: Your Costume is ready");
                        items.Add().Icon("compose").Text("Re: Out tonight?");
                        items.Add().Icon("compose").Text("Untitled message 3");
                    })
           )
    )

    @(Html.Kendo().MobileView()
           .Name("drawer-sent")
           .Layout("drawer-layout")
           .Title("Sent Items")
           .Content(obj =>
                Html.Kendo().MobileListView()
                    .Items(items => 
                    {
                        items.Add().Text("Build enterprise apps");
                        items.Add().Text("Fw: Regarding Multiline textbox");
                        items.Add().Text("Away next week");
                        items.Add().Text("Fw: Your Costume is ready");
                        items.Add().Text("Update completed");
                        items.Add().Text("Survey");
                        items.Add().Text("Problem with this account");
                        items.Add().Text("Advice For Designers");
                        items.Add().Text("Fw: Missing Book");
                        items.Add().Text("Fun & useful reading");
                    })
           )
    )

    @(Html.Kendo().MobileView()
           .Name("drawer-deleted")
           .Layout("drawer-layout")
           .Title("Deleted Items")
           .Content(obj =>
                Html.Kendo().MobileListView()
                    .Items(items => 
                    {
                        items.Add().Icon("trash").Text("Untitled message 4");
                        items.Add().Icon("trash").Text("Untitled message 5");                    
                    })
           )
    )

    @(Html.Kendo().MobileView()
           .Name("drawer-spam")
           .Layout("drawer-layout")
           .Title("Spam")
           .Content(
            @<text>            
                @(Html.Kendo().MobileListView()
                    .Items(items =>
                    {
                        items.Add().Icon("trash").Text("90% Discount!");
                        items.Add().Icon("trash").Text("90% Discount!");
                        items.Add().Icon("trash").Text("One time offer!");
                    })
                )

                @(Html.Kendo().MobileButton().Text("Delete Spam")
                        .HtmlAttributes(new { style = "background-color: darkred; display: block; margin: 2em; font-size: 1.4em;" }))
            </text>)
    )

    @(Html.Kendo().MobileDrawer()
            .Name("my-drawer")
            .HtmlAttributes(new { style = "width: 270px" })
            .Views("drawer-home", "drawer-starred", "drawer-deleted", "drawer-spam", "drawer-drafts", "drawer-sent")
            .Content(obj =>
                Html.Kendo().MobileListView().Type("group")
                    .Items(root => {
                        root.Add().Text("Mailbox").Items(items =>
                        {
                            items.AddLink().Icon("inbox").Url("#drawer-home").Text("Inbox");
                            items.AddLink().Icon("star").Url("#drawer-starred").Text("Starred Items");
                            items.AddLink().Icon("compose").Url("#drawer-drafts").Text("Drafts");
                            items.AddLink().Icon("sent").Url("#drawer-sent").Text("Sent Items");
                            items.AddLink().Icon("trash").Url("#drawer-deleted").Text("Deleted Items");
                            items.AddLink().Icon("spam").Url("#drawer-spam").Text("Spam");
                        });

                        root.Add().Text("Tasks").Items(items =>
                        {
                            items.Add().Text("To Do");
                            items.Add().Text("In Progress");
                            items.Add().Text("Done");
                            items.Add().Text("High Priority");
                            items.Add().Text("Low Priority");
                        });

                        root.Add().Text("Account").Items(items =>
                        {
                            items.Add().Icon("settings").Text("Settings");
                            items.Add().Icon("off").Text("Log Out");                   
                        });
                    })
            )
    )
        
    @(Html.Kendo().MobileLayout()
           .Name("drawer-layout")
           .Header(obj =>        
                Html.Kendo().MobileNavBar()
                    .Content(navbar =>
                        @<text>
                        @(Html.Kendo().MobileButton()
                                .Align(MobileButtonAlign.Left)
                                .Icon("drawer-button")
                                .Rel(MobileButtonRel.Drawer)
                                .Url("#my-drawer")
                        )

                        @navbar.ViewTitle("")

                        @(Html.Kendo().MobileButton()
                                .Align(MobileButtonAlign.Right)
                                .Text("Index")
                                .HtmlAttributes(new { @class = "nav-button" })
                                .Url(Url.RouteUrl(new { controller = "suite" }))
                        )

                    </text>)
            )
    )



    <style>
        .km-ios #my-drawer .km-content, .km-android #my-drawer .km-content, .km-blackberry #my-drawer .km-content,
        .km-ios #my-drawer .km-list > li, .km-android #my-drawer .km-list > li, .km-blackberry #my-drawer .km-list > li,
        .km-ios #my-drawer .km-listview-link > .km-icon, .km-android #my-drawer .km-listview-link > .km-icon, .km-blackberry #my-drawer .km-listview-link > .km-icon,
        .km-ios #my-drawer .km-list li > .km-icon, .km-android #my-drawer .km-list li > .km-icon, .km-blackberry #my-drawer .km-list li > .km-icon
        {
            background-color: #4e4e4e;
            color: #fff;
        }

        .km-ios #my-drawer .km-group-title,
        .km-blackberry #my-drawer .km-group-title
        {
            background-color: #6e6e6e;
            color: #fff;
        }

        .km-drawer-button:before, .km-drawer-button:after  { content: "\E077"; }
        .km-inbox:before, .km-inbox:after { content: "\E0B0"; }
        .km-sent:before, .km-sent:after { content: "\E0C6"; }
        .km-trash:before, .km-trash:after { content: "\E0C3"; }
        .km-spam:before, .km-spam:after { content: "\E0C5"; }
        .km-star:before, .km-star:after { content: "\E0D7"; }
        .km-settings:before, .km-settings:after { content: "\E0DA"; }
        .km-off:before, .km-off:after { content: "\E0B9"; }

        .inboxList
        {
            font-size: .8em;
        }

        .inboxList p,
        .inboxList h2,
        .inboxList h3
        {
            margin: 5px 2px;
        }

        .inboxList p,
        .inboxList h3
        {
            color: #777;
        }

        .inboxList h3.time
        {
            color: #369;
            float: left;
            margin-right: 10px;
        }

            #drawer-home .delete {
            display:none;
            position: absolute;
            top: .15em;
            right: .5em;
            width: 60px;
            background-color: #bd2729;
            color: #fff;
        }
    </style>

    <script id="itemTemplate" type="text/x-kendo-template">
        <p>test</p>
        @(Html.Kendo().MobileButton()
                .Text("Delete")
                .HtmlAttributes(new { @class = "delete" })
        )
    </script>

    <script>

        var dataSource;

        function listViewInit(e) {
            dataSource = e.view.element.find("#MainListView").data("kendoMobileListView").dataSource;

            e.view.element.find("#MainListView")
                .kendoTouch({
                    filter: ">li",
                    enableSwipe: true,
                    touchstart: touchstart,
                    tap: navigate,
                    swipe: swipe
                });
        }

        function navigate(e) {
            var itemUID = $(e.touch.currentTarget).data("uid");
            kendo.mobile.application.navigate("editdetails?productID=" + dataSource.getByUid(itemUID).ProductID);
        }

        function swipe(e) {
            if (e.direction == "left") {
                var button = kendo.fx($(e.touch.currentTarget).find("[data-role=button]"));
                button.expand().duration(200).play();
            }
        }




        function touchstart(e) {
            var target = $(e.touch.initialTouch),
                listview = $("#MainListView").data("kendoMobileListView"),
                model,
                button = $(e.touch.target).find("[data-role=button]:visible");

            if (target.closest("[data-role=button]")[0]) {
                model = dataSource.getByUid($(e.touch.target).attr("data-uid"));
                dataSource.remove(model);
                dataSource.sync();

                //prevent `swipe`
                this.events.cancel();
                e.event.stopPropagation();
            } else if (button[0]) {
                button.hide();

                //prevent `swipe`
                this.events.cancel();
            } else {
                listview.items().find("[data-role=button]:visible").hide();
            }
        }
    </script>​

  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 12 Oct 2015 Link to this post

    Hello Gregory,

     

    On the top of my head I cannot give you a reason why this is happening. But if you give us a runnable sample we will be happy to take a look and advise your further.

     

    Regards,
    Kiril Nikolov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready