I get this error when trying to bind remote data from a .Net Core endpoint to jQuery UI Grid.
Im hitting a .Net Core endpoint which returns a List<MyModel>
[HttpGet("/api/[controller]/[action]/{applicationId}/")]
public async Task<IActionResult> GetProducts(int applicationId)
{
//return List<MyModel>
var products = await this._mortgageApplicationService.GetMortgageApplicationProducts(applicationId);
var json = JsonConvert.SerializeObject(products);
return Ok(json);
}
In jQuery UI i have following javascript method which tries to display the json results.
Note I recreated the products json object locally and it worked as shown in the method below.
Why doesn't it work from the remote end point?
function getReportData() {
var applicationId = $("#MortgageApplicationId").val();
var url = "/api/MortgageStageProductsApi/GetProducts/" + applicationId;
//This does NOT work
$("#productGrid").kendoGrid({
dataSource: {
transport: {
read: url,
dataType: "json"
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
ProductProvider: { type: "string" },
ProductTypeName: { type: "string" },
MortgageExpiry: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: false,
serverFiltering: false,
serverSorting: false
},
filterable: true,
sortable: true,
pageable: false,
columns: [{
field: "Id",
filterable: false
}, {
field: "ProductProvider",
title: "Provider"
}, {
field: "ProductTypeName",
title: "Product Type"
}, {
field: "MortgageExpiry",
title: "Expiry"
}
]
});
//This works using json object created using the same json returned
var products = [
{
Id: 1,
MortgageApplicationId: 2171,
ProductProvider: "Ulster Bank",
MortgageTermYears: 5,
MortgageTermMonths: 10,
MortgageRepaymentType: 1,
ProductTypeId: 1,
ProductTypeName: "Fixed",
MortgageProductTermYears: 5,
MortgageExpiry: "2025-01-21T00:00:00",
MortgageLenderRate: null,
MortgageAdviceFee: 120,
ProductBrokerCommissionPercentage: 10,
ProductBrokerCommissionFlatFee: null,
DocumentsUploadedList: []
},
{
Id: 2,
MortgageApplicationId: 2171,
ProductProvider: "Ulster Bank",
MortgageTermYears: 5,
MortgageTermMonths: 10,
MortgageRepaymentType: 1,
ProductTypeId: 1,
ProductTypeName: "Fixed",
MortgageProductTermYears: 5,
MortgageExpiry: "2025-01-21T00:00:00",
MortgageLenderRate: null,
MortgageAdviceFee: 120,
ProductBrokerCommissionPercentage: 10,
ProductBrokerCommissionFlatFee: null,
DocumentsUploadedList: []
}
];
$("#productGrid1").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
ProductProvider: { type: "string" },
ProductTypeName: { type: "string" },
MortgageExpiry: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: false,
serverFiltering: false,
serverSorting: false
},
filterable: true,
sortable: true,
pageable: false,
columns: [{
field: "Id",
filterable: false
}, {
field: "ProductProvider",
title: "Provider"
}, {
field: "ProductTypeName",
title: "Product Type"
}, {
field: "MortgageExpiry",
title: "Expiry"
}
]
});
}I am running the current version, 2023.1.425.
The control is actually first created through asp.net core MVC, however I'm using the CustomCommand method as such. Please note the window is already initialized prior to this. Upon the first use of my custom "Tags" context menu, the window opens and I'm able to carry out operations as expected. After closing the window, and attempting to open it again, I get an error in the browser console.
var filemanagerNS = kendo.ui.filemanager;
filemanagerNS.commands.MyCustomCommand = filemanagerNS.FileManagerCommand.extend({
exec: function(){
var FileIDs = Array();
var i = $('#filemanager').getKendoFileManager().getSelected();
$(i).each(function(){
if (!this.isDirectory)
FileIDs.push(this.ID);
});
if (FileIDs.length > 0) {
// we'd call up our modal here populated with some kind of tag manager
$.post( "/Tags", { "FileIDs": FileIDs }, function( data ) {
$("#frmmodal").html(data).data("kendoWindow").open();
});
}
}
});This works the first time, but attempting to open the window again results in the following error:
Uncaught TypeError: n.filemanager.commands[t] is not a constructor
at init.executeCommand (kendo.all.js:318819:21)
at init.trigger (kendo.all.js:318819:21)
at init.action (kendo.all.js:318819:21)
at init._onSelect (kendo.all.js:318819:21)
at init.trigger (kendo.all.js:318819:21)
at init._triggerEvent (kendo.all.js:318819:21)
at init._triggerSelect (kendo.all.js:318819:21)
at init._click (kendo.all.js:318819:21)
at HTMLUListElement.dispatch (jquery.min.js:3:12445)
at r.handle (jquery.min.js:3:9174)
As a result, the component stops functioning entirely, not just the context menu -> window method that seems to be causing this.
TLDR: Never mind, user error
It seems that whether I specify labels: { visible: 'false' } or labels: { visible: 'true' }, the label is always displayed. I would have expected that specifying false would not cause the label to display. Specifying another option, such as labels: { format: '{0:C0}' }, does not cause the label to display.
Here is a dojo demonstrating the issue. Note that both the second and third bars display labels, even though the second bar has visible set to false. The first bar, specifying a format for the label, does not have its labels displayed.
Hi, we have a requirement to customise the month view of the scheduler. We are developing a system for users to log their on-call hours and overtime. Our pay month starts on the 24th through to the 23rd of the following month.
Is there a way customise the month view so that if Jan is selected it displays from Jan 24th through to Feb 23rd... if Feb is selected it displays from Feb 24th to March 23rd etc.
When viewing a month any dates outside the range should be disabled so for example if viewing May 2023 where May 24th is a Wednesday and the week begins on Mondays then May 22nd and 23rd would be disabled and as Jun 23rd is a Friday June 24th and 25th would be disabled.
Many thanks
Attached are examples I was able to do using FullCalendar JS by AR Shaw but I would prefer to use Kendo.
Hello,
How do change the header color, for each cards like the picture,
Thanks
Christophe
Hi,
We are looking into ways on how we can globally Html Sanitize/Purify anything that is rendered on a Kendo Grid. We are looking into the following options:
1. Create a custom widget that extends the Kendo Grid
2. Globally tap into databinding event
It would be awesome if the second option is possible.
I have a grid where the rows are selectable and I need a way to add a new row above the selected row.
Is there an example on how to achieve this?

Hello,
Please see the following example: https://dojo.telerik.com/UsIQijOG/10
Reproduction steps:
Expected:
Thanks,
Graham