001.var dataSource = new kendo.data.DataSource({002. batch: false,003. autoSync: true,004. transport: {005. read: {006. url: "/monitoring/matrix/routecontentrules?format=json",007. contentType: "application/json; charset=utf-8",008. dataType: "json",009. type: "POST",010. timeout: 30000011. },012. update: {013. url: "/monitoring/matrix/routecontentrules/updateroutecontentrule",014. contentType: "application/json; charset=utf-8",015. dataType: "json",016. type: "PUT"017. },018. create: {019. url: "/monitoring/matrix/routecontentrules/createroutecontentrule",020. contentType: "application/json; charset=utf-8",021. dataType: "json",022. type: "POST"023. },024. destroy: {025. url: "/monitoring/matrix/routecontentrules/deleteroutecontentrule",026. contentType: "application/json; charset=utf-8",027. dataType: "json",028. type: "DELETE"029. },030. parameterMap: function (data, operation) {031. if (operation == "read") {032. return kendo.stringify({033. RouteId: routeDataItem.RouteId034. });035. }036. else if (operation == "destroy") {037. return kendo.stringify({038. Id: data.Id,039. });040. }041. else {042. return kendo.stringify({043. Id: data.Id,044. RouteId: routeDataItem.RouteId,045. OrderId: data.OrderId,046. SenderMatch: data.SenderMatch,047. ContentMatch: data.ContentMatch,048. SenderReplace: data.SenderReplace,049. ContentReplace: data.ContentReplace,050. });051. }052. }053. },054. schema: {055. model: {056. id: "Id",057. fields: {058. Id: { type: "number", defaultValue: 0 },059. OrderId: { type: "number", defaultValue: 0 },060. SenderMatch: { type: "string", defaultValue: "" },061. ContentMatch: { type: "string", defaultValue: "" },062. SenderReplace: { type: "string", defaultValue: "" },063. ContentReplace: { type: "string", defaultValue: "" }064. }065. }066. }067.});068. 069.$("#Grid").kendoGrid({070. dataSource: dataSource,071. reorderable: false,072. resizable: false,073. sortable: false,074. groupable: false,075. scrollable: true,076. navigatable: true,077. editable: true,078. columns: [079. {080. width: 150, field: "SenderMatch", title: "Sender match",081. template: "<span><label class='SenderMatch'</label></span>",082. headerAttributes: { title: "Sender match", style: "text-align: right" }, attributes: { style: "text-align: right" }083. },084. {085. width: 150, field: "ContentMatch", title: "Content match",086. template: "<span><label class='SenderMatch'</label></span>",087. headerAttributes: { title: "Content match", style: "text-align: right" }, attributes: { style: "text-align: right" }088. },089. {090. width: 150, field: "SenderReplace", title: "Sender replace",091. template: "<span><label class='SenderMatch'</label></span>",092. headerAttributes: { title: "Sender replace", style: "text-align: right" }, attributes: { style: "text-align: right" }093. },094. {095. width: 150, field: "ContentReplace", title: "Content replace",096. template: "<span><label class='SenderMatch'</label></span>",097. headerAttributes: { title: "Content replace", style: "text-align: right" }, attributes: { style: "text-align: right" }098. },099. {100. command: [101. { name: "destroy", template: "<a class='k-button k-grid-delete delete'><span class='k-sprite px-sprite px-i-sm-trash'></span></a>" }102. ],103. width: "50px"104. }105. ],106. toolbar: kendo.template('<span class="ReloadManipulationByCustomer" style=""><span class="k-icon k-i-refresh refresh-btn"></span></span><a class="k-button k-grid-add add-btn" href="javascript:void(0)"><span class="k-sprite px-sprite px-i-sm-new new" />Add</a>')107.});108. 109.$(".ReloadManipulationByCustomer").click(function () {110. $("#Grid").data("kendoGrid").dataSource.read();111.});
For backend I am using ServiceStack, requests are define as followed:
01.[Route("/monitoring/matrix/routecontentrules/createroutecontentrule", "POST")]02.[Route("/monitoring/matrix/routecontentrules/updateroutecontentrule", "PUT")]03.public sealed class CreateUpdateRouteContentRuleRequest04.{05. public int Id { get; set; }06. 07. public int OrderId { get; set; }08. 09. public int RouteId { get; set; }10. 11. public string SenderMatch { get; set; }12. 13. public string ContentMatch { get; set; }14. 15. public string SenderReplace { get; set; }16. 17. public string ContentReplace { get; set; }18.}19. 20.[Route("/monitoring/matrix/routecontentrules")]21.public sealed class RouteContentRulesRequest22.{23. public int RouteId { get; set; }24.}25. 26.[Route("/monitoring/matrix/routecontentrules/deleteroutecontentrule")]27.public sealed class DeleteRouteContentRuleRequest28.{29. public int Id { get; set; }30.}31. 32.public sealed class RouteContentRuleModel33.{34. public int Id { get; set; }35. 36. public int OrderId { get; set; }37. 38. public int RouteId { get; set; }39. 40. public string SenderMatch { get; set; }41. 42. public string ContentMatch { get; set; }43. 44. public string SenderReplace { get; set; }45. 46. public string ContentReplace { get; set; }47.}Code for retrieving data is as follows:
01.public object Post(RouteContentRulesRequest request)02.{03. return _dbConnectionFactory04. .OpenReadOnlyAndRun(dbConn => dbConn.Select<RouteContentRule>(r => r.RouteId == request.RouteId).OrderBy(r => r.OrderId));05.}06. 07.public object Any(CreateUpdateRouteContentRuleRequest request)08.{09. RouteContentRule entity;10. 11. if (!Db.Exists<Route>(new { Id = request.RouteId }))12. {13. throw new HttpError(HttpStatusCode.BadRequest, $"Route with id {request.RouteId} does not exist");14. }15. if (request.Id != 0)16. {17. var routeContentRule = _dbConnectionFactory.OpenReadOnlyAndRun(dbConn => dbConn.SingleById<RouteContentRule>(request.Id));18. entity = request.ToEntity(routeContentRule);19. Db.Update(entity, r => r.Id == routeContentRule.Id);20. return entity.ToModel();21. }22. 23. entity = request.ToEntity();24. entity.OrderId = (_dbConnectionFactory.OpenReadOnlyAndRun(dbConn => dbConn.Scalar<RouteContentRule, int?>(x => Sql.Max(x.OrderId), x => x.RouteId == request.RouteId)) ?? 0) + 1;25. var id = (int)Db.Insert(entity, true);26. entity.Id = id;27. 28. return entity.ToModel();29.}30. 31.public void Delete(DeleteRouteContentRuleRequest request)32.{33. Db.Delete<RouteContentRule>(new {Id = request.Id});34.}
Data during read request is as follows:
01.[02. {03. "Id":35,04. "OrderId":1,05. "RouteId":72303,06. "SenderMatch":"335",07. "ContentMatch":"",08. "SenderReplace":"",09. "ContentReplace":""10. },11. {12. "Id":36,13. "OrderId":2,14. "RouteId":72303,15. "SenderMatch":"55",16. "ContentMatch":"",17. "SenderReplace":"",18. "ContentReplace":""19. }20.]
Problem is that grid is not showing these data. I can see that data is here if I click on grid cell. In that situation that cell become editable and it is showing current value of data. But as soon as I move editing to some new cell previous hide data. I was inspecting cell and I have found out that when cell is not editing it is described as following:
1.<td style="text-align: right" aria-describedby="50349c08-da61-49d2-aa73-9c0823d4a4a4" role="gridcell">2. <span><label class="SenderMatch" <="" label=""></label></span>3.</td>
And when cell is in edding mode it is described in html as following:
1.<td style="text-align: right" aria-describedby="ccc2df23-b49a-4b00-820a-02a67c428a52" role="gridcell" id="Grid_active_cell" class="k-edit-cell" data-role="editable">2. <input type="text" class="k-input k-textbox" name="SenderMatch" data-bind="value:SenderMatch">3.</td>I do not know why data is not showing. From what I can tell it should show data, but it is not showing this data.

Does the kendo grid support multi-header , multi-data low layout?
I attached the table layout that I want.

Hello,
I can't seem to find a way to sort my filter values into alpha order when the values are being pulled from JSON. Previously filtername.sort() had worked when I had the JSON data directly on the page but that is not an option with this implementation.
Live page:
https://www.ccah-alliance.org/Urgent-Visit-Providers.html
Code:
<div id="grid"></div>
<script>
$(document).ready(function () {
var myDataSource =
new kendo.data.DataSource({
data: JSON,
schema: {
model: {
fields: {
"ProviderName": { type: "string" },
"OfficeName": { type: "string" },
"OfficeAddress": { type: "string" },
"OfficeCityStateZip": { type: "string" },
"PrimarySpecialty": { type: "string" },
"ProviderLanguages": { type: "string" },
"Hospitals": { type: "string" }
}
}
},
transport: {
read: "/aspnetforms/UrgentVisitProviders.ashx"
},
pageSize: 15,
sort: [
{ field: "OfficeCityStateZip", dir: "asc" },
]
});
myDataSource.read();
$("#grid").kendoGrid({
dataSource: myDataSource,
dataBound:
function (e) {
var data = $("#grid").data("kendoGrid").dataSource._data;
for (i = 0; i < data.length; i++) {
if (myCities.indexOf(data[i].OfficeCityStateZip) === -1) {
myCities.push(data[i].OfficeCityStateZip);
}
if (mySpecialty.indexOf(data[i].PrimarySpecialty) === -1) {
mySpecialty.push(data[i].PrimarySpecialty);
}
if (myLanguages.indexOf(data[i].ProviderLanguages) === -1) {
myLanguages.push(data[i].ProviderLanguages);
}
if (myHospitals.indexOf(data[i].Hospitals) === -1) {
myHospitals.push(data[i].Hospitals);
}
}
},
columns: [{
field: "ProviderName",
title: "Provider",
width: 80,
filterable: false
},
{
field: "OfficeName",
title: "Office",
width: 110,
filterable: false
},
{
field: "OfficeAddress",
title: "Address",
width: 100,
filterable: false
},
{
field: "OfficeCityStateZip",
title: "City/State/Zip",
width: 105,
filterable: {
ui: cityFilter
}
},
{
field: "PrimarySpecialty",
title: "Specialty",
width: 80,
filterable: {
ui: specialtyFilter
}
},
{
field: "ProviderLanguages",
title: "Languages Spoken",
width: 85,
filterable: {
ui: languagesFilter
}
},
{
field: "Hospitals",
title: "Hospital",
width: 100,
filterable: {
ui: hospitalFilter
}
}],
sortable: true,
height: 900,
navigatable: true,
filterable: {
extra: false,
operators: {
string: {
eq: "Only show"
}
}
},
pageable: {
alwaysVisible: true,
pageSizes: [5, 10, 20, 100]
}
});
var myCities = [];
var mySpecialty = [];
var myLanguages = [];
var myHospitals = [];
myCities.sort();
mySpecialty.sort();
myLanguages.sort();
myHospitals.sort();
function languagesFilter(element) {
element.kendoDropDownList({
dataSource: myLanguages,
optionLabel: "--Select Language--"
});
}
function cityFilter(element) {
element.kendoDropDownList({
dataSource: myCities,
optionLabel: "--Select City--"
});
}
function specialtyFilter(element) {
element.kendoDropDownList({
dataSource: mySpecialty,
optionLabel: "--Select Specialty--"
});
}
function hospitalFilter(element) {
element.kendoDropDownList({
dataSource: myHospitals,
optionLabel: "--Select Hospital--"
});
}
});
</script>

Hello, I am referring to the Filters section of https://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/end-user/user-guide
that describes the Sort fields spreadsheet function ("Sort range A to Z" and "Sort range Z to A" options appears when you click the filter button on the top of a column.
I would like to know how to change the javascript sorting function used for each of these options (it seems to be described on page https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.sortable in the "EXAMPLE - DEFINE CUSTOM COMPARE FUNCTION" section, but I am having difficulty getting this to work).
Thank you!

I have a grid populating local data with endless scrolling. I have a custom column with ng-repeat in template. Here the grid is duplicating values for that custom column against each data item whenever the loading of new items happens.
Please refer attached files.
Please check below link. In that there is Order Detail Grid and then look for custom column.
https://dojo.telerik.com/EWisALuH
Hi, is it possible to do this? It is easy to import the data from one excel workbook (using the fromFile method), but then I would like to allow the user to load in data from additional excel workbooks and have the data display on new tabs of the kendo workbook. At the moment, each additional import overwrites the previous one.
Thanks for any help :)
Just a quick request to modify one of the examples in the angular js demo of the drop down list to include basic ng-model code.
https://demos.telerik.com/kendo-ui/dropdownlist/angular
I know it's well documented in the API but I think it would be a minimum requirement for a demo.
Cheers

Ok so!
I am following a tutorial and the tutorial show how you can take an existing visual studio program and add Telerik to it.
Under the telerik menu option in visual studio I select Telerik UI for asp.net mvc then I select upgrade wizard.
Well silly me thought that the wizard after all its wizarding would add what I needed to my visual studio mvc project.
well well... I guess not. Gullible me thought something that we paid alot of money for would do what it claimed it would do.
NOPE!
Can some one tell when what is going wrong here...
I am adding a date time picker to a page. It does not work.
I did notice that the location that the wizard added was not in my actual file directory
where it is looking... so do I have to manually copy those files there??
Here is the source code:
The Razor index.cshtml page
@{
ViewBag.Title = "My Kiosk";
}
@(Html.Kendo().DatePicker().Name("Date").Value(DateTime.Today))
The Layout page for the mvc application there the link to the kendo stuff is:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11,chrome=1">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - XXXXX</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2020.2.617/jszip.min.js")"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
</head>
<body>
Here are the errors I get on the the web browser
GET http://localhost:50296/Scripts/kendo/2020.2.617/jszip.min.js net::ERR_ABORTED 404 (Not Found)
bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
(index): 71
Uncaught ReferenceError: kendo is not defined at (index):71 (anonymous) @ (index):71

Hi Everyone,
The company I work for use KendoUI through JQuery and MVC.
We are doing Ajax calls via KendoGrid using Razor Pages. We have been getting a few status code 0 Ajax errors and are unsure how to proceed.
We log all of our errors into Raygun but once logged these Ajax errors do not have a stacktrace other than the message.
I.E: "AJAX ERROR: error POST /File/Controller/Method/Parameters".
Theses errors do not always occur to every customer, and often happen sporadically.
We have ruled out the possibility of firewall/timeouts due to other calls becoming success seconds before and after these calls.
What else could be the reason for these status code 0 ajax calls?
What is the most efficient way log an error stacktrace through these KendoGrid Ajax calls?
Or better how can we avoid status code 0?
Thanks in advance.