Questions on Kendo UI for jQuery Forum

11 answers

878 views

Hi everyone. I just started using the Kendo UI, and so far it's awesome.

I was previously using highcharts, but kendo is great, because it's a combo of highcharts and jquery UI. So I only need to load one set of scripts!

Anyway, I'm having some issues with formatting my charts.

I'm trying to create a small thumbnail chart for several instances on one page. The chart is supposed to track progress as a percent over a period of a quarter.

You can view what I've got so far here:
http://jmillspaysbills.com/clients/radolo/rockhabits/daily-huddle.html

Obviously right now each chart is loading the same data.

So, I'm having some problems with styling this chart. I have the category axis set up to have 65 points, wich would be the average business days in a quarter (it doesn't need to be exact). And I have the value axis as the points that will be recorded daily as a percentage. This works fine.

First thing I can't get right is trying to skip the major grid lines by 10. Currently it has all 65 lines, but as you can see that looks terrible.
Second, I have this huge padding on the top, left and bottom that I can't seem to get rid of.

Here is my code:

function createChart() {

$(".chart").kendoChart({

theme: $(document).data("kendoSkin") || "default",

legend: {

position: "bottom",

visible: false,

},

chartArea: {

background: "",

margin: 0,

},

plotArea: {

margin: 0,

border: {

width: 0

}

},

seriesDefaults: {

type: "line" ,

border: {

width: 1

},

margin: 0,

width: 1,

markers: {

visible: false,

}

},

series: [{

data: [0, 5, 5, 6, 8, 12, 16, 19, 20, 20, 23, 25, 28, 29, 29, 29, 32, 35, 35],

}],

valueAxis: {

majorUnit: 25,

max: 100,

min: 0,

majorGridLines: {

dashType: "dash",

}

},

categoryAxis: {

max: 65,

min: 0,

line: {

dashType: "dash" //or "dash", "longdash", "dashdot", "longdashdot" and "longdashdotdot"

},

majorGridLines: {

width: 1,

},

categories: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65 ],

majorUnit: 10,

},

tooltip: {

visible: true,

format: "{0}%",

},

axisDefaults: {

labels: {

visible: false

},

majorTickType: "none",

majorGridLines: {

width: 1,

},

}

});

}

$(document).ready(function() {

setTimeout(function() {

createChart();

// Initialize the chart with a delay to make sure

// the initial animation is visible

}, 400);

$(document).bind("kendo:skinChange", function(e) {

createChart();

});

Regarding the Major Grid lines, I've tried majorunit: 10 with no luck. Any ideas what I'm doing wrong?

As for the padding issue, I've tried adding margin of 0 to the plotarea, but that didn't seem to do anything.

Thanks in advance for any help you can give. I certainly appreciate it.

Charts

answered on 04 Dec 2013

2 answers

135 views

Force Kendo.Menu to open below the menu bar and show a page scroll bar

Please take a look at the below jsbin example

http://jsbin.com/oGaZukih/1/edit?html,css,js,output

You can see that I have told the menu to open below the menu bar (data-direction="bottom") but because the resulting menu item will be taller than the remaining height of the page it opens above the menu instead.

Is there a way to force the menu to open below the menu bar and force the page to show a scroll bar. We're trying to use the menu like the kendo tabstrip but use the popover / absolute position of the menu.

Neil

Menu

answered on 04 Dec 2013

1 answer

85 views

Implementing Only the Stacked Bar Chart

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

200 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

916 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

183 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

197 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

509 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>