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

data-views prevents drawer from opening

2 Answers 62 Views
Drawer (Mobile)
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 21 Jan 2014, 07:17 PM
So this code is identical to code I have on my other views.  The only thing I can't figure out, is why inlcuding data-views PREVENTS the window from opening up on in this view.  The data-views path is correct.  I can even copy paste code that works perfects with other views I have that also uses data-views, include the view I want to open on and it still won't work.  

Why would data-views prevent the drawer from opening on a page that has been added to data-views? And more so, why does it not work here, but work everywhere else I use it.

<div id="drawerAccounts"
     data-role="drawer"
     data-views='[
    "/View/Account/AccountDefaultView.htm"                     //This is the correct file path and this is the view where the drawer is located.
    ]'
     data-show="accountListDrawerController.showEvent"
     data-model="accountListDrawerController.dataModel">
    <ul data-role="listview" data-type="group" data-click="clk">
        <li>
            [Person Name]
            <ul>
                <li><a href="#" data-link="/view/editPerson/editPersonDefaultView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Back to Person</a></li>
            </ul>
        </li>
        <li>
            Other
            <ul>
                <li><a onclick="crmMobile.showThemeModal(); HideDrawer('drawerAccounts');">Change UI Theme</a></li>
                <li><a href="#" data-link="/view/Misc/MiscAboutVA.htm" data-transition="none">About Virtual Advisor</a></li>
                <li><a href="/view/Misc/MiscLoggingOut.htm" onclick="logOut();" data-transition="none">Logout</a></li>
            </ul>
        </li>
    </ul>
</div>


Here is a sample of my code from a view that works correctly.
Snippet<div id="drawerEditPerson"
     data-role="drawer"
     data-views='[
    "/view/editPerson/editPersonDefaultView.htm",
    "/view/editPerson/widget/editPersonStatusView.htm",
    "/view/editPerson/widget/editPersonDetailsView.htm",
    "/view/editPerson/widget/editPersonNameView.htm",
    "/view/editPerson/widget/editPersonDisciplinesView.htm",
    "/view/editPerson/widget/viewPersonDisciplinesView.htm",
    "/view/editPerson/widget/viewPersonElectronicContactView.htm",
    "/view/editPerson/widget/viewPersonContactNumbersView.htm",
    "/view/editPerson/widget/viewPersonAddressesView.htm",
    "/view/editPerson/widget/EditPersonRemarksView.htm",
    "/view/editPerson/widget/ViewPersonCompaniesView.htm",
    "/view/editPerson/widget/ViewPersonGroupsView.htm",
    "/view/editPerson/widget/viewPersonNotesView.htm",
    "/view/editPerson/widget/viewPersonRelationshipsView.htm",
    "/view/editPerson/widget/viewPersonCampaignsView.htm",
    "/view/editPerson/widget/viewPersonDocumentsView.htm",
    "/view/editPerson/widget/viewPersonActivitiesView.htm"
    ]'
     data-show="peopleEditDrawerController.showEvent"
     data-model="peopleEditDrawerController.dataModel">
    <ul data-role="listview" data-type="group" data-click="clk">
        <li>
            Contact Info
            <ul>
                <li><a href="#" data-link="/view/editPerson/editPersonDefaultView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Preview</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/editPersonNameView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Name</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/editPersonStatusView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Status</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/editPersonDetailsView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Details</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/editPersonDisciplinesView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Disciplines</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/viewPersonElectronicContactView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Electronic Contact</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/viewPersonContactNumbersView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Contact Numbers</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/viewPersonAddressesView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Address</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/EditPersonRemarksView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Remarks</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/ViewPersonGroupsView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Groups</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/viewPersonNotesView.htm?id=#id#&includeGeneral=true&includeActivity=false&includeDocument=false&includeGroup=false&includeAccount=false" data-bind="idLink: id" data-transition="none">Notes</a></li>
                <li><a href="#" data-link="/view/Account/AccountDefaultView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Accounts</a></li>
            </ul>
        </li>
        <li>
            Other
            <ul>
                <li><a onclick="crmMobile.showThemeModal(); HideDrawer('drawerEditPerson');">Change UI Theme</a></li>
                <li><a href="#" data-link="/view/Misc/MiscAboutVA.htm?id=#id#" data-bind="idLink: id" data-transition="none">About Virtual Advisor</a></li>
                <li><a href="/view/Misc/MiscLoggingOut.htm" onclick="logOut();" data-transition="none">Logout</a></li>
            </ul>
        </li>
    </ul>
</div>

2 Answers, 1 is accepted

Sort by
0
Mark
Top achievements
Rank 1
answered on 21 Jan 2014, 07:35 PM
I solved this problem.  for some reason, I need a lower case v in

data-views='[
    "/View/Account/AccountDefaultView.htm" 
    ]'

even though the folder itself is in FACT uppercase V.  Why kendo changes the cases on my folders in the actual url bar is beyond me and I would consider a big no no.  Kendo should never change my folder structure casing.  

This should be changed immediately!  It has required hours of work to solve when my code was correct.  (once again, you shouldn't change my casing and more importantly casing shouldn't even be relevant).

Little bugs like this in kendo is killing my productivity.
0
Petyo
Telerik team
answered on 22 Jan 2014, 09:43 AM
Hello Mark,

Kendo UI Mobile does not modify the casing of passed URLs - it navigates to the link href attribute value. In your code, the link has the href attribute set to a lower case v:

<li><a href="#" data-link="/view/Account/AccountDefaultView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Accounts</a></li>

The casing of the drawer configuration option should match the link casing.

Regards,
Petyo
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
Mark
Top achievements
Rank 1
Answers by
Mark
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or