Telerik Forums
Kendo UI for jQuery Forum
0 answers
59 views

This does not work: https://dojo.telerik.com/UNIJebUR

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="appbar"></div>
<script>
$("#appbar").kendoAppBar({
    items: [
        {
            type: "contentItem",
            template: "<span><input /><span>"
        },
        {
            type: "spacer"
        },
        {
            type: "contentItem",
            template: "<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>"
        },
    ]
});
</script>
</body>
</html>

 

Jack
Top achievements
Rank 2
Iron
 asked on 06 Jan 2022
2 answers
58 views
   I have an application that needs to have an angular filter function for menu items. At first I thought this couldn't be done in Kendo UI. However, it can be done using the HTML content property on the menu item in the dataSource. I spent like 3 hours trying to figure this out. Hopefully, it will save someone else the time who is trying to solve the same problem. 
Dimitar
Telerik team
 answered on 07 Mar 2019
2 answers
171 views

Hi,

I have a mobile navbar / toolbar. It only has one item, but is showing an empty Overflow Anchor (see image attached). How can remove the overflow anchor? (Or is there some method to flag for it to auto-hide itself when it's empty?)

I'm trying to adapt the Kendo Mobile demo here: http://demos.telerik.com/php-ui/m/index#navbar/adaptive-toolbar

My code follows.

Thanks.

-Paul

01.<div data-role="toolbar" style="min-width: 600px;" data-items='[
02.  {
03.    type: "splitButton",
04.    id:   "userDisplayName",
05.    icon: "contacts",
06.    text: "Joe User",
07.    align:"right",
08.    overflow: "never",
09.    menuButtons: [
10.      {
11.        id:  "editProfile",
12.        icon: "settings",
13.        text: "edit profile"
14.      },
15.      {
16.        id:   "logout",
17.        icon: "history",
18.        text: "Logout"
19.      }
20.    ]
21.  }        
22.]'>
23.</div>
ptw
Top achievements
Rank 1
 answered on 19 Oct 2016
1 answer
98 views

Hallo,

 

how do you change the title of a navbar within a drawer in code?

    

  <div id="mainMenu"
         data-role="drawer"
         data-swipe-to-open="false"
         data-model="views.index.viewModel"        
         data-title="">
        <header data-role="header">
            <div data-role="navbar" id="mainNavBar">
                <span data-role="view-title"></span>
            </div>
        </header>
        <ul id="mainMenuListView"
            class="item-list"
            data-role="listview"
            data-bind="source: menuItemDataSource"
            data-auto-bind="false"
            data-template="mainMenuItemTemplate"
            data-header-template="mainMenuHeaderTemplate"></ul>
 </div>

 

Iliana Dyankova
Telerik team
 answered on 27 Sep 2016
3 answers
807 views

Hi,

I am working on kendo grid where i have a scenario in which i want a grid to show record based on batch of record ( i mean, if there are 300 records in a database then when a grid loads i want to show 10 records at a time, i have an working api for this and grid is responding well to that). I need next batch of data to be shown by hitting the next or last button in pager nav in the grid but it is disabled by default (if have set pagesize for grid is set to 15). 

I am trying to remove k-state-disabled class for grid-pager div for next and last button, which is not working for me (may be i am missing something).

(  $('.k-grid-pager').find('a.k-pager-last').removeClass("k-state-disabled"); ). I tried changing the class name as well but that also doesn't work.

Can you suggest a way to enable pager-nav's next and last button by default, irrespective to the records in the grid?

Abhinav
Top achievements
Rank 1
 answered on 28 Mar 2016
1 answer
97 views

Hello,

I am trying to implement toolbar as actionbar on Kendo UI Mobile: 

In the demo, the dataItems are statically placed into the data-items attribute: http://demos.telerik.com/kendo-ui/m/index#navbar/adaptive-toolbar

<div data-role="toolbar" data-items='[ { id: "back", type: "button", icon: "arrow-w", overflow: "never", align: "left", url: "#:back" }, { type: "splitButton", id: "viewName", name: "viewName", text: "Inbox (18)", menuButtons: [ { id: "option1", text: "Drafts (3)" }, { id: "option2", text: "Sent Mail" }, { id: "option3", text: "Junk Mail (21)" }, { id: "option4", text: "Trash (53)" } ], overflow: "never", align: "left" }]'></div>

I would like to be able to initialize and control the toolbar in the javaScript like so:
Html:

<div data-role="view" ... >
<header>
<div id="toolbar">
</header>
</div>

Js:
$("#toolbar").kendoToolBar({ ... });

When I do it this way, however, the toolbar does not get styled as in the demo.

Is there support for this type of toolbar initialization in mobile or am I doing something wrong?

Thank you.

 

Petyo
Telerik team
 answered on 03 Mar 2016
1 answer
199 views

I am trying an experiment with the Kendo UI Navbar and have run into a problem.

I am new to AngularJS and to Kendo UI as well so I could be doing something dumb.

I want to wrap the Navbar and encapsulate some of the 'fluff' in directives so when it comes to add the navigation bar to the page all I have to do is something like this.

<my-navigation-bar>

     <my-navigation-item>Item One</my-navigation-item>

     <my-navigation-item>Item Two</my-navigation-item>

</my-navigation-bar>

I have created 2 directives.

 

The first directive is for wrapping it NavBar body

angular.module('myapp.navigation')
.directive('myNavigationBar', function() {
         return {
                      restrict: 'E',
                      templateUrl: 'components/navigation/directives/navigationbar.html',
                      transclude: true,
                      replace:true,
                      template: '<div class="c-navigation-bar">' +
                                     ' <ul kendo-panel-bar k-options="panelBarOptions" ng-controller="MyCtrl" ng-transclude></ul>' +
                                     '</div>' }});

 

The second directive is for the items

angular.module('myapp.navigation')
   .directive('myNavigationItem', function() {
         return {
                       restrict: 'E',
                       replace: true,
                       template: '<li>' +
                               '<a class="ng-scope" ui-sref="tools">' +       
                               '<span class="myspecial-icon myspecial-icon-wrench myspecial-icon-lg" name="wrench" large=""></span> ' + 
                               ' <span class="nav-label" ng-transclude></span></a></li>'
});

 

For the most part, it is working at least as far as how everything is being rendered. 

The problem is the items are not associated with the NavBar.  The role (role="menuitem") isnt being added to the LI elements and none of the styles associated with the items work.  For example, the hover effects.  The items are just being displayed like normal LI elements.

This is what gets rendered:

 

<ul role="menu" tabindex="0" data-role="panelbar" class="ng-scope k-widget k-reset k-header k-panelbar" kendo-panel-bar="" k-options="panelBarOptions" ng-controller="MyCtrl" ng-transclude="">
    <li class="ng-scope k-item k-state-default k-first">
        <a class="ng-scope" ui-sref="tools">
            <span class="myspecial-icon myspecial-icon-wrench myspecial-icon-lg" name="wrench" large=""/>
            <span class="nav-label" ng-transclude="">
                <span class="ng-scope">Item One</span>
            </span>
        </a>
    </li>
    <li class="ng-scope k-item k-state-default k-last">
        <a class="ng-scope" ui-sref="tools">
            <span class="myspecial-icon myspecial-icon-wrench myspecial-icon-lg" name="wrench" large=""/>
            <span class="nav-label" ng-transclude="">
                <span class="ng-scope">Item Two</span>
            </span>
        </a>
    </li>
</ul>

The above doesnt work.

If I just put the LI items in the template for the myNavigationBar and remove this is what is rendered and it works just as I would expect:

<ul ng-controller="MyCtrl" k-options="panelBarOptions" kendo-panel-bar="" class="ng-scope k-widget k-reset k-header k-panelbar" data-role="panelbar" tabindex="0" role="menu">
    <li class="k-item k-state-default k-first" role="menuitem">
        <a ui-sref="tools" class="ng-scope k-link k-header">
            <span large="" name="wrench" class="myspecial-icon myspecial-icon-wrench myspecial-icon-lg"></span>
            <span class="nav-label">Item One</span>
        </a>
    </li>
    <li class="k-item k-state-default k-last" role="menuitem">
        <a ui-sref="tools" class="ng-scope k-link k-header">
            <span large="" name="wrench" class="myspecial-icon myspecial-icon-wrench myspecial-icon-lg"></span>
            <span class="nav-label">Item Two</span>
        </a>
    </li>
</ul>

So, any ideas why, when using transclusion for the individual NavBar items as well as the main item, that the items are not correctly associated with the navbar? 

 

Petyo
Telerik team
 answered on 08 Feb 2016
1 answer
65 views

Hi,

In order to get the chart object from the dom I use $("#selector").data("kendoChart")

can i use the same with navbar (e.g. $("#selector").data("kendoNavbar")) cause it does not seem to work.

If not , is there another way to get the JS object from the html

 

<div data-role="layout" data-id="drawer-layout"   data-init="onInit" data-show="showDemoLayout">
    <header data-role="header">
        <div data-role="navbar">
            <a data-role="button" id="drawer" data-rel="drawer"  href="#my-drawer" data-icon="hamburger" data-align="left"></a>
            <span data-role="view-title"></span>
            <a data-align="right" data-icon="source-code" data-click="goToSourceCode" data-role="button" title="Show this demo source code"></a>
            <a data-align="right" data-role="button" class="nav-button" data-icon="home" data-transition="slide" href="#/"></a>
        </div>
    </header>
</div>

<script>

  need the navbar object here....

<script>

Venelin
Telerik team
 answered on 07 Jan 2016
6 answers
66 views

Hello,

since 2015 Q3 i cannot set the title in a show-before function.

example

With 2015 Q2, it works as expected.

 

 Kind regards

 

Petyo
Telerik team
 answered on 12 Nov 2015
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?