I have a pie chart and I want to display text besides the category or value in the tooltip. I have the data I want to display in the json that is set to the pie chart.
My current code is:
$('.kendo-pie').each(function () {
$(this).kendoChart({
title: false,
theme: 'bootstrap',
legend: {
position: "top",
visible: true
},
chartArea: {
background: ""
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= value#%",
position: "center"
//margin: -10
}
},
chartArea: {
height: 295,
width: 220
},
series: [{
type: "pie",
//startAngle: 150,
padding: 10,
data: pieLocationData
}],
tooltip: {
visible: true,
template: "#= category#",
format: "{0}"
}
});
});
For the template instead of using category​ I want to use 'customTooltipText' which is a JSON value in the pieLocationData collection.
Hi,
Is there a way to display row details under each row in the Tree List?
What I want is the following:
Team Name | Player Name
> Real Madrid |
V Man Utd |
+ | Marcos Rojo
+ | Angel Di Maria
- | Nemanya Vidic
____________________________________________________
Attribute | Value
Attack | 21
Defence | 99
Mid field | 30
Please advise,
Thanks.
create a combobox and make the filter enabled. we type some text to filter the result, make sure we type key quickly and the result have no data items. then we click the drop down arrow, the popup area should become small but in fact it is always 200px. Furthermore, after the combobox lost focus, we click the arrow, in filter event, the property e.filter is undefined.
01.var module = angular.module("mainApp", ["kendo.directives"]);02.module.controller("MainCtrl", function ($scope) {03. $scope.stocksOption = {04. dataTextField: "Name",05. autoBind: false,06. dataSource: new kendo.data.DataSource({07. data: [08. { Name: "Apple" },09. { Name: "Orange" },10. { Name: "Pear" },11. { Name: "Grape" },12. { Name: "Banana" },13. { Name: "Watermelon" },14. { Name: "Muskmelon" },15. { Name: "Sugarcane" }16. ]17. }),18. filter: "contains"19. };20. 21.});
how to make the popup size become small when there are no data when filtered.
I've noticed that elements (buttons, select boxes) inside the Kendo Splitter have large borders or other styling changes in IE, but not in Chrome.
I couldn't find the cause for this by inspecting the CSS.
How can I make my elements inside the Splitter look the same in both IE and Chrome?
<!DOCTYPE html><html><head> <base href="http://demos.telerik.com/kendo-ui/splitter/index"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css" /> <script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script></head><body><div id="example" style="height:300px; width: 800px"> <div id="outsideSplitter"> <input type="button" value="A Button"/> <input type="checkbox"/> <select style="width:120px"></select> </div> <div id="splitter" style="height: 100%; width: 100%;"> <div id="left-pane"> <div class="pane-content"> <div> <input type="button" value="A Button"/> <input type="checkbox"/> <select style="width:120px"></select> </div> </div> </div> <div id="right-pane"> <div class="pane-content"> <div> <input type="button" value="A Button"/> <input type="checkbox"/> <select style="width:120px"></select> </div> </div> </div> </div></div><script> $(document).ready(function() { $("#splitter").kendoSplitter({ panes: { collapsible: true } }); });</script></body></html>Hello,
I'm using Kendo for MVC.
How do I clear the value of the upload control so it won't send the previously selected file?
Thanks
Hi Guys,
I put an editor inside tabstrip, but I cannot click inside the edit area. If I move it out of tabstrip it works perfectly.
The format, font-family, and font-size dropdowns can be clicked, and they work, but the html source code editor, and image browser won't pop-up.
Any idea why this happens?
I am using Kendo 2015 summer release.
Best Wishes,
Matt

Hello,
I have below stacked type chart where it display data from a service. I want to display the label value dynamically for each field in the series. Here i have Value and UnusedValue, how to display these values for their respective fileds "Used Capacity" and "Unused Capacity". The below code displays the same value for both fields because the label template doesn't have any condition.
function createchart(chartID, chartTitle) { $(chartID).kendoChart({ dataSource: { transport: { read: { url: serviceurl, dataType: "json" } } }, title: { text: "RAU" }, legend: { position: "right" }, seriesDefaults: { type: "column", stack: { type: "100%" }, labels: { visible: true, position: "bottom", template: "#= dataItem.Value #%" } }, series: [{ name: "Used Capacity", field: "Value", CategoryField: "RAU" }, { name: "Unused Capacity", field: "UnusedValue", CategoryField: "RAU", color: "#FFFFFF" }], valueAxis: { line: { visible: false }, minorGridLines: { visible: true }, visible: false }, categoryAxis: { categories: ["Reliability", "Availability", "Utilisation"], majorGridLines: { visible: false } }, tooltip: { visible: true, template: "#= series.name #: #= dataItem.Value #" } }); }Best Regards,
Devendra
I am having issues trying to set my date time picker from my controller object in angular.
here is my input object:
<input kendo-date-time-picker
style="width:100%;"
type="text"
k-options="ctrl.dateTimeOptions"
k-ng-model="ctrl.date" />
This is the object I have created for the options:
ctrl.dateTimeOptions = {
format: "'MM/dd/yyyy HH:mm'",
timeFormat: "'HH:mm'",
parseFormats: "['yyyy-MM-ddTHH:mm:ss']"
};
Is there something I have set up wrong?
I am trying to bind a form to a dropdown list using Kendo's MVVM. For example I have a dropdownlist that is hydrated with objects from the server. In the form, I have multiple input fields that should be bound to the current selected item of the dropdown.
I.E. If I have selected Breakfast in the dropdown list, then my form should reflect the changes. If I select Lunch from the dropdown list then the form should select those values.
My Code is Below:
<form id="frmDailyEntry">
<div>
<label for="ServingPeriods">Serving Periods :</label>
<select id="servingPeriods" data-text-field="ServingPeriod"
data-value-field="AdmServingPeriodId"
data-value-primitive="true"
data-autobind="true"
data-role="dropdownlist"
data-bind="source: DailyEntries, value: SelectedItem"></select>
</div>
<!-- FULL PAY -->
<div>
<label for="fullPay">Full Pay :</label>
<input type="text" name="fullPay" id="fullPay" data-bind="value: SelectedItem.FullPayDebit" />
<input type="text" name="fullPayTotal" id="fullPayTotal" disabled>
</div>
<!-- PREPAID -->
<div>
<label for="prepaidfullPay">Prepaid Full Pay :</label>
<input type="text" name="prepaidfullPay" id="prepaidfullPay" data-bind="value: PrepaidFullPay" />
</div>​
</form>
Hello,
is it possible to trigger the spinners for up and down manually somehow instead of setting the value and stuff like that?
