Hi there,
We have a Kendo Column chart that we are using to display the number of tickets assigned to an individual per month for the rolling 13 months. I recently added a new employee to the list (Jordan), and now the chart is not forming correctly, and I can't seem to find my error. Please see attached screenshots.
Chart definition (ASP.NET MVC):
@(Html.Kendo().Chart<
Brandt.BGC.HeadOffice.ViewModels.BGC.FootPrints.AssigneesByMonthColumnChartVm
>()
.Name("assigneesMonthly")
.Legend(legend => legend
.Visible(true)
.Position(ChartLegendPosition.Bottom)
.Labels(x => x.Font(font: "24px Arial,Helvetica,sans-serif"))
)
.Theme("moonlight")
.ChartArea(chart => chart
.Background("transparent")
)
.SeriesColors("#FE4819", "#94C7E4", "#54B948", "#EEB211", "#731100", "#0000ff", "purple")
.DataSource(ds =>
{
ds.Read(read => read.Action(actionName: "HelpdeskStatistics_AssigneesMonthly", controllerName: "FootPrints", routeValues: new { area = "BGC" }));
})
.Series(series =>
{
series.Column(model => model.Aiden).Name("Aiden").CategoryField("Category").ColorField("AidenColour").Overlay(ChartBarSeriesOverlay.None);
series.Column(model => model.Dallas).Name("Dallas").CategoryField("Category").ColorField("DallasColour").Overlay(ChartBarSeriesOverlay.None);
series.Column(model => model.Micheal).Name("Micheal").CategoryField("Category").ColorField("MichealColour").Overlay(ChartBarSeriesOverlay.None);
series.Column(model => model.Justin).Name("Justin").CategoryField("Category").ColorField("JustinColour").Overlay(ChartBarSeriesOverlay.None);
series.Column(model => model.Scott).Name("Scott").CategoryField("Category").ColorField("ScottColour").Overlay(ChartBarSeriesOverlay.None);
series.Column(model => model.Jordan).Name("Jordan").CategoryField("Jordan").ColorField("JordanColour").Overlay(ChartBarSeriesOverlay.None);
series.Column(model => model.Other).Name("Other").CategoryField("Category").ColorField("OtherColour").Overlay(ChartBarSeriesOverlay.None);
})
.CategoryAxis(axis => axis
.MajorGridLines(lines => lines.Visible(true))
.Labels(x => x.Font("20px Arial,Helvetica,sans-serif"))
)
.ValueAxis(axis => axis.Numeric()
.Line(line => line.Visible(false))
.Labels(x => x.Font("20px Arial,Helvetica,sans-serif"))
)
.Tooltip(tooltip => tooltip
.Visible(true)
)
)
The datasource looks correct:
c = $(
"#assigneesMonthly"
).data(
"kendoChart"
).dataSource.data().toJSON()
(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
Aiden: 439
AidenColour:
"#FE4819"
Category:
"Sep-17"
Dallas: 482
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 189
JustinColour:
"#EEB211"
Micheal: 559
MichealColour:
"#54B948"
Other: 333
OtherColour:
"purple"
Scott: 0
ScottColour:
"#731100"
__proto__: Object
1:
Aiden: 356
AidenColour:
"#FE4819"
Category:
"Oct-17"
Dallas: 480
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 393
JustinColour:
"#EEB211"
Micheal: 457
MichealColour:
"#54B948"
Other: 551
OtherColour:
"purple"
Scott: 0
ScottColour:
"#731100"
__proto__: Object
2:
Aiden: 357
AidenColour:
"#FE4819"
Category:
"Nov-17"
Dallas: 438
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 328
JustinColour:
"#EEB211"
Micheal: 396
MichealColour:
"#54B948"
Other: 493
OtherColour:
"purple"
Scott: 0
ScottColour:
"#731100"
__proto__: Object
3:
Aiden: 571
AidenColour:
"#FE4819"
Category:
"Dec-17"
Dallas: 367
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 441
JustinColour:
"#EEB211"
Micheal: 212
MichealColour:
"#54B948"
Other: 378
OtherColour:
"purple"
Scott: 0
ScottColour:
"#731100"
__proto__: Object
4:
Aiden: 493
AidenColour:
"#FE4819"
Category:
"Jan-18"
Dallas: 496
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 565
JustinColour:
"#EEB211"
Micheal: 264
MichealColour:
"#54B948"
Other: 576
OtherColour:
"purple"
Scott: 0
ScottColour:
"#731100"
__proto__: Object
5:
Aiden: 341
AidenColour:
"#FE4819"
Category:
"Feb-18"
Dallas: 389
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 418
JustinColour:
"#EEB211"
Micheal: 198
MichealColour:
"#54B948"
Other: 401
OtherColour:
"purple"
Scott: 24
ScottColour:
"#731100"
__proto__: Object
6:
Aiden: 450
AidenColour:
"#FE4819"
Category:
"Mar-18"
Dallas: 444
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 456
JustinColour:
"#EEB211"
Micheal: 145
MichealColour:
"#54B948"
Other: 425
OtherColour:
"purple"
Scott: 348
ScottColour:
"#731100"
__proto__: Object
7:
Aiden: 408
AidenColour:
"#FE4819"
Category:
"Apr-18"
Dallas: 430
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 491
JustinColour:
"#EEB211"
Micheal: 109
MichealColour:
"#54B948"
Other: 344
OtherColour:
"purple"
Scott: 369
ScottColour:
"#731100"
__proto__: Object
8:
Aiden: 610
AidenColour:
"#FE4819"
Category:
"May-18"
Dallas: 360
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 409
JustinColour:
"#EEB211"
Micheal: 121
MichealColour:
"#54B948"
Other: 333
OtherColour:
"purple"
Scott: 405
ScottColour:
"#731100"
__proto__: Object
9:
Aiden: 402
AidenColour:
"#FE4819"
Category:
"Jun-18"
Dallas: 495
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 596
JustinColour:
"#EEB211"
Micheal: 175
MichealColour:
"#54B948"
Other: 467
OtherColour:
"purple"
Scott: 342
ScottColour:
"#731100"
__proto__: Object
10:
Aiden: 608
AidenColour:
"#FE4819"
Category:
"Jul-18"
Dallas: 341
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 568
JustinColour:
"#EEB211"
Micheal: 119
MichealColour:
"#54B948"
Other: 180
OtherColour:
"purple"
Scott: 236
ScottColour:
"#731100"
__proto__: Object
11:
Aiden: 525
AidenColour:
"#FE4819"
Category:
"Aug-18"
Dallas: 369
DallasColour:
"#94C7E4"
Jordan: 354
JordanColour:
"#0000ff"
Justin: 389
JustinColour:
"#EEB211"
Micheal: 147
MichealColour:
"#54B948"
Other: 201
OtherColour:
"purple"
Scott: 225
ScottColour:
"#731100"
__proto__: Object
12:
Aiden: 289
AidenColour:
"#FE4819"
Category:
"Sep-18"
Dallas: 442
DallasColour:
"#94C7E4"
Jordan: 533
JordanColour:
"#0000ff"
Justin: 476
JustinColour:
"#EEB211"
Micheal: 94
MichealColour:
"#54B948"
Other: 219
OtherColour:
"purple"
Scott: 149
ScottColour:
"#731100"
__proto__: Object
length: 13
We can see in the data source that there are 13 categories, so why is the chart rendering 16? (And why is it using the values for Jordan as the X-axis category names?)
I am sure I missed some small detail, but I can't seem to find it, any help?
Thanks
Hi,
I am looking to create a simple flow chart starting from the url below. The point is to provide a quick workflow guide to users ... they should not be able to edit the diagram
https://docs.telerik.com/kendo-ui/knowledge-base/diagram-create-flowchart
I was able to lock down the flow chart by making only these changes
zoom: 0
selectable: false
connectionDefaults.editable: false
When hovering over shapes I still get the 5 yellow dots that would seem to indicate that an action is possible (it isn't because I set connectionDefaults.editable: false), but is there a way for the dots to NOT appear on hover? Hopefully you can simply point me to the right Boolean that I missed
Thank you
Daniel
I am going a bit nuts here, I have a multiselect that is passing the filters structure to my controller which successfully parses the value and returns a json object from the database back to the client. Everything works fine when there is more than one record. However, when there is one record, the instance.dataSource.total reports one record correctly, and the json looks fine, but the multiselect is not populated and it shows the no data template instead. Here is the relevant client side code:
<h4>Select approvers</h4>
<select id="approvers" style="width: 100%;"></select>
<p class="demo-hint">
Click the MultiSelect to see the customized appearance.
</p>
</div>
<script>
$(document).ready(function() {
var SuggestedApproversDs = new kendo.data.DataSource({
serverFiltering: "true",
transport: {
read: {
// This Kendo UI will post various arguments to the Contract.cfc, which will use the KendoUtils cfc to extract the value of the //filter[filters][0][value] argument that is sent.
// Note: since this template is in a different directory, we can't specify the cfc template without the full path name.
url: "/cssweb/applications/contractsV5/Contract.cfc?method=getUsersForRoutingPicker", // The cfc component which processes the query and returns a json string. We are passing the like operator which will use a like statement in the cfc. The other value is 'equal'.
dataType: "json",// The method in the cfc expects a json object.
contentType: "application/json; charset=utf-8", // Note: when posting json via the request body to a coldfusion page, we must use this content type or we will get a 'IllegalArgumentException' on the ColdFusion processing page.
type: "POST"
}, //...read:
parameterMap: function (options) {
return JSON.stringify(options); // You must use the parameterMap in order to stringify the data to send to the server when using serverFiltering. Note, if you get an error here, try getting the browser out of compatibility mode and run page2.cfm within this folder. I am not sure why, but on occassion, I get an error on this line when the grid does not pass the arguments right.
}
// Note: the first dropdown does not use the parameterMap function as we are not using serverFiltering.
}, //...transport:
// Note: virtual multi-selects must have a schema and model, otherwise you will get an 'Uncaught TypeError: e.slice is not a function' error.
schema: {
model: {
id: "WorkdayPersonKey",
fields: { // Hefm Dept and entity are required.
PrimaryUWEmailAddress: { type: "string" },
DisplayName: { type: "string" }
}//...fields
}//...model
}//...schema
});//var DepartmentCategoryDs...
// Create the multi-select
var approvers = $("#approvers").kendoMultiSelect({
dataTextField: "DisplayName",
dataValueField: "PrimaryUWEmailAddress",
//headerTemplate: $("#contactHeader").html(),
footerTemplate: '<div>Total #= instance.dataSource.total() # items found</div>',
//itemTemplate: '<span class="k-state-default"><h3>#= data.DisplayName #</h3><p>#= data.PrimaryUWEmailAddress #</p></span>',
//tagTemplate: '<span>#= data.DisplayName#</span>',
filter: "contains",
dataSource: SuggestedApproversDs,
}).data("kendoMultiSelect");//var approvers... --->
var approvers = $("#approvers").data("kendoMultiSelect");
//approvers.wrapper.attr("id", "approvers-wrapper");
});
</script>
The json string when there are multiple records (works fine- two records show):
[{"LegalMiddleName":"E","PrimaryCostCenterKey":5774,"LegalLastName":"Alexander","DisplayName":"Alexander, Gregory E","PrimaryManagerKey":212165,"EmployeeId":867007144,"WorkdayPersonKey":203298,"Level":1,"PrimaryUWEmailAddress":"gregorya@uw.edu","LegalFirstName":"Gregory"},{"LegalMiddleName":"R.","PrimaryCostCenterKey":"","LegalLastName":"Gregorio","DisplayName":"Gregorio, Doris R.","PrimaryManagerKey":"","EmployeeId":878008569,"WorkdayPersonKey":83145,"Level":1,"PrimaryUWEmailAddress":"gregorio@uw.edu","LegalFirstName":"Doris"},{"LegalMiddleName":"","PrimaryCostCenterKey":5770,"LegalLastName":"Gregory","DisplayName":"Gregory, Brian","PrimaryManagerKey":353307,"EmployeeId":845001427,"WorkdayPersonKey":383173,"Level":1,"PrimaryUWEmailAddress":"gregorb@uw.edu","LegalFirstName":"Brian"},{"LegalMiddleName":"N","PrimaryCostCenterKey":1114,"LegalLastName":"Gregory","DisplayName":"Gregory, James N","PrimaryManagerKey":216206,"EmployeeId":866004108,"WorkdayPersonKey":125373,"Level":1,"PrimaryUWEmailAddress":"gregoryj@uw.edu","LegalFirstName":"James"},{"LegalMiddleName":"","PrimaryCostCenterKey":2016,"LegalLastName":"Pepper","DisplayName":"Pepper, Gregory","PrimaryManagerKey":123109,"EmployeeId":879007928,"WorkdayPersonKey":117122,"Level":1,"PrimaryUWEmailAddress":"gregor@uw.edu","LegalFirstName":"Gregory"}]
Json string when there is one record (and the control is not populated).
[{"LegalMiddleName":"E","PrimaryCostCenterKey":5774,"LegalLastName":"Alexander","DisplayName":"Alexander, Gregory E","PrimaryManagerKey":212165,"EmployeeId":867007144,"WorkdayPersonKey":203298,"Level":1,"PrimaryUWEmailAddress":"gregorya@uw.edu","LegalFirstName":"Gregory"}]
What am I doing wrong?
I've got an application where I'm using a Kendo UI Grid widget. I know that it will, at some time in the future, be dealing with a large number of records. I'm implementing server-side paging and I'm getting the expected result from the server.
With regards to page 2, I see my data endpoint returning 6 records as expected. From what I can tell, the Grid is binding them to page one, instead of showing them on page 2.
Is there a way to tell the grid which page you are returning results for (through the schema or programmatically)? Or is my only option to use local storage and append my results to that local storage?
I've worked around this in the past by returning all the results up to the offset since I know large datasets will be filtered with a keyword search, but I'd rather find a way to display the results through paging so I can implement filtering.
Hi,
I updated Example from https://github.com/telerik/kendo-examples-asp-net-mvc , "grid-data-source-request-web-api" to Framework 4.6.1
I get the following and I don't get a clue from object browser or googling:
DescriptionProjectFileLine
The type or namespace name 'WebApiDataSourceRequestModelBinder' could not be found (are you missing a using directive or an assembly reference?)grid-data-source-request-web-apiP:\grid-data-source-request-web-api\grid-data-source-request-web-api\Controllers\OrdersController.cs23
DOES KENDO UI WORK WITH FRAMEWORK 4.6.1??
Hi,
I have kendo grid grouped on a property and aggregate functions for sum and count. I need export it to excel in a way when all parent are collapsed then it should only export parent rows (excluding details) As shown in picture.
Anyone has an idea how to achieve this? Any help would be appreciated!
Thank you :)
I have a KendoGrid configured with remote datasource. And every time it sends requests to the server it clears the "fragment identifier" from the URL (basically it deletes everything after the "#" char).
How can I disable KendoGrid from touching URL completely?
Thank you
Alex
We have a Grid with editable: "popup" and custom sizing. Now when a vertical scrollbar is necessary, the "Update" and "Cancel" buttons are not visible because they are scrolled to the bottom (see attached screenshot).
I would like to always show the buttons and only scroll the content. What's the best way to achieve this behavior? Thank you.
I'm trying to style the ":empty" state of the div, but it doesn't work because the Kendo Editor seems to add "" into the div, so it's never empty.
What should we do here? If the user backspaces whatever that code is, the :empty state then appears just fine.