How to set select with datasource inside drawer?

4 posts, 0 answers
  1. Sophie
    Sophie avatar
    3 posts
    Member since:
    Feb 2015

    Posted 16 Feb 2015 Link to this post

    I'm using drawer but i don't want to set there static hardcoded data. I want to set there selects (dropdown lists) and load the data from data source (json for example). I use angularjs as javascript.

    Maybe you have example?

    My purpose is to make search block for a list in drawer and to filter the list by it.

    Thanks for help!

    Sophie
  2. Sophie
    Sophie avatar
    3 posts
    Member since:
    Feb 2015

    Posted 17 Feb 2015 in reply to Sophie Link to this post

    I found the solution. But the problem is that i see the dropdownlist like in desktop. I mean there are no radiobuttons for select when i click on select in android. How can i do dropdownlist like native for android in angular?

    This is a code:

    <!DOCTYPE html>
    <html>
    <head>
    <base href="http://demos.telerik.com/kendo-ui/drawer/angular">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css" />

    <script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
    <style>
    html, body {
    height: 100%;
    margin: 0;
    }
    </style>
    </head>
    <body>
    <div kendo-mobile-application ng-app="kendoDemo" ng-controller="MyCtrl">
    <kendo-mobile-view id="two-drawer-home" k-title="'Friends'">
    <kendo-mobile-header>
    <kendo-mobile-nav-bar>
    <kendo-mobile-back-button id="back-button" class="nav-button" k-align="'left'">Back</kendo-mobile-back-button>
    <kendo-view-title></kendo-view-title>
    <kendo-mobile-button k-rel="'drawer'" href="#right-drawer" k-icon="'share'" k-align="'right'" ></a>
    </kendo-mobile-nav-bar>
    </kendo-mobile-header>

    <kendo-mobile-list-view k-type="'group'">
    <li>
    A
    <ul>
    <li><h2>Ann Devon</h2><img src="../content/mobile/overview/ann.jpg" /></li>
    <li><h2>Annette Roulet</h2><img src="../content/mobile/overview/annette.jpg" /></li>
    <li><h2>Antonio Moreno</h2><img src="../content/mobile/overview/antonio.jpg" /></li>
    </ul>
    </li>
    <li>
    C
    <ul>
    <li><h2>Carine Schmitt</h2><img src="../content/mobile/overview/carine.jpg" /></li>
    <li><h2>Catherine Dewey</h2><img src="../content/mobile/overview/catherine.jpg" /></li>
    </ul>
    </li>
    <li>
    D
    <ul>
    <li><h2>Daniel Tonini</h2><img src="../content/mobile/overview/daniel.jpg" /></li>
    <li><h2>Diego Roel</h2><img src="../content/mobile/overview/diego.jpg" /></li>
    </ul>
    </li>
    <li>
    E
    <ul>
    <li><h2>Eduardo Saavedra</h2><img src="../content/mobile/overview/eduardo.jpg" /></li>
    <li><h2>Elizabeth Brown</h2><img src="../content/mobile/overview/elizabeth.jpg" /></li>
    </ul>
    </li>
    <li>
    F
    <ul>
    <li><h2>Felipe Izquierdo</h2><img src="../content/mobile/overview/felipe.jpg" /></li>
    <li><h2>Fran Wilson</h2><img src="../content/mobile/overview/fran.jpg" /></li>
    <li><h2>Francisco Chang</h2><img src="../content/mobile/overview/francisco.jpg" /></li>
    </ul>
    </li>
    </kendo-mobile-list-view>
    </kendo-mobile-view>


    <kendo-mobile-drawer id="right-drawer" style="width: 280px" k-title="'Share'" k-position="'left'" k-views="['two-drawer-home']">
    <kendo-mobile-header>
    <kendo-mobile-nav-bar>
    <kendo-view-title></kendo-view-title>
    </kendo-mobile-nav-bar>
    </kendo-mobile-header>

    <div class="box-col">
    <h4>Remote data</h4>
    <select kendo-drop-down-list
    k-data-text-field="'ContactName'"
    k-data-value-field="'CustomerID'"
    k-data-source="customersDataSource"
    style="width: 200px"></select>
    </div>
    </kendo-mobile-drawer>

    <script>
    angular.module("kendoDemo", ["kendo.directives"])
    .controller("MyCtrl", function ($scope) {
    $scope.customersDataSource = {
    transport: {
    read: {
    dataType: "jsonp",
    url: "http://demos.telerik.com/kendo-ui/service/Customers"
    }
    }
    };
    });
    </script>

    <style>
    .km-root .left-btn
    {
    position: absolute;
    z-index: 9999;
    top: 7em;
    left: -1em;
    padding-right: 0;
    padding-left: 0;
    width: 5em;
    line-height: 4em;
    border-radius: 10em;
    -webkit-border-radius: 10em;
    border: 1px solid rgba(255,255,255,.8);
    background: rgba(0,0,0,.8);
    color: #fff;
    box-shadow: 0 0 .5em #000;
    -webkit-box-shadow: 0 0 .6em #222;
    }

    .mobileExample .km-wp-light .km-button.left-btn
    {
    background: rgba(0,0,0,.8);
    text-align: center;
    }

    .km-root .left-btn .km-icon.km-notext
    {
    display: block;
    margin: 1em auto;
    }

    .km-ios #left-drawer .km-content, .km-ios7 #left-drawer .km-content, .km-android #left-drawer .km-content, .km-blackberry #left-drawer .km-content,
    .km-ios #left-drawer .km-list > li, .km-ios7 #left-drawer .km-list > li, .km-android #left-drawer .km-list > li, .km-blackberry #left-drawer .km-list > li,
    .km-ios #left-drawer .km-listview-link > .km-icon, .km-ios7 #left-drawer .km-listview-link > .km-icon, .km-android #left-drawer .km-listview-link > .km-icon, .km-blackberry #left-drawer .km-listview-link > .km-icon,
    .km-ios #left-drawer .km-list li > .km-icon, .km-ios7 #left-drawer .km-list li > .km-icon, .km-android #left-drawer .km-list li > .km-icon, .km-blackberry #left-drawer .km-list li > .km-icon,
    #right-drawer .km-content
    {
    background-color: #4e4e4e;
    color: #fff;
    }

    .km-ios #left-drawer .km-group-title,
    .km-ios7 #left-drawer .km-group-title,
    .km-blackberry #left-drawer .km-group-title
    {
    background-color: #6e6e6e;
    color: #fff;
    }

    #left-drawer .km-navbar, #right-drawer .km-navbar,
    .km-tablet .km-ios #left-drawer .km-view-title,
    .km-tablet .km-ios #right-drawer .km-view-title,
    .km-ios7 #left-drawer .km-view-title,
    .km-ios7 #right-drawer .km-view-title,
    .km-tablet .km-ios7 #left-drawer .km-view-title,
    .km-tablet .km-ios7 #right-drawer .km-view-title
    {
    background-color: #2e2e2e;
    color: #fff;
    text-shadow: 0 -1px rgba(0,0,0,.5);
    }

    .km-drawer-button:before, .km-drawer-button:after { content: "\E077"; }
    .km-contacts:before, .km-contacts:after { content: "\E0E4"; }
    .km-camera:before, .km-camera:after { content: "\E0D0"; }
    .km-printer:before, .km-printer:after { content: "\E07E"; }
    .km-comments:before, .km-comments:after { content: "\E093"; }
    .km-graph:before, .km-graph:after { content: "\E04B"; }


    #two-drawer-home h2
    {
    display: inline-block;
    font-size: 1em;
    line-height: 3em;
    margin: 0 0 0 1em;
    }

    #two-drawer-home img
    {
    float: left;
    width: 3em;
    height: 3em;
    margin: 0;
    border: 1px solid rgba(0,0,0,.2);
    -webkit-border-radius: 4em;
    border-radius: 4em;
    }

    .km-ios #two-drawer-home .km-listview
    {
    background-color: #eaf1f5;
    }
    </style>


    </body>
    </html>
  3. Kendo UI is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 18 Feb 2015 Link to this post

    Hello Sophie,

    It looks like an issue with the mobile application when angularjs is used. I have logged the issue on GitHub and it will be fixed with an upcoming build. Here is a link for you that you can use to keep track on the progress:

    https://github.com/telerik/kendo-ui-core/issues/559

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 18 Feb 2015 Link to this post

    Hello Sophie,

     

    After some further research, the reason for this behavior is that the application needs to be initialized on the body element of the HTML. I have updated the issue, where you can find a runnable example as well:

     

    https://github.com/telerik/kendo-ui-core/issues/559

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready