Telerik Forums
Kendo UI for jQuery Forum
1 answer
998 views

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.

Plamen Lazarov
Telerik team
 answered on 31 Jul 2015
1 answer
135 views

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.

Nikolay Rusev
Telerik team
 answered on 31 Jul 2015
1 answer
185 views

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.

Georgi Krustev
Telerik team
 answered on 31 Jul 2015
1 answer
160 views

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>
 
</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>

Plamen Lazarov
Telerik team
 answered on 31 Jul 2015
3 answers
198 views

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

Dimiter Madjarov
Telerik team
 answered on 31 Jul 2015
1 answer
117 views

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

Konstantin Dikov
Telerik team
 answered on 31 Jul 2015
1 answer
182 views

 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

Plamen Lazarov
Telerik team
 answered on 31 Jul 2015
1 answer
148 views

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?

Stephen
Top achievements
Rank 1
 answered on 30 Jul 2015
3 answers
499 views

 

 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>

 

 

 

Vincent
Top achievements
Rank 1
 answered on 30 Jul 2015
5 answers
153 views

Hello,

 is it possible to trigger the spinners for up and down manually somehow instead of setting the value and stuff like that?

Konstantin Dikov
Telerik team
 answered on 30 Jul 2015
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?