data-views prevents drawer from opening

3 posts, 0 answers
  1. Mark
    Mark avatar
    25 posts
    Member since:
    Dec 2013

    Posted 21 Jan 2014 Link to this post

    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. Mark
    Mark avatar
    25 posts
    Member since:
    Dec 2013

    Posted 21 Jan 2014 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 22 Jan 2014 Link to this post

    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!
Back to Top