Demo of using kendo-mobile-drawer

8 posts, 0 answers
  1. Richard
    Richard avatar
    6 posts
    Member since:
    May 2015

    Posted 22 Jul 2015 Link to this post

    With the new demos, I don't see any examples of angularjs integration for using the drawer.

    The sushi app doesn't use them (or collapsible would be nice to).

    I'm trying to build a drawer that allows for filter and sort capabilities, so I don't need it as navigation.

     I have it mostly working in that I can create it but I can't get it to work right. I cannot seem to move it outside of the view or it doesn't know how to open it. If I move it in, then it displays the content of the drawer inside the view and the drawer is blank.

    Here's my html:

    <kendo-mobile-view id="areainquiry" k-title="'Area Inquiry'" k-layout="'emptylayout'"  k-zoom="'true'" k-on-before-show="OnBeforeShow()" k-on-after-show="OnAfterShow()" ng-controller="AreaInquiryController">
        <kendo-mobile-header>
                <kendo-mobile-nav-bar>
                     <kendo-mobile-back-button ng-show="options.isBackButtonShown" class="k-state-selected" k-align="'left'">Back</kendo-mobile-back-button>
                    <kendo-view-title></kendo-view-title>
                    <kendo-mobile-button class="k-state-selected" k-scope-field="menubutton" k-align="'right'" data-rel="drawer" href="#areaInquiryDrawer" >
                        <span class="glyphicon glyphicon-menu-hamburger"></span>
                    </kendo-mobile-button>
                </kendo-mobile-nav-bar>
            </kendo-mobile-header>
        <p>this is my view</p>
        
        <kendo-mobile-drawer 
        id="areaInquiryDrawer" 
        k-scope-field="areaInquiryDrawer" 
        k-position="'right'"  
        k-stretch="'false'"
        k-use-native-scrolling="'false'" 
        k-swipe-to-open="'false'">
       <div class="drawer k-header">
            <div data-role="" class="areaSearchCollapsible" id="Div1" k-collapsed="false" k-on-expand="OnExpand()">
                <h4>Search</h4>
                <ul class="searchList">
                    <li>
                    <div class="input-group">
                            <input type="text" id="Text1" k-scope-field="tiScanArea" ng-model="areaScan" 
                                ng-keypress="ScanAreaKeyPress($event)" class="form-control" placeholder="Enter Scan Value" aria-describedby="areaScanAddOn" />
                                <span class="input-group-addon" id="Span1">
                                    <span ng-click="OnScanCamera()" class="glyphicon glyphicon-camera"></span>
                                </span>
                        </div>
                    </li>
                </ul>
                </div>
            </div>
        </kendo-mobile-drawer> 
    </kendo-mobile-view>


        

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 27 Jul 2015 Link to this post

    Hello Richard,

    Please examine the following demo of AngularJS and a Drawer.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Richard
    Richard avatar
    6 posts
    Member since:
    May 2015

    Posted 27 Jul 2015 in reply to Petyo Link to this post

    Thanks Petyo. I was able to get it working by creating a new project using VS plugin and copying your code in with one difference. I had to add the following because I was getting and "unsafe" error:

    angular.module("kendoDemo", ["kendo.directives"]).config(function ($compileProvider) {
            $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|local|file):/);
        });

     Once I added this, it worked, but I cannot get it to work in my app and I think that it is because I am using remote views. If I add this and try it I get ​"Uncaught TypeError: Cannot read property 'openFor' of undefined" in kendo.all.min.js:27.

    I tried modifying the href and using ng-href instead but cannot get it working. I saw that people had this error using it in the demo and had to add the "require" in the app.js, but I don't understand how to convert this to AngularJS use (http://www.telerik.com/forums/drawer-problem).

     I'm using remote views by adding the k-initial in the body tag and then setting it like so:

     app.run(function ($rootScope) {
        $rootScope.initialView = "app/cm/areainquiry.html";
    });

    Or, it could just be because I am using a kendo-mobile-layout.

  4. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 31 Jul 2015 Link to this post

    Hello Richard,

     

    in order to assist you further, we will need to examine your current setup. None of the errors you describe sound like known ones. In general, the remote views should not be a problem. 

     

    Please isolate your current effort in a runnable, sample project and send it to us - we will look at it right away. 

     

     

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Richard
    Richard avatar
    6 posts
    Member since:
    May 2015

    Posted 31 Jul 2015 in reply to Petyo Link to this post

    Sure, I have VS project zipped, but how do I get it to you?
  6. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 04 Aug 2015 Link to this post

    Hello Richard,

    you may add it as an attachment to your next post. Notice that this is a public forum, so make sure that you strip any sensitive information from the project. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Richard
    Richard avatar
    6 posts
    Member since:
    May 2015

    Posted 10 Aug 2015 in reply to Petyo Link to this post

    No worries, I just modified the demo you gave me. However, I do not see a way to attach files to the post. Does my subscription not allow this?
  8. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 13 Aug 2015 Link to this post

    Hello Richard,

    as far as I see, you have a Telerik platform subscription activated. You should be able to open a support ticket for that product and include the attachment; it will reach us nevertheless - just make sure to refer the current forum thread. 

    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