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

Demo of using kendo-mobile-drawer

7 Answers 130 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Richard
Top achievements
Rank 1
Richard asked on 22 Jul 2015, 06:35 PM

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>


    

7 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 27 Jul 2015, 08:57 AM

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!
 
0
Richard
Top achievements
Rank 1
answered on 27 Jul 2015, 03:52 PM

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.

0
Petyo
Telerik team
answered on 31 Jul 2015, 06:49 AM

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!
 
0
Richard
Top achievements
Rank 1
answered on 31 Jul 2015, 01:05 PM
Sure, I have VS project zipped, but how do I get it to you?
0
Petyo
Telerik team
answered on 04 Aug 2015, 08:19 AM

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!
 
0
Richard
Top achievements
Rank 1
answered on 10 Aug 2015, 11:16 AM
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?
0
Petyo
Telerik team
answered on 13 Aug 2015, 06:46 AM

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!
 
Tags
General Discussions
Asked by
Richard
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Richard
Top achievements
Rank 1
Share this question
or