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

Can't seem to set SwipeToOpen = False

3 Answers 45 Views
Drawer (Mobile)
This is a migrated thread and some comments may be shown as answers.
Gregory
Top achievements
Rank 1
Gregory asked on 01 Oct 2015, 11:50 PM

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)

 

...

 

 

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 05 Oct 2015, 08:22 AM

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
0
Gregory
Top achievements
Rank 1
answered on 08 Oct 2015, 11:48 PM

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>​

0
Kiril Nikolov
Telerik team
answered on 12 Oct 2015, 10:12 AM

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
Tags
Drawer (Mobile)
Asked by
Gregory
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Gregory
Top achievements
Rank 1
Share this question
or