Assuming I have the following HTML element
<div id="grid" />
the following script works:
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
I would like the following to work instead (and it doesn't):
$("#grid").kendoGrid({
columns: [
{ field: 0 },
{ field: 1 }
],
dataSource: [
[ "Jane Doe", 30 ],
[ "John Doe", 33 ]
]
});
I can make it work using a workaround like the sample below, but this is an ugly workaround - any chance this could be placed into the framework?
The reason is that JSON that contains array or arrays cost much less to transfer then a JSON with array of objects with named fields
function convertArrayToObjects(arrayOfArrays) { if (!Array.isArray(arrayOfArrays)) return arrayOfArrays; var arrayOfObjects = []; arrayOfArrays.forEach(function (arr) { if (!Array.isArray(arr)) arrayOfObjects.push(arr); else { // need to convert array to object var obj = {}; var hasOwnProp = Object.prototype.hasOwnProperty; for (var k in arr) { if (+k === (k & 0x7fffffff) && hasOwnProp.call(arr, k)) { obj['_'+k] = arr[k]; } } arrayOfObjects.push(obj); } }); return arrayOfObjects; }$("#grid").kendoGrid({ columns: [ { field: "_0" }, { field: "_1" } ], dataSource: convertArrayToObjects([ ["Jane Doe", 30], ["John Doe", 33] ]) });Is it possibile to add a context menu to cell.
The idea is add a right click on cell, header, footer to format it.
Any other options/idea is appreciated


I am using a KendoUI grid to display data on screen. Each row has a set of buttons that trigger various actions. One button triggers a modal popup asking the user to select a child item (generated via an ajax call) of the row before continuing on with the action. The first time the button is triggered, the select is correctly filled, however, on subsequent calls the select box is left blank as if the element doesn't exist. Any idea what I am doing wrong here:
$(document).ready(function () {
$('#formGrid').delegate('.exportButton', 'click', function () {
var button = $(this);
var formId = button.attr("data-form-id");
var formImplementationId = button.attr("data-form-implementation-id");
var formVersion = Number(button.attr("data-form-version"));
$.ajax({
url: AppSettings["BaseUrl"] + "/xxxx/GetVersions?formId=" + formId + "&formImplementationId=" + formImplementationId,
dataType: 'json',
success: function (data) {
$.each(data, function (index) {
var item = data[index];
$("#exportVersion").append("<option value=\"" + item.Version + "\">Version: " + item.Version + " (" + item.EffectiveDate + ")</option>")
});
}
});
var kendoWindow = $("<div />").kendoWindow({
title: "Export Form",
resizable: false,
modal: true
});
kendoWindow.data("kendoWindow")
.content($("#select-export-version").html())
.center().open();
kendoWindow
.find(".export-confirm")
.click(function () {
if ($(this).hasClass("export-confirm-yes")) {
window.location = AppSettings["BaseUrl"] + "/xxxx/ExportForm?formId=" + formId + "&formImplementationId=" + formImplementationId + "&formVersion=" + $('#exportVersion').val()
}
kendoWindow.data("kendoWindow").close();
})
.end()
});
});
$('#formGrid').kendoGrid({
dataSource: {
transport: {
read: {
url: '@Url.EncodedAction("GetForms", "xxxx")',
dataType: "json",
contentType: "application/json"
}
},
schema: {
model: {
fields: {
FormName: { type: "string" },
ContractName: { type: "string" },
EffectiveDate: { type: "date" },
UserName: { type: "string" },
IsDraft: { type: "string" },
FormId: { type: "string" },
FormImplementationId: { type: "string" },
FormVersion: { type: "number" }
}
}
},
pageSize: 15,
sort: [{ field: "FormName", dir: "asc" }]
},
sortable: true,
pageable: true,
columns: [
{field: "FormName", title: "Form"},
{field: "Version", title: "Version", width: 100},
{field: "ContractName", title: "Contract", width: 150},
{field: "EffectiveDate", title: "Last Modified", format: "{0:MM/dd/yyyy}"},
{title: "User", field: "UserName"},
{field: "Status", title: "Status", width: 120},
{
template: function (dataItem) {
buttons = '<div class="buttonDiv">';
buttons += '<button class="exportButton" title="Export Form" data-form-id="' + dataItem.FormId + '" data-form-implementation-id="' + dataItem.FormImplementationId + '" data-form-version="' + dataItem.Version + '"><span class="glyphicon glyphicon-open"></span></button>'
buttons += '</div>';
return buttons;
},
}
]
});
});
<script id="select-export-version" type="text/x-kendo-template">
<div id="export-file-modal" class="maintenance-modal">
<p>
<label for="exportVersion">Select the version of the form to export:</label><br />
<select id="exportVersion"></select>
</p>
<div id="export-buttons" class="text-center same-width">
<button class="export-confirm export-confirm-yes k-button k-default">Export</button>
<button class="export-confirm export-confirm-no k-button k-primary">Cancel</button>
</div>
</div>
</script>
In a non-MVVM enviroment, I can define the child entities of my hierarchical datasource by setting the schema:
var datasource = new kendo.data.HierarchicalDataSource({ data: [ /*... */ ], schema: { model: { children: "Assets" } }});
In a viewModel I am defining the same datasource like this:
function buildDataSource(data) { _.map(data.assets, function(item) { item.type = "folder"; }); var tree = unflatten(data.assets); return tree;}function loadTreeView(dataSource) { documentsModel.set("treeviewSource", kendo.observableHierarchy(dataSource)); kendo.bind($("#Treeview"), documentsModel);}$.ajax({ dataType: "json", url: "scripts/assets.json"}).then(buildDataSource).then(loadTreeView);
What is happening here, that I am loading a flat array of json objects from a file (later api endpoint) and unflatten this list, so it is in a hierachical format. The method to unflatten this array is naming the children "Assets". Running this, the treeview fails to display. If I change the unflatten method to name those children "items", the treebiew works.
You can reproduce this in this Dojo: http://dojo.telerik.com/UTOBe/3
Change items, to anything else and it stops working. How can I configure the kendo.observableHierarchy, so it uses any other property then "items" to determine if an object has children using a viewModel?
Destroying and recreating a Toolbar in the same DOM element causes problem with Splitbutton expansion via keyboard. To reproduce:
1. Create a toolbar with a splitbutton. Using the keyboard, tab to the splitbutton and use alt-down to expand it. Works great.
2. Destroy the toolbar with .destroy(), and empty the containing DOM element.
3. Create a toolbar with a splitbutton in the same (now empty) DOM.
4. Tab to the splitbutton and press alt-down. The splitbutton expands and immediately closes.
Demonstrated here: http://dojo.telerik.com/@richm/odATu
Any advice is greatly appreciated!I need to put a Registered Sign SuperScript in Combo. I managed to put a Registered Sign, but not in a superscript. It worked in the template, but when the user selects it, the html tags are displayed to the user as text in the input element.
The following link contains things that I tried:
http://dojo.telerik.com/eWAWO/2
Hi,
I'm using the Kendo UI Menu for Angular 1 to list projects users can access in a solution. Is it possible to use JSON objects received from a WebAPI directly as menuItems or will I have to remap these into simpler objects? In this demo you are using custom attributes, will I be able to access these in the select event (how?)?
Further more, is it possible to access the datasource from another function in my Angular controller? I am currently storing the project ID in localstorage and if I'm able to use JSON objects or custom attributes in MenuItems I'd like to access the datasource so I can retrieve properties/attributes from the MenuItems.
BR,
Henrik
