Telerik Forums
Kendo UI for jQuery Forum
2 answers
144 views

I'm using Kendo Pie Chart to render a pie chart in the DOM.Below is the code that has been used..

     function showOnPie(data) {
                var total = [];
                var count = 0;
                for (var i = 0, tot = data.roundGraph.length; i < tot; i++) {
                    count += data.roundGraph[i].total;
                }
                for (var j = 0, totem = data.roundGraph.length; j < totem; j++) {
                    total.push([data.roundGraph[j].name, (data.roundGraph[j].total / count) * 100, data.roundGraph[j].id])
                }
                $scope.pieChartOptions = {
                    title: {
                        position: "bottom",
                        text: "Share of Internet Population Growth, 2007 - 2012"
                    },
                    legend: {
                        visible: false
                    },
                    chartArea: {
                        background: ""
                    },
                    seriesDefaults: {
                        labels: {
                            visible: true,
                            background: "transparent",
                            template: "#= category #: \n #= value#%"
                        }
                    },
                    series: [
                        {
                            type: "pie",
                            startAngle: 150,
                            data: [
                                {
                                    category: "Asia",
                                    value: 53.8,
                                    color: "#9de219"
                                }, {
                                    category: "Europe",
                                    value: 16.1,
                                    color: "#90cc38"
                                }, {
                                    category: "Latin America",
                                    value: 11.3,
                                    color: "#068c35"
                                }, {
                                    category: "Africa",
                                    value: 9.6,
                                    color: "#006634"
                                }, {
                                    category: "Middle East",
                                    value: 5.2,
                                    color: "#004d38"
                                }, {
                                    category: "North America",
                                    value: 3.6,
                                    color: "#033939"
                                }
                            ]
                        }
                    ],
                    tooltip: {
                        visible: true,
                        format: "{0}%"
                    }
                };
            }

 

The chart is loading fine but is not responsive in different browser window.

As a solution I tried to refresh the chart on change in window size by doing

    $(window).resize(function () {
                showOnPie($scope.chartdATA);
            });

but didn't find a perfect solution for the responsiveness.

Same goes for the bar chart where the x and y axis are hidden when the browser is minimized.Can anybody sufggest a fix for this issue.All the code has been done in AngularJs.

Iliana Dyankova
Telerik team
 answered on 11 Jan 2016
1 answer
57 views

Hi,

May i know how to add day template via MVVM? I tried but i encounter: Uncaught Error: The month binding is not supported by the Calendar widget"

 

  <div data-role="calendar"
             data-bind="value: selectedDate,  events: { navigate: onChange },month: {content:$('#cell-template').html()}"></div>


        <script id="cell-template" type="text/x-kendo-template">
            <div>
                #= data.value #
            </div>
            </script>

 

 Please advise.

 

regards,

ch

 

CH
Top achievements
Rank 1
 answered on 18 Dec 2015
2 answers
998 views
I am using Kendo-Ui Calendar. Using kendo date picker I am selecting two dates and mapping those two dates in kendo calendar. The dates which are not in between those dates I am disabling the selection using css. But I am getting hover colour and I want to disable the events.

Iliana Dyankova
Telerik team
 answered on 07 Dec 2015
2 answers
256 views

Hi Team,

I have used Kendo UI Js calender control for my project. i want to show the scheduled events on particular data on calendar control.

ex: if Movie, Play  events will happen on some date[12-05-2015,mm-dd-yyyy] , i have to display these events on scheduled date on calendar control.

 Here attached my exact template . Let me know, this functionality available in Kendo UI calender control. if possible means , suggest the code to achieve this.

 

Dimitar
Telerik team
 answered on 27 Nov 2015
1 answer
133 views

Hi,

For applying translation for calendar, how can we translate the month and week names using messages

 kendo.ui.<Widget-name>.prototype.options.messages =

$.extend(true, kendo.ui.<Widget-name>.prototype.options.messages,{"<message-name>": "<translation",//...});

Why I am preferring messages is I already have names translated files in my project, planning to use the same instead of having duplicate sources.

could any one please help me, Thanks in advance.

 

 Regards,

Ramesh

Alexander Valchev
Telerik team
 answered on 11 Nov 2015
1 answer
171 views

Hi,

I wrote a custom directive that wraps the kendo ui kendo-date-picker directive. The directive adds logic to create a custom footer. In my Jasmine tests, I am unable to trigger a click event on k-i-calendar span, because it is not visible in the DOM. I want to trigger the click to inspect the calendar widget and determine if the custom footer has been applied. Based on the attached screen shot, it appears the kendo-date-picker directive has been compiled because the element has been decorated with new attributes, however, it is missing the wrapping elements that I observe kendo in my application. 

 

1) Is there a way to programatically open the calendar widget without relying on click events?

2) Is the kendo-date-picker widget responsible for wrapping the input element in additional elements?

 

Thanks

Atanas Georgiev
Telerik team
 answered on 06 Nov 2015
2 answers
70 views

I'm wrapping Kendo controls for an application I'm writing in Aurelia.

I've written wrapper for Kendo Grid which works fine - I've used the "template" property in the grid options which accepts a callback. In this callback I dynamically compile the row template in the context of the row data which allows me to use Aurelia's markup instead of Kendo templates

Example: 

<kendo-grid read.call="getTimesheets($event)" sortable.bind="true">
    <kendo-grid-col field="TranDate" heading="Date">
        <kendo-template>${ $item.TranDate | dateFormat }</kendo-template>
    </kendo-grid-col>
</kendo-grid>

I'm trying to do the same with Calendar. I'd like to be able to provide a function which the calendar control will call when it's rendering the tiles on the Month view.

Currently the `month` property on Calendar options only seems to accept a JS object which allows a "content" string/kendo template.

Failing there being a callback, is there some documentation around kendo.template that I can use to write an Aurelia wrapper? I'm trying to dig around in the github repo to find where the kendo.template magic happens - any pointers or advice you could give me would be awesome!

Thanks in advance

Charles
Top achievements
Rank 1
 answered on 10 Sep 2015
1 answer
48 views

I bought this program for this calendar at the bottom

http://www.telerik.com/kendo-ui/calendar

It's so beautiful I have to have it!  But I'm stuck here

 If my product is installed, how do I open it?  How do I use it?  Help?

I'm really very technologically savvy but quite befuddled with this one.

 â€‹

Vasil Yordanov
Telerik team
 answered on 17 Aug 2015
5 answers
47 views
Hi,

The ability to click into the header to trigger month and year view is very handy, however it goes too far for us (it goes to ten years range, and it breaks our design). We'd like to limit how far it goes, and stop at "year". I didn't find any setting to do that (it seems that the depth parameter is used for something else...).

Could you please provide me a way to do that?

Thanks
Kiril Nikolov
Telerik team
 answered on 13 Jul 2015
2 answers
154 views
Space is at a premium for our page and the calendar shows an extra week.  For instance if I am showing the month of June it includes up to the 11th of July.  Is there a way to have it only show up to the 4th of July? ie: eliminate the last week?
Plamen Lazarov
Telerik team
 answered on 22 Jun 2015
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?