Questions on Kendo UI for jQuery Forum

6 answers

143 views

I have a stock chart that renders fine but the navigator graph does not match the main graph.

Both charts share the same series data.

The navigator seems to want to draw the graph by days rather than months and does not connect the plot points.

I have tried "missingValues: interpolate" but I only want the missing days to be handled and any missing months should go to zero on the valueAxis.

I have also played with the "baseUnit, baseUnitStep and autoBaseUnitSteps" but these only seem to affect the categoryAxis not the way the draw is rendered.

This is a stacked area chart and I want the navigator to match the main chart.

Any ideas on what I am doing wrong?

Charts

answered on 05 Aug 2014

1 answer

107 views

Keyboard behavior different from standard html select

I've created the following example in the dojo, http://dojo.telerik.com/ORor

Type "sm"
Small is selected
Pause for 5 seconds or so.
Type "sm"

The behavior in the kendo dropdown list is that the selected item does not change. In the standard HTML select the next "sm" item will be selected. In kendo you have to repeatedly type "s" in order for it to cycle to the next item. This means you can't skip past the several "sa" entries between the "sm" entries.

DropDownList

answered on 05 Aug 2014

1 answer

547 views

How to expand and collapse Hierarchy grid

I have used the following example to construct my kendo grid and I want to collapse and expand using a toggle button or link. I researched and I found one example which uses a function(ToggleAllKendoGridDetailRows) to expand and collapse the grid but I am getting errors saying that tbody is undefined. I tried to debug and I notice that  var grid = $('#Grid').data('kendoGrid'); grid is also undefined but I see my grid table works fine. can you please help?

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

<div id="example">
<div id="grid"></div>

<a href="#" class="toggleDetail" title="Expand all rows" onclick="ToggleAllKendoGridDetailRows('expand');">Toggle</a>

<script>
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
]
});
});

function ToggleAllKendoGridDetailRows(direction) {
//Get a collection of all rows in the grid
var grid = $('#Grid').data('kendoGrid');
var allMasterRows = grid.tbody.find('>tr.k-master-row');

//Loop through each row and collapse or expand the row depending on set deriction
if (direction == 'collapse') {
$(".toggleDetail").attr("onclick", "ToggleAllKendoGridDetailRows('expand')");
$(".toggleDetail").text("Expand all rows");
for (var i = 0; i < allMasterRows.length; i++) {
grid.collapseRow(allMasterRows.eq(i));
}
} else if (direction == 'expand') {
$(".toggleDetail").attr("onclick", "ToggleAllKendoGridDetailRows('collapse')");
$(".toggleDetail").text("Collapse all rows");
for (var i = 0; i < allMasterRows.length; i++) {
grid.expandRow(allMasterRows.eq(i));
}
}
}

function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "300px" }
]
});
}
</script>
</div>

</body>
</html>

Grid

answered on 05 Aug 2014

1 answer

527 views

Copy cell text to clipboard whith multiselect

Hi,
I'm trying to find a way to copy cell content to clipboard. It seems when grid is in multiselect mode, cell content is not available for selecting and coping.
I've tried to add context menu to each cell but with "multiselect row" target is always first TD.
Please advise.

Grid

answered on 05 Aug 2014

5 answers

744 views

css class and a new div to each node of the treeview draggable

This is my tree javascript:

$(function() {

$("#treeview-left").kendoTreeView({

dragAndDrop: true,

dataSource: [

{ text: "Furniture", expanded: true, items: [

{ text: "Tables & Chairs" },

{ text: "Sofas" },

{ text: "Occasional Furniture" }

] },

{ text: "Decor",expanded: true, items: [

{ text: "Bed Linen" },

{ text: "Curtains & Blinds" },

{ text: "Carpets" }

] },

{ text: "Shoes", expanded: true, items: [

{ text: "YVES SAINT LAURENT" },

{ text: "LUXE" },

{ text: "249" },

{ text: "GeoBlock" },

{ text: "LUXE" },

{ text: "Categoryid" },

{ text: "CategoryName" },

{ text: "ParentCategoryid" },

{ text: "Name" },

{ text: "Color" },

{ text: "Thumbnailurl" },

{ text: "Rolloverurl" },

{ text: "Designername" },

{ text: "Department" },

{ text: "GenderID" },

{ text: "Travel Tailoring" },

{ text: "Lab Designers" },

{ text: "Boots" },

{ text: "Belts" },

{ text: "Accessories" },

{ text: "Espadrilles" },

] }

]

});

</script>

i need to add a div with a color and a checkbox to each item of the tree is this possible?

Thanks!

TreeView

answered on 05 Aug 2014

1 answer

97 views

Toolbar button/split groups not getting keyboard events and cannot be tabbed to

http://demos.telerik.com/kendo-ui/toolbar/index
http://demos.telerik.com/kendo-ui/toolbar/integration

button groups or split buttons are not reacting to keyboard events and the buttons themselves cannot be tabbed to (or actioned) using the keyboard.

Toolbar

answered on 05 Aug 2014

1 answer

214 views

PivotGrid for flat data

I'm trying to use the PivotGrid to display flat data (no sums, measures, etcetera). The field names need to appear on the left column and the data (rows) are added as columns:

e.g.:
Date 8/1 8/2 8/3 8/4 8/5 8/6
Temperature 72 73 74 72 68 70
Humidity 72% 64% 65% 66% 64% 65%
Precipitation 0.1 0.1 0.2 0.1 0.1 0.2

A previous discussion thread suggested that the PivotGrid will handle this type of display.

The data will be flat and simple:
e.g.:
var forecast = [
{ Date: "8/1", Temperature: "72", Humidity: "72%", Precipitation: "0.1" },
{ Date: "8/2", Temperature: "73", Humidity: "64%", Precipitation: "0.1" },
...
];

The question is: how should the datasource be written? What would the schema, columns, rows, and measures be?

PivotGrid

answered on 05 Aug 2014

3 answers

602 views

Kendo Scheduler- Custom column in List View

Hello,

I am using kendo scheduler using MVC wrapper. I would like to know how can i add a custom column in List View whose data will be binded using model.

Regards,
Vijendra

Scheduler

answered on 05 Aug 2014

3 answers

248 views

Duplicate dropdowns appearing in Editor

Noticed a strange behavior with the editor - when I load it on the page with the tools "fontName", "fontSize"
those two dropdowns have a second, duplicate dropdown underneath them. This appears in both Firefox and Chrome.
if you search on the html snippits below for (inherited size) you'll find it twice.

I have the Edit control initially hidden on page load and it is revealed on a mouse click. The Editor appears several times inside a tab control and it occurs in each instance...

<td class="k-editor-toolbar-wrap" role="presentation"><ul class="k-editor-toolbar" role="toolbar" aria-controls="positionOverviewRichText"><li class="k-editor-button" role="presentation"><a href="" role="button" class="k-tool-icon k-bold" unselectable="on" title="Bold">Bold</a></li><li class="k-editor-button" role="presentation"><a href="" role="button" class="k-tool-icon k-italic" unselectable="on" title="Italic">Italic</a></li><li class="k-editor-combobox"><span style="" class="k-widget k-combobox k-header k-dropdown k-fontSize" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-busy="false"><span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default"><input class="k-input k-fontSize" type="text" autocomplete="off" tabindex="0" style="width: 100%;" aria-disabled="false" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-busy="false" unselectable="on"><span tabindex="-1" unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1">select</span></span></span><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input">(inherited size)</span><span unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s">select</span></span></span><select title="Font Size" class="k-fontSize" data-role="combobox" style="display: none;" aria-disabled="false" unselectable="on"><option value="inherit">(inherited size)</option><option value="xx-small">1 (8pt)</option><option value="x-small">2 (10pt)</option><option value="small">3 (12pt)</option><option value="medium">4 (14pt)</option><option value="large">5 (18pt)</option><option value="x-large">6 (24pt)</option><option value="xx-large">7 (36pt)</option></select></span></li><li class="k-editor-button" role="presentation"><a href="" role="button" class="k-tool-icon k-underline" unselectable="on" title="Underline">Underline</a></li><li class="k-editor-button" role="presentation"><a href="" role="button" class="k-tool-icon k-strikethrough" unselectable="on" title="Strikethrough">Strikethrough</a></li><li class="k-editor-colorpicker" role="presentation"><div class="k-widget k-colorpicker k-header k-foreColor" role="combobox" title="Color" data-role="colorpicker" aria-labelledby="positionOverviewRichText_forecolor_cp" tabindex="0"><span class="k-tool-icon" unselectable="on"><span class="k-selected-color" unselectable="on" style="background-color: rgb(0, 0, 0);"></span></span><span class="k-icon k-i-arrow-s" unselectable="on"></span></div></li><li class="k-editor-colorpicker" role="presentation"><div class="k-widget k-colorpicker k-header k-backColor" role="combobox" title="Background color" data-role="colorpicker" aria-labelledby="positionOverviewRichText_backcolor_cp" tabindex="0"><span class="k-tool-icon" unselectable="on"><span class="k-selected-color" unselectable="on" style="background-color: rgb(0, 0, 0);"></span></span><span class="k-icon k-i-arrow-s" unselectable="on"></span></div></li><li class="k-editor-button" role="presentation"><a href="" role="button" class="k-tool-icon k-justifyLeft" unselectable="on" title="Align text left">Justify Left</a></li><li class="k-editor-button" role="presentation"><a href="" role="button" class="k-tool-icon k-justifyCenter" unselectable="on" title="Center text">Justify Center</a></li><li class="k-editor-button" role="presentation"><a href="" role="button" class="k-tool-icon k-justifyRight" unselectable="on" title="Align text right">Justify Right</a></li><li class="k-editor-button" role="presentation"><a href="" role="button" class="k-tool-icon k-justifyFull" unselectable="on" title="Justify">Justify Full</a></li><li class="k-editor-button" role="presentation"><a href="" role="button" class="k-tool-icon k-insertUnorderedList" unselectable="on" title="Insert unordered list">Remove Link</a></li><li class="k-editor-button" role="presentation"><a href="" role="button" class="k-tool-icon k-insertOrderedList" unselectable="on" title="Insert ordered list">Remove Link</a></li><li class="k-editor-button" role="presentation"><a href="" role="button" class="k-tool-icon k-indent" unselectable="on" title="Indent">Indent</a></li><li class="k-editor-button" role="presentation"><a href="" role="button" class="k-tool-icon k-outdent k-state-disabled" unselectable="on" title="Outdent">Outdent</a></li><li class="k-editor-selectbox"><span style="" class="k-widget k-dropdown k-header k-formatBlock" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-busy="false"><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input">Paragraph</span><span unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s">select</span></span></span><select title="undefined" class="k-formatBlock" data-role="selectbox" style="display: none;" unselectable="on"><option value="p">Paragraph</option><option value="blockquote">Quotation</option><option value="h1">Heading 1</option><option value="h2">Heading 2</option><option value="h3">Heading 3</option><option value="h4">Heading 4</option><option value="h5">Heading 5</option><option value="h6">Heading 6</option></select></span></li><li class="k-editor-button" role="presentation"><a href="" role="button" class="k-tool-icon k-createLink" unselectable="on" title="Insert hyperlink">Create Link</a></li><li class="k-editor-button" role="presentation"><a href="" role="button" class="k-tool-icon k-unlink k-state-disabled" unselectable="on" title="Remove Link">Remove Link</a></li></ul></td>

Editor

answered on 05 Aug 2014

2 answers

73 views

Scheduler forces Pacific(my local) on an update everytime

$("#scheduler").kendoScheduler({
timezone: "Etc/UTC", //still it gives pacific?
date: selectedDate,
....

why?

I have the
src="/Scripts/kendo.all.min-2.js"

in it too.

This is on an update and save, does my datasource need to change:

dataSource: {
batch: true,
transport: {
read: {
url: baseURL + "?mode=read",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8"
},
update: {
url: baseURL + "?mode=update",
dataType: "json",
type: "POST",
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
complete: function (e) {
//need to reload because of the timezone problems
$("#scheduler").data("kendoScheduler").dataSource.read();
}
},
create: {
url: baseURL + "?mode=create",
dataType: "json",
type: "POST",
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
complete: function (e) {
$("#scheduler").data("kendoScheduler").dataSource.read();
}
},
destroy: {
url: baseURL + "?mode=destroy",
dataType: "json",
type: "POST",
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
complete: function (e) {
$("#scheduler").data("kendoScheduler").dataSource.read();
}
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: options.models };
}
}
},
options: {
model: {
id: "taskId",
fields: {
taskId: { from: "TaskID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true} },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
ownerId: { from: "OwnerID", defaultValue: 1 }
}
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "TaskID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true} },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
ownerId: { from: "OwnerID", defaultValue: 1 }
}
}
}
},

Scheduler

answered on 05 Aug 2014