I am using Angular JS + Kendo UI and OData. I am creating gift order charts by Year, Month, Week and Day. We have the gift purchase date as well as the date that the gift cards were redeemed. For example, in the Month chart I want to show for THIS month, what gift cards were purchased and which were redeemed.
The data looks like this:
{
odata.metadata: "http://.../odata/$metadata#Order",
odata.count: "1",
value:
[
{
OrderID: 5,
MerchantID: 3,
Amount: "100.0000",
PurchaseDate: "2015-04-29T13:23:01.487",
PurchaserZipCode: "02050",
RecipientName: "Test",
Redeemed: true,
RedeemedDate: "2015-08-06T14:50:11.37"
}
]
}
//set the bar chart configuration
$scope.chartConfig = {
legend: {
position: "top"
},
seriesDefaults: {
type: "column",
labels: {
visible: true,
format: "${0}"
}
},
seriesColors: ["#af8520", "#6c5644", "#612751", "#e47f8f", "#eba1ad",
"#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"],
series: [
{
name: "Purchased",
field: "Amount",
aggregate: "sum",
categoryField: "PurchaseDate"
},
{
name: "Redeemed",
field: "Amount",
aggregate: "sum",
categoryField: "RedeemedDate"
}
],
valueAxis: {
labels: {
format: "${0}"
},
line: {
visible: true
},
axisCrossingValue: 0
},
tooltip: {
visible: true,
format: "${0}",
template: "#= series.name #: $#= value #"
}
};
The HTML element sets the base unit:
<div id="monthchart" k-data-source="monthoforders" kendo-chart k-options="chartConfig" k-category-axis="{ baseUnit: 'weeks'}"> </div>
Unfortunately, the result isn't quite what I want (see attached grid). I only want to show results for this month (i.e. August 2015), so I should only see the redeemed amount bar (since it was redeemed in August), not the purchase bar (because that was in April).
I feel like I am missing something easy in how to tell the chart to only show series data for a particular period (i.e. for the month of August 2015). Is this possible? I was thinking if I could set a min date range it would ignore the purchase data and still show the redeemed data?
Thanks in advance for your time,
Jayme
I have a template column with a filter that is not working. All of my other columns are filtering fine. When I try to filter on the column below, I get an error concerning "toLowerCase" and it being a proper javascript function.
columns: [{
template: "<div style='text-align: center'><a href='/ChangeRequest/Details/#:data.request_id#'>#:data.request_id#</a></div>",
field: "request_id",
title: "No.",
width: 75,
filterable: false
}, {
//template: "<a href='/ChangeRequest/Details/#:data.request_id#'>#:data.short_description#</a>",
field: "short_description",
title: "Description",
width: 225
}, {
...more columns...
Error: Unhandled exception at line 610, column 1 in Function code
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'toLowerCase'
The error is in Kendo.all.min.js
Thanks
In our application we have a Kendo Editor that is disabled and has some URLs in the content.
The URLs are working find in IE.
But in Chrome, when the user clicks any url, nothing happens. However, if the user clicks any URL again it works fine.
Could you please help.
Hello! I am trying to have a button that adds a row on a grid, that is in GridEditMode.PopUp. However, this button is outside of the grid. Right now I have this:
$("#add").click(function () { var grid = $("#grid").data("kendoGrid"); if (grid) { var dataSource = grid.dataSource; var total = dataSource.data().length; dataSource.insert(total, {}); dataSource.page(dataSource.totalPages()); grid.editRow(grid.tbody.children().last()); } return false; });but this only displays my popup for a second, before it disappears. If I remove "return false;", the page reloads (as expected). How can I achieve the solution?
Thanks,
Manuel
I´m trying to implement a paging mechanism like this:
http://demos.telerik.com/kendo-ui/grid/virtualization-remote-data
using json data that has a hierarchical structure like this:
{
"issue_list":[
{
"issue":{
"href":"issue/1",
"subject":"some text",
"body":"some more text"
}
},
{
"issue":{
"href":"issue/2",
"subject":"some other text",
"body":"some more other text"
}
}
]
}
Is this possible to do if I specify the structure in the schema in some way?
This post:
http://stackoverflow.com/questions/14731949/what-must-my-kendo-datasource-schema-look-like
implies that the data structure can not be hierarchical? Is this still true?
This is a feature request from our client.
We are generating gantt diagrams for multi-year projects, thus our diagrams are quite large. It would be very helpful for us to display only relevant data if empty timeline columns could be collapsed.
Consider the two example screenshots attached:
I envision this could be solved nicely by introducing a setting in the "views" property defining a threshold after which the date cols should be collapsed. By putting it in the "views" section, it would work regardless of the view.
Example:
views: [
{
type: 'month',
slotSize: 56,
// in month view, this would mean 4 weeks
collapseColumnThreshold: 4,
collapseColumnTemplate: '...'
},
{
type: 'year',
slotSize: 50,
// in year view, this would mean 2 months
collapseThreshold: 2,
collapseColumnTemplate: "#= kendo.toString(collapseStart, 'MMM') + ' - ' + kendo.toString(collapseEnd, 'MMM') #"
}
],