or
1 answer
66 views
I'd like to build a grid of divs.
I have an array of arrays, like this:
[
[
{
"value": "0"},
{
"value": "1",
}
]
]
(Sorry, but I can't indent the code properly in the editor.)
I can't do it with MVVM.
This is how I do it:
Template container:
<div data-bind="source: matrix" data-template="frame-cells-row-tmpl">
</div>
Template row:
<script type="text/x-kendo-template" id="frame-cells-row-tmpl">
<div class="frame-grid-row" data-bind="source: data" data-template="frame-cells-col-tmpl">
</div>
</script>
Template col:
<script type="text/x-kendo-template" id="frame-cells-col-tmpl">
<div class="frame-grid-col">
#: value #
</div>
</script>
The error I get is:
It works fine if I do this:
<script type="text/x-kendo-template" id="frame-cells-row-tmpl">
<div class="frame-grid-row" >
## for(var i=0; i < data.length; i++) { ##
<div class="frame-grid-cell">
##= data[i].value ##
</div>
## } ##
</div>
</script>Why can't I use MVVM?
In the "row" template, is "data" the correct variable name for "source"?Many thanks!
Neli
Telerik team
answered
on
26 Sep 2025
1 answer
61 views
Hello. I am planning to use the taskboard for my code, but I would like to customize it a little bit. However Im finding almost any customization to be not possible. Im working with Copilot and its telling me a couple things that dont appear to be true:
1. On the datasource tab, I have commented out code because Copilot has told me that if I use the from attribute when defining the model that those fields would automatically map to its default title and description fields. It stays undefined until I switch to the default values.
2. The custom editor I have specified does not get acknowledged by the code. It simply loads the default one with Title and description fields. At the very minimum I just want it to show different labels than title and descritpion, such as PartyName and comments. However Im not seeing any way to not just load the out of the box solution.
Are my requests possible? The example code on this site just appear to use out of the box editing and mapping.
<body>
<div id="taskBoard"></div>
<script id="JurisdictionEditor" type="text/x-kendo-template">
<div style="padding:2em; color:red;">Custom Editor Rendered!</div>
</script>
<script>
$(function () {
$("#taskBoard").kendoTaskBoard({
dataSource: [
{ id: 1, title: "Jane", description: "Test", status: "cited" }
// { id: 1, PartyName: "Jane", comments: "Test", status: "cited" } //doesnt work
],
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
title: { from: "PartyName", type: "string" },
description: { from: "comments", type: "string" },
PartyName: { type: "string" },
comments: { type: "string" },
status: { type: "string" }
}
}
},
columns: [
{ text: "Cited", status: "cited" }
],
cardTemplate: "<div class='k-card-header'>#: PartyName #</div><div class='k-card-body'>#: comments #</div>",
editorTemplate: kendo.template($("#JurisdictionEditor").html())
});
});
</script>
</body>
Nikolay
Telerik team
answered
on
23 Sep 2025
5 answers
1.8K+ views
I have an editor configured for a column which can reflect multiple values - the multiselect control binds to the source datasource just fine when a grid row is edited or a new record is being created but for the pure edit portion I need to preselect the current values from the grid row datasource - the values are there in the row object because I can see them when I do a console.log of the model field via e.model.get("UserRoleSectors") (example of value is ["2","25"] ) - however in the grid edit event handler if I try to set the value for the multi-select to ensure it reflects what values are already bound to the record via the statement e.container.find('[name="UserRoleSectors"]').data("kendoMultiSelect").value(e.model.get("UserRoleSectors")); - nothing is selected even though the values are available in the multiselect. Am I doing something wrong?
editor: function (container, options) { // create an input element var input = $('<select multiple="multiple" />'); // set its name to the field to which the column is bound input.attr("name", options.field); // append it to the container input.appendTo(container); // initialize a Kendo UI MultiSelect input.kendoMultiSelect({ autoBind: true, valuePrimitive: true, dataTextField: "SectorAcronym", dataValueField: "SectorNo", dataSource: $scope.sectorsDataSource });
Jeff
Top achievements
Rank 1
Iron
Rank 1
Iron
answered
on
22 Sep 2025
1 answer
170 views
Hi Telerik team!
I'm trying to scale my linechart by setting zoom Css property, but this is affecting mouse events and messing up the tooltip position and the marking wrong focused item.
As you can see here:
https://dojo.telerik.com/RQNGZUUK
So, is possible to scale linechart without affect mouse events?
Regards,
Gustavo
Nikolay
Telerik team
answered
on
22 Sep 2025
0 answers
49 views
Display original size when inserting images
Donglei
Top achievements
Rank 1
Rank 1
asked
on
22 Sep 2025
0 answers
73 views
Hello —
we're seeing an Uncaught Error: Invalid template when rendering a Kendo template that contains a calc() CSS expression with a #= ... # interpolation. The template works on older browsers (Edge 139 and older) but fails on newer ones (Edge 140+, recent Chrome). Could this be a compatibility/escaping change in the template engine or browser JS engine? Any guidance or workaround would be appreciated.
Code Used:
<!--SmartView Pipeline STEP Template-->
<script id="smartViewPipelineStepTemplate" type="text/x-kendo-template">
<div class="col-xs-4">
<div class="contenitor-element-process-monitor">
<div class='pipelineTask element-process-monitor
#if(completion() < 100){ if(completion() > 0){ # blue # } }#
#if(completion()==100){ # complete # }#
#=type#'
idStep='#:idStep()#'>
<div class='clickableStep'>
<div class='process-monitor-name'>#: stepNumber #</div>
<div class='process-monitor-description'>#:stepNameShort()#</div>
<div class='info-process-monitor'></div>
<!-- erroring line -->
<div style="width:calc(#=completion()#% - 24px)" class='progress-process-monitor clickableStep'>
<p>#=completion()#%</p>
</div>
</div>
</div>
</div>
</div>
</script>
Error shown in console
Uncaught Error: Invalid template: '<div class="col-xs-4"> ... <div style="width:calc(#=completion()#% - 24px)" ...>'
Environment/Version
Kendo UI: v2019.1.220 (Kendo jQuery bundle in production)
jQuery: 1.12.4 included in the project
Browsers where error occurs: Edge 140+, recent Chrome (older Edge 139 works)
Template uses legacy Kendo template syntax (
#=,#:,# if(...) { # ... # } #)
1 answer
70 views
I have a Kendo UI Grid Dojo that I am working on. When I set locked on the columns to "true", some of the columns (country, city, name) disappear.
Update: If I add a width attribute to every column, the columns stop disappearing, however when I then add in reordable, I am able to move unlocked columns over to the locked columns side. Is there a way to prevent users from moving columns from locked to unlocked and vice verca?
Here is the example:
https://dojo.telerik.com/tVXUmrjz
Javascript:
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: "https://demos.telerik.com/service/v2/core/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipCity: { type: "string" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShippedDate: {type: "date" }
}
}
},
pageSize: 15
},
height: 550,
pageable: true,
reorderable: true,
columns: [
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}",
locked: true
},
{
field: "ShipCountry",
title: "Ship Country",
locked: true
},
{
field: "ShipCity",
title: "Ship City"
},
{
field: "ShipName",
title: "Ship Name"
},
{
field: "ShippedDate",
title: "Shipped Date",
format: "{0:MM/dd/yyyy}",
width: 200
},
{
field: "OrderID",
title: "ID",
width: 80
}
]
});
});
1 answer
120 views
Hi,
I am experimenting with this grid control.
I have this code where I am filling a grid with data from the SQL table. The data is loading good.
Second step : I want to edit the row and in this case , I want to edit City column which will be a dropdown in edit mode. I have the code to pull the data from database. My API is returning cities. I can see it in console.log. However, the dropdown in the edit mode does not show any data. It is blank. I am not sure where to fix it or how to fix it.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<link href="https://kendo.cdn.telerik.com/themes/12.0.0/default/default-main.css" rel="stylesheet" />
<!-- Add the Kendo library by either using the JAVASCRIPT MODULES -->
<script src="https://kendo.cdn.telerik.com/2025.3.825/mjs/kendo.all.js" type="module"></script>
<script src="telerik-license.js" type="text/javascript"></script>
<div id="tripsGrid"></div>
<script type="text/javascript" >
$(document).ready(function() {
$("#tripsGrid").kendoGrid({
dataSource: {
transport: {
read: {
url: "http://localhost:54243/api/Dispatch/GetTripsForSelectedDate", // Replace with your actual API endpoint
type: "GET", // <-- key change
dataType: "json",
contentType: "application/json"
},
parameterMap: function (options, type) {
if (type === "read") {
return kendo.stringify({
page: options.page,
pageSize: options.pageSize,
sort: options.sort,
filter: options.filter,
date: $("#datePicker").val() || null // if you have a date picker
});
}
// For create/update/destroy, send the model as JSON.
// If you enable batch: true later, handle options.models[0] instead.
if (type === "create" || type === "update" || type === "destroy") {
return kendo.stringify(options); // 'options' is the dataItem for non-batch
}
}
},
schema: {
model: {
id: "Trip_ID",
fields: {
Trip_ID: { type: "number" },
Route: { type: "string" },
RouteID: { type: "number" },
Start_Dt: { type: "string", editable : true },
LastName: { type: "string", editable : true },
FirstName: { type: "string", editable : true },
StartDesc: { type: "string" },
StartAddr1: { type: "string" },
StartAddr2: { type: "number" },
StartCityID: { type: "number", editable : true },
StartStateID: { type: "number", editable : true },
StartZipID: { type: "number", editable : true },
StartCity : { type: "string", editable : true },
StartState: { type: "string" },
StartZip: { type: "string" }
}
}
},
pageSize: 10, // Optional: for client-side paging
serverPaging: true, // Set to true for server-side paging
serverSorting: true, // Set to true for server-side sorting
serverFiltering: true // Set to true for server-side filtering
},
height: 550,
sortable: true,
pageable: true,
filterable: true,
editable: { mode: "inline", confirmation: "Delete this trip?" },
columns: [
{ command: ["edit", "destroy"], title: " ", width: 180 },
{ field: "Trip_ID", title: "TripID" },
{ field: "Route", title: "Route", format: "{0:c}" },
{ field: "RouteID", title: "RouteID" },
{ field: "Start_Dt", title: "Start Date" },
{ field: "LastName", title: "Last Name" },
{ field: "FirstName", title: "First Name" },
{ field: "StartDesc", title: "Start Desc" },
{ field: "StartAddr1", title: "Addr1" },
{ field: "StartAddr2", title: "Addr2" },
{ field: "StartCityID", title: "Start City ID", editor: startCityDropdownEditor, template: "#: StartCity #" },
{ field: "StartStateID", title: "Start State ID" },
{ field: "StartZipID", title: "Start Zip ID" },
{ field: "StartCity", title: "StartCity", editor: startCityDropdownEditor, template: "#: StartCity #" },
{ field: "StartState", title: "StartState" },
{ field: "StartZip", title: "StartZipcode" }
]
});
});
//&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
function startCityDropdownEditor(container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
optionLabel: "Select city...",
dataTextField: "LkupItem",
dataValueField: "LkupItemID",
valuePrimitive: true, // model field is a number, not an object
filter: "contains", // searchable
autoBind: true,
dataSource: {
transport: {
read: {
url: "http://localhost:54243/api/Dispatch/GetCities", // API below
type: "GET", // keep POST to avoid 405/WebDAV issues
dataType: "json",
contentType: "application/json"
}
},
schema: { data: "data" } , // expect { data: [...] }
requestEnd: function(e) {
// log the raw response payload
console.log("API Response for GetCities:", e.response);
// log the parsed data that DropDownList will bind to
console.log("Parsed City List:", this.data());
}
},
change: function (e) {
// keep StartCity (name) in sync so the display template shows new text
var item = this.dataItem();
if (item && options.model) {
options.model.set("StartCity", item.LkupItem);
}
},
dataBound: function () {
// Ensure selected value shows when editing existing rows
if (options.model.StartCityID != null) {
this.value(options.model.StartCityID);
}
}
});
}
</script>
</asp:Content>
Thanks,
Ravi
Nikolay
Telerik team
answered
on
18 Sep 2025
1 answer
81 views
Hi,
I’m moving from PivotGrid (v1) to PivotGridV2 on Kendo UI for jQuery 2025.3.825 with an ASP.NET MVC (.NET 8) backend.
In v1 my grid called the controller just fine. In V2, the grid renders, but no data is loaded from the controller and the console keeps showing:
TypeError: Cannot read properties of undefined (reading 'cube')
If I feed local flat data, V2 renders correctly — so my fields, cube, rows/columns/measures seem fine. The problem appears only when I switch to remote flat binding.
- PivotGridV2 (client cube / flat binding) to call my MVC action via transport.read and render the returned rows.
- Built-in Excel export to work (it does, when data is present).
What I see
- requestStart fires, then I get a transport error, followed by the “reading 'cube'” error.
- With local data injected, the table renders fine (so the cube + axes look OK).
Code :
const pg = $("#pivotgrid").kendoPivotGridV2({
height: 570,
columnTotals: false,
rowTotals: false,
dataSource: new kendo.data.PivotDataSourceV2({
transport: {
read: {
url: '@Url.Action("GetPivotData", "ControllerPivot")',
type: "POST",
dataType: "json"
// (also tried contentType: "application/json" + JSON.stringify in parameterMap)
},
parameterMap: function () {
return {
year: $("#yearDDL").data("kendoDropDownList")?.value(),
periode: $("#periodDDL").data("kendoDropDownList")?.value()
};
}
},
schema: {
// if server returns { data:[...] } I can switch this on:
// data: "data",
model: {
fields: {
Version: { type: "string" },
Period: { type: "string" },
Parameter: { type: "string" },
Value: { type: "number" }
}
},
cube: {
dimensions: {
Version: { dataMember: "Version" },
Period: { dataMember: "Period" },
Parameter: {
caption: "Parameter",
hierarchies: [{
name: "By Parameter",
levels: [{ name: "Parameter", field: "Parameter" }]
}]
}
},
measures: {
Value: { field: "Value", aggregate: "sum", format: "{0:n2}" }
}
}
},
columns: [{ name: "Version", expand: true }],
rows: [{ name: "Parameter", expand: true }],
measures: ["Value"],
requestStart: e => console.log("[requestStart]", e),
requestEnd: e => console.log("[requestEnd]", e),
error: e => console.error("[transport error]", e)
})
}).data("kendoPivotGridV2");
$("#configurator").kendoPivotConfiguratorV2({
dataSource: pg.dataSource, updateOnApply: true, filterable: true, height: 570
});
Environment
Kendo UI for jQuery 2025.3.825
PivotGridV2 + PivotConfiguratorV2
ASP.NET MVC (.NET 8) backend
Neli
Telerik team
answered
on
17 Sep 2025
2 answers
137 views
Hi,
Would like to dynamically control whether a grid has a slider control for the roles.
The algorithm /flow would look something like this:
grid is declared and options initialized within windows.onload or $(document).ready(function() {});
user makes selection to load grid
data populates the datSource from an API request.
if(dataSource.length > 10 )
then let scrollable = true;
else
scrollable = false;
The idea here is it would dynamically adjust that scrollable option after a certain length threshold would be met.
attached here is how I have my grid set up..also I have the sort and dataBound handlers doing stuff.
Here is inline version of JavaScript / jQuery kendo code that declares and does some initialization:
$("#myGrid").kendoGrid({
width: 1400,
height: 500,
sortable: {
mode: "single",
allowUnsort: false
},
resizable: true,
editable: true,
scrollable: true,
columns: modifiedColumns, // Use updated columns
dataSource: mappingsDS,
selectable: "multiple, row",Thanks,
George
Neli
Telerik team
answered
on
15 Sep 2025
