Questions on Kendo UI for jQuery Forum

1 answer

85 views

Hello. I would like to implement a stacked bar chart inside a PhoneGap app. I want to keep the app as small as possible, therefore I only want to import what is absolutely necessary only for the stacked bar chart. Your example for the stacked bar chart suggests that I link and load the following css and js files:

<link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../../styles/kendo.default.min.css" rel="stylesheet">
<link href="../../../styles/kendo.dataviz.min.css" rel="stylesheet">
<link href="../../../styles/kendo.dataviz.default.min.css" rel="stylesheet">

<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/kendo.dataviz.min.js"></script>
<script src="../../content/shared/js/console.js"></script>

But, when I download the library, I see some files that look like they may contain only the requirements for the chart instead of the whole dataviz library. For example, I see a javascript file called kendo.dataviz.chart.min. Is it possible to only import what is necessary for the chart so that I can keep my app size down?

Thank you!

Charts

answered on 04 Dec 2013

1 answer

102 views

TreeView child items not shown

Hi,

I'm using version 2013.3.1119 to create a basic TreeView. Please refer to http://jsfiddle.net/fDrvP/

I've tried running this fiddle in Chrome 31/Firefox 25/IE 9 on Windows 7 with the same result.

When I try expanding Item 3 (clicking the arrow or double clicking the text), no child items are shown. If I inspect the li element, I can see some attributes changing to expanded="true" but no child items appended.

Is there something I've overlooked?

TreeView

answered on 04 Dec 2013

1 answer

202 views

kendoEditor failing in jQuery 2.0+

Using Kendo UI's awesome kendoEditor, I am experiencing a bit of an annoying issue when coupling it with jQuery 2.0 or higher.

I have reproduced the problem here, using kendo's latest build; But basically, when you create an editor, if you try to use the indent functionality on the first line, you receive this error...

Uncaught TypeError: Cannot read property 'nodeName' of null

Is there anything I can do about this? It isn't completely 'breaking', but it sure is obnoxious.

Failing Test Available Here :

jsBin

Editor

answered on 04 Dec 2013

3 answers

937 views

TreeView in DropDownList

I want to put TreeView in DropDownList, but I've no idea how to realize it. Does Kendo support it?

TreeView

answered on 04 Dec 2013

0 answers

184 views

Grid Pager with Localization

Hi, when I switch locales in my app, I am still seeing the english text in the page control (i.e. 1 to 10 of 800 items). How can I have that text be the {current locale} text? Here is a JSFiddle demonstrating the problem.

Also, the text associated with the paging buttons (first, prev, next, last) is still in English as well. Is there a way within the framework to update these as well?

I found this JSFiddle, where they are using a template hooked into dataBound to specify the details of the current page, but I would expect this to be part of the framework where I set the locale and it is localized for me.

I just found the Messages section in the docs. Do I need to include my own translations for each of these?

Aha! Here is the page I was looking for.

Thanks,
--Ed

Globalization

asked on 03 Dec 2013

4 answers

274 views

Color Picker Editor Template in Grid has issues in IE 11

I'm not sure if this post would be better suited in the Grid forum or the Color Picker forum, so I apologize if I chose the wrong location.

Kendo UI Version: 2013.3.1119
I am using the ASP.NET MVC markup for the grid

I have a grid that is using batch editing which has a cell that has an editor template that is an HSV Color Picker.
When I select the cell for editing, the widget is fine in all browsers except IE 11.

In IE 11, the widget loads correctly and also opens correctly, but the issue comes when I attempt to change the color by clicking on the drag handler to move it around the canvas on the screen. I've included images of the before and after, but basically, the drag handler loads in the correct location, but when it is clicked, it immediately 'jumps' to the far left side of the page and refuses to drag to the right unless I take the cursor way to the right of the widget.

Here is my grid code and my detail template information. Please let me know if you need any more information.

<script type="text/javascript">

function RefCarrierRank_ErrorHandler(e) {

}

function RefCarrierRankEdit(e) {

if (e.container[0].cellIndex == 2) {

$(".k-selected-color").css("width", "100%");

$("#RankColor").data("kendoColorPicker").open();

}

</script>

<div id="RefCarrierRankContainer">

<h3 style="margin:1px;">Rank Dictionary</h3>

@(Html.Kendo().Grid(Model.AdminModel.GlobalDictionary.RefCarrierRankModels)

.Name("RefCarrierRank")

.Columns(columns =>

{

columns.Bound(item => item.Name);

columns.Bound(item => item.Rank)

.EditorTemplateName("RefCarrierRank/Rank");

columns.Bound(item => item.RankColor)

.ClientTemplate("<div class='k-textbox' style='background-color:#=RankColor#; width:80px; height:20px;'></div>")

.EditorTemplateName("RefCarrierRank/RankColor").Width(100);

columns.Command(command =>

{

command.Destroy();

}).Width(100);

})

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Save();

})

.Events(events =>

{

events.Edit("RefCarrierRankEdit");

})

.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))

.Navigatable(navigatable => navigatable.Enabled(true))

.Pageable(pageAction =>

{

pageAction.PageSizes(new int[] { 5, Model.AdminModel.GlobalDictionary.RefCarrierRankModels.Count });

})

.Sortable()

.Scrollable()

.Filterable()

.Resizable(resize => resize.Columns(true))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.Events(events =>

{

events.Error("RefCarrierRank_ErrorHandler");

})

.Sort(sort =>

{

sort.Add("Rank").Ascending();

})

.Model(model =>

{

model.Id(i => i.RefCarrierRankID);

model.Field(i => i.Rank).DefaultValue(Model.AdminModel.GlobalDictionary.RefCarrierRankModels.Max(i => i.Rank) + 1);

model.Field(i => i.RankColor).DefaultValue("#a8a8a8");

})

.Read(read => read.Action("GetRefCarrierRanks", "Dictionary"))

.Create(create => create.Action("CreateRefCarrierRanks", "Dictionary"))

.Update(update => update.Action("UpdateRefCarrierRanks", "Dictionary"))

.Destroy(delete => delete.Action("DeleteRefCarrierRanks", "Dictionary"))

)

</div>

@(Html.Kendo().ColorPicker()

.Name("RankColor")

.Value("#=RankColor#")

.Opacity(true)

)

ColorPicker

answered on 03 Dec 2013

5 answers

198 views

launch link in default phone browser

is there a way to have a hyperlink open in a browser? not inside of the app, but external to the app?

I set: data-rel="external" target="_blank", but that just still opens it up inside of the app.

General Discussions

answered on 03 Dec 2013

4 answers

510 views

Template creation and t.getAttribute is not a function

Hi! I'm using a custom template to make my listview. It seems that kendo ui does make the templates since i see them on screen but the whole thing just hangs with the loading animation in the middle running indefinetly.

Firebug shows this:

Timestamp: 3.12.2013 14:09:09

Error: TypeError: t.getAttribute is not a function

Source File: http://localhost:44112/Resources/scripts/vendor/kendoUI/js/kendo.all.min.js

Line: 9

This is my code (i'm using IIS express and Visual Studio 2012 for development, i dont want to use MVVM):

<!DOCTYPE html>

<html>

<head runat="server">

<style>

.gumb {

display: inline-block;

}

.container-gumbi {

float: right;

margin-top: 5px;

}

.kocka {

display: inline-block;

}

.kockaimg {

display: inline-block;

vertical-align: middle;

}

p.info-text {

margin: auto;

font-size: 10px;

}

p.date-text {

margin-top: 5px;

font-size: 13px;

font-weight: 800;

margin-bottom: 0px;

}

p.opis-text {

margin-top: 5px;

font-size: 11px;

font-weight: 500;

margin-bottom: 0px;

}

p.denar-text {

margin-top: 5px;

font-size: 14px;

font-weight: 800;

margin-bottom: 0px;

}

</style>

<title></title>

<link href="/../../../Resources/scripts/vendor/kendoUI/styles/kendo.common.min.css" rel="stylesheet" />

<link href="/../../../Resources/scripts/vendor/kendoUI/styles/kendo.default.min.css" rel="stylesheet" />

<link href="/../../../Resources/scripts/vendor/kendoUI/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="/../../../Resources/scripts/vendor/kendoUI/js/jquery.min.js"></script>

<script src="/../../../Resources/scripts/vendor/kendoUI/js/kendo.all.min.js"></script>

</head>

<body>

<div data-role="view" id="listview-templates" data-init="mobileListViewTemplatesInit" data-title="ListView">

<div class="head"> </div>

<ul id="custom-listview"></ul>

</div>

<<script type="text/x-kendo-template" id="customListViewTemplate">

<li>

<div class="kockaimg">

<img width="50" height="50" src="../../../clipart-generic-logo-d2f5.png" />

</div>

<div class="kocka">

<h4><span>#:nazivNarocnika#</span></h4>

</div>

</li>

<li>

<div class="kocka">

<p class="info-text">

Datum lansiranja:<br />

</p>

<p class="date-text">#:dtLansiranja#</p>

</div>

<div class="kocka">

<p class="info-text">

Datum pričetka:<br />

</p>

<p class="date-text">#:dtPricetka#</p>

</div>

<div class="kocka">

<p class="info-text">

Datum zaključka:<br />

</p>

<p class="date-text">#:dtZakljucka#</p>

</div>

</li>

<li>

<p class="info-text">

Opis:<br />

</p>

<p class="opis-text">#:opis#</p>

</li>

<li>

<div class="kocka">

<p class="info-text">

Trenutna ponudba:<br />

</p>

<p class="denar-text">#:cena# €</p>

</div>

<div class="container-gumbi">

<div class="gumb">

<a class="k-button" data-icon="add" style="font-size: 10px" data-role="button" href="">Dodaj ponudbo</a>

</div>

<div class="gumb">

<a class="k-button" data-icon="info" style="font-size: 10px" data-role="button" href="">Podrobno</a>

</div>

</li>

</script>

<script>

var groupedData = [

{ nazivNarocnika: "Narocnik d.d.", dtLansiranja: "18.5.2013", dtPricetka: "21.5.2013", dtZakljucka: "5.6.2013", opis: "Bla bla bla.", cena: "8.000,00" },

{ nazivNarocnika: "Narocnik d.d.", dtLansiranja: "18.5.2013", dtPricetka: "21.5.2013", dtZakljucka: "5.6.2013", opis: "Bla bla bla.", cena: "8.000,00" },

{ nazivNarocnika: "Narocnik d.d.", dtLansiranja: "18.5.2013", dtPricetka: "21.5.2013", dtZakljucka: "5.6.2013", opis: "Bla bla bla.", cena: "8.000,00" },

{ nazivNarocnika: "Narocnik d.d.", dtLansiranja: "18.5.2013", dtPricetka: "21.5.2013", dtZakljucka: "5.6.2013", opis: "Bla bla bla.", cena: "8.000,00" }

];

function mobileListViewTemplatesInit() {

$("#custom-listview").kendoMobileListView({

dataSource: kendo.data.DataSource.create({ data: groupedData }),

template: $("#customListViewTemplate").html(),

headerTemplate: "Ime razpisa"

});

}

var app = new kendo.mobile.Application($("#mjav"), {

skin: 'flat'

});

</script>

<script>

var app = new kendo.mobile.Application(document.body);

</script>

</body>

</html>

Any ideas?

ListView (Mobile)

answered on 03 Dec 2013

6 answers

229 views

Multiple .html files and drawers issues

I have an index.html with the follwing

<div data-role="view" id="view-home" data-layout="drawer-layout-home" data-title="ZUOL.CH APP">

<div>

<div data-role="content" class="view-content" >

<div id="home-vers-markus" class="boxshadow">

<h4 >

Klicken Sie oben links auf das Icon um die Navigation zu öffnen

</h4>

<h5>Firmen, Vereine, Gemeinden, Links und vielese mehr.</h5>

</div>

<div data-role="drawer" id="my-drawer-home" style="width: 270px" data-views="['/', 'view-home', 'view-home','view-witz', 'view-bild', 'view-wort']">

<h1>ZUOL.CH App</h1>

<ul data-role="listview" data-type="group" class="nobackground">

<li>

<ul>

<li data-icon="home" id="dl-firmen" class="dl-firmen">

<a href="firmen.html#firmen-home" data-transition="none">Firmen</a>

</li>

<li data-icon="contacts" id="dl-vereine" class="dl-verein">

<a href="#view-vereine" data-transition="none">Vereine</a>

</li>

<li data-icon="bookmarks" id="dl-gemeinden" class="dl-gemeinden">

<a href="#view-gemeinden" data-transition="none">Gemeinden</a>

</li>

<li data-icon="settings" id="dl-links" class="dl-links">

<a href="#view-links" data-transition="none">Links</a>

</li>

<li data-icon="settings" id="dl-links" class="dl-bild">

<a href="#view-bild" data-transition="none">Bild des Tages</a>

</li>

<li data-icon="settings" id="dl-links" class="dl-witz">

<a href="#view-witz" data-transition="none">Witz des Tages</a>

</li>

<li data-icon="settings" id="dl-links" class="dl-links">

<a href="#view-wort" data-transition="none">Wort zum Tag</a>

</li>

</ul>

</li>

<li>

<ul>

<li data-icon="about">

<a href="#drawer-about" data-transition="none">Über ZUOL.CH</a>

</li>

<li data-icon="globe">

<a href="#drawer-web" data-transition="none" >www.zuol.ch</a>

</li>

</ul>

</li>

<li>

<ul>

<li data-icon="action" id="dl-log-out">

<a id="bt_exit" onclick="exitFromApp()" data-icon="history">

Exit

</a>

</li>

</ul>

</li>

</ul>

</div>

<div data-role="layout" data-id="drawer-layout-home">

<header data-role="header">

<div data-role="navbar">

<a data-role="button" data-rel="drawer" href="#my-drawer-home" data-icon="drawer-button" data-align="left"></a>

<span data-role="view-title">ZUOL.CH</span>

</div>

</header>

</div>

now I have an firmen.html with the following

<div data-role="view" id="view-firmen-home" data-layout="drawer-layout-home" data-title="Firmen" >

<div>

<div data-role="content" class="view-content" >

<h2>Suchen nach</h2>

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<ul>

<li >

<a href="#view-firmen-branchen">Branche</a>

</li>

</ul>

</li>

</ul>

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<ul>

<li>

<a href="#view-firmen-ort">Ort</a>

</li>

</ul>

</li>

</ul>

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<ul>

<li>

<a href="#view-firmen-a-z">Alphabet</a>

</li>

</ul>

</li>

</ul>

</div>

<div data-role="view" id="view-firmen-branchen" data-init="getBranchen" data-layout="drawer-layout-firmen" data-title="Firmen nach Branche" >

<div data-role="content" class="view-content" >

<ul id="filterable-branchen" class="listen"></ul>

</div>

<script type="text/x-kendo-tmpl" id="firmen-branchen-template">

<div class="km-listview-link">

<a href="javascript:getFirmen('branche','#:User_branche#')">

<span>#:User_branche#</span>

</a>

</div>

</script>

</div>

I want to have two use two different drawers

index.html#view-home -> data-layout-home -> #my-drawer-home
firmen.html#view-firmen-home > data-layout-home -> #my-drawer-home
firmen.hmlt#view-firmen-branche -> data-layout-firmen -> #my-drawaer-firmen

I have not been able to get this to work.

Tried: put the code below in index.html not working
Tried: put the code in firmen.html not working either

The buttons do either nothing (console shows no error) or I get an error Uncaught TypeError: Cannot call method 'enable' of undefined

How should it be done.

If you split the mobile up in different .html files and want a drawer to be access from these different files how should it be done?

Kind Regards

Markus

<div data-role="drawer" id="my-drawer-firmen" style="width: 270px" data-views="['/', 'view-firmen-branche','view-firmen-ort']">

<h1>ZUOL.CH App</h1>

<ul data-role="listview" data-type="group" class="nobackground">

<li>

<ul>

<li data-icon="home" id="dl-home" class="dl-home">

<a href="#drawer-home" data-transition="none">Zurück</a>

</li>

<li data-icon="home" id="dl-firmen" class="dl-firmen">

<a href="firmen.html#view-firmen-branche" data-transition="none">Branch</a>

</li>

<li data-icon="contacts" id="dl-vereine" class="dl-verein">

<a href="firmen.html#view-firmen-ort" data-transition="none">Ort</a>

</li>

<li data-icon="bookmarks" id="dl-gemeinden" class="dl-gemeinden">

<a href="firmen.html#view-firmen-a-z" data-transition="none">A - Z</a>

</li>

</ul>

</li>

</ul>

</div>

<div data-role="layout" data-id="drawer-layout-firmen">

<header data-role="header">

<div data-role="navbar">

<a data-role="button" data-rel="drawer" href="#my-drawer-firmen" data-icon="drawer-button" data-align="left"></a><a data-role="button" data-rel="drawer" href="#my-drawer-firmen" data-icon="drawer-button" data-align="left"></a>

<span data-role="view-title">ZUOL.CH - Firmen</span>

</div>

</header>

</div>

Drawer (Mobile)

answered on 03 Dec 2013

11 answers

125 views

Plotbands by date instead of number

Hi,
I have a chart that uses a date axis and i wanted to plot recession shading based on its exact dates on the categoryaxis. I figured I use plotbands for this but I see that the "to" and "from" only takes numbers. Is there a workaround for using dates?

Thanks,
Tonih

Charts

answered on 03 Dec 2013