Questions on Kendo UI for jQuery Forum

1 answer

126 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

570 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

548 views

[Solved] 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

772 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

117 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

238 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

627 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

275 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

90 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

2 answers

113 views

[Solved] Using Custom Widget as Custom Editor in a grid

Hi,

I'm having trouble using my custom widget as a custom editor in a grid. It seems to call the init of my widget 3 times for every line. Also when I click on a cell with my widget, it disappears. The widget works correctly outside of the grid and binds fine. I want my grid to be inline edit with batch edit so it is permanently in edit mode like an Excel spreadsheet. Please can you help me see what I'm doing wrong. Thanks.

My grid definition:
    <div
        id="elgrid"
        style="width: 750px; height: 350px"
        data-role="grid"
        data-editable="{mode: 'incell', createAt: 'bottom'}"
        data-bind="source: equipmentDetailSource, events: { edit: gridEdit }"
        data-selectable="cell"
        data-filterable="false"
        data-auto-bind="true"
        data-columns='[ {"field": "EquipmentRequestLineNo", "title": "Line No"},
                        {"field": "EquipmentId", "title": "Equipment"},
                        {"field": "Quantity", "title": "Quantity"},
                        {"field": "RecipientName", "title": "Recipient", "template": kendo.template($("#findUsertemplate").html())},
                        {"field": "Reason", "title": "Reason"},
                        {"command": "destroy", "title": " ", "width": "110px"}]'>
    </div>

    <script type="text/x-kendo-template" id="findUsertemplate">
        <div data-role="usersearch" data-bind="value: RecipientBems, events: { change: change }" data-display-bems="false"></div>
    </script>

General Discussions

answered on 05 Aug 2014