My json data for this cells is String i.e. :  "05:20"   {HH:mm} format.

Here is my grid options for this column:

column ...  { title: 'Jazdy', field: 'driving_time', footerTemplate: "#= data.driving_time.sum #"}

aggregate ... { field: "driving_time", aggregate: "sum" }

schema ... model: { fields: { driving_time: { type: "duration" }, ...} ...}

So in this scenario in footer i see value only from last row. How to make it properly to get summary duration in footer?

Hi Guys,

I need to display a chart containing multiple sets of data ranges but the output is rather spaced apart on the big chart area and not very readable.

Is there a way to enable scale breaks on the charts to remove gaps between the ranges and improve readability?

I'm looking for a feature similar to the built in .NET data visualization charting control.

It can be seen in action at following URL and looks quite useful feature.

    https://msdn.microsoft.com/en-us/library/dd207136.aspx

Cheers!

I've imported a spreadsheet with 12pt text. When displayed on the page, the text size shows 12pt in the toolbar, yet inspecting the size using dev tools in Chrome shows the text is 9px. Since I have a large monitor, this is quite small.

The problem can be seen by importing the spreadsheet attached to this post I had made last week. The problem is visible in the spreadsheet impot/export demo as well.

Now that I'm looking at the demo, I also notice that, while the toolbar shows "12" (and an Excel user would assume that means 12 point), the text there is 12px which, again on my large monitor, is much smaller than 12 pt. 

Thanks.

Hi,

I am trying to create a template for grid in kendo-ui. Its formatting is conditional...as follows:

Dataset sample:

The template should be of the logic:

Thoughts?
Thanks

Is there a way to use a custom icon (preferably from an icon font like Awseome Fonts) for the notes on a chart ?

Below the generic code we use for creating a note, so we would want to change the icon type to be a custom shape/icon/svg instead of one of the four predefined options of "square", "cross", ...

If that is not an option at all, any other way of how this can be achieved ? E.g. I've seen markers on maps can be customized for example.

Attached an example of how the notes currently look in the chart, having such a limited set of icon shapes does not really work for our use case.

Hi,

i have the following problem. I added virtualization functionality to my Odata-V4 API. Now I added the necessary options to the combobox (using Angular + Typescript) following the instructions from this article: 

http://docs.telerik.com/kendo-ui/controls/editors/combobox/virtualization#itemheight

private initLieferscheinNrCB()
        {
            this.dataSourceService.createDataSource('vwSalesLSAFMitZero').then((res: kendo.data.DataSource) =>
            {

                this.LieferscheinNrCBDS = res;
                this.LieferscheinNrCBDS.options.serverFiltering = true;
                this.LieferscheinNrCBDS.options.serverPaging = true;
                //this.LieferscheinNrCBDS.options.pageSize = 80;
                this.LieferscheinNrCBOptions = {
                    dataSource: this.LieferscheinNrCBDS,
                    dataTextField: 'LSNr_Str',
                    dataValueField: 'LSNr',
                    height: 520,
                   
                    virtual:
                    {
                        itemHeight: 26,
                        valueMapper: (options) =>
                        {
                            this.$log.debug("LSCB Valuemapper");
                            this.odataService.callServer('POST', 'odata/vwSalesLSAFMitZero/Default.RowNumber()', {
                                RowNumber: { Column: "LSNr", Value: options.value }
                            }).then((res: any) =>
                            {
                                this.$log.debug("ValueMapper Res: ", res);
                                options.success(res.value);
                            });
                        }
                    }
                };
            });
        }

<select id="vm.LieferscheinCB"
                                    kendo-combo-box="vm.LieferscheinNrCB"
                                    k-options="vm.LieferscheinNrCBOptions"
                                    k-ng-delay="vm.LieferscheinNrCBOptions"></select>

The problem is, that everything works fine when I filter the items. But on the first load, there is no $top nor $skip in the server request, so all items get loaded. This is anoying :-(. Does anybody know this bug or also have a workaround?

Best Regards

Benjamin

I have been looking at migrating from ASP.NET Web forms to MVC and going from UI for ASP.NET Ajax to Kendo. I assumed that the look and feel of the controls would be similar and that the controls I am using would also be available in Kendo. This is not the case.

For example, the Material theme for the Kendo Grid has a totally different look and feel than RadGrid. Moving to Kendo UI would totally change the look of my current application.

There also doesn't seem to many missing controls, such as RadPageLayout. This means that I would have to look for a new non-Telerik layout template and thus, add extra dependencies to my application.

I assumed that there would be similar capabilities and the themes would be comparable between the 2 products but this is obviously not the case. They appear be two totally separate products.

It does mean that I will be looking at other frameworks as the advantages that I thought came with migrating to Kendo from ASP.Net Ajax (compatible controls, same look and feel) don't actually exist.

When I place a TextBox into a panelbar the IE clear button is not visible. It is related with the k-widget class of the ul element.

I can fix it adding:

<style>
    .k-widget input[type=text]::-ms-clear {
      width:15px;
      height: 15px;
    }
  </style>

Is there any good reason for hiding the clear button in a Panelbar or is it just a bug?

You can reproduce it with the Basic panelbar demo in Dojo:

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/panelbar/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" />
    <script src="//kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
</head>
<body>
        <input type="text" value="works" /> <!-- ADDED --> <!-- ADDED --> <!-- ADDED -->
        <div id="example">
                <ul id="panelbar">
                <li class="k-state-active">
                    <span class="k-link k-state-selected">My Teammates</span>
                    <div style="padding: 10px;">
                        <div class="teamMate">
                            <img src="../content/web/panelbar/andrew.jpg" alt="Andrew Fuller">
                            <h2>Andrew Fuller</h2>
                            <p>Team Lead</p>
                            <input type="text" value="works not" /> <!-- ADDED --> <!-- ADDED --> <!-- ADDED -->
                        </div>
                        <div class="teamMate">
                            <img src="../content/web/panelbar/nancy.jpg" alt="Nancy Leverling">
                            <h2>Nancy Leverling</h2>
                            <p>Sales Associate</p>
                        </div>
                        <div class="teamMate">
                            <img src="../content/web/panelbar/robert.jpg" alt="Robert King">
                            <h2>Robert King</h2>
                            <p>Business System Analyst</p>
                        </div>
                    </div>
                </li>
                <li>
                    Projects
                    <ul>
                        <li>New Business Plan</li>
                        <li>
                            Sales Forecasts
                            <ul>
                                <li>Q1 Forecast</li>
                                <li>Q2 Forecast</li>
                                <li>Q3 Forecast</li>
                                <li>Q4 Forecast</li>
                            </ul>
                        </li>
                        <li>Sales Reports</li>
                    </ul>
                </li>
                <li>
                    Programs
                    <ul>
                        <li>Monday</li>
                        <li>Tuesday</li>
                        <li>Wednesday</li>
                        <li>Thursday</li>
                        <li>Friday</li>
                    </ul>
                </li>
                <li disabled="disabled">
                    Communication
                </li>
            </ul>
            <style>
                #panelbar {
                    max-width: 400px;
                    margin: 0 auto;
                }
                .teamMate:after {
                    content: ".";
                    display: block;
                    height: 0;
                    line-height: 0;
                    clear: both;
                    visibility: hidden;
                }
                .teamMate h2 {
                    font-size: 1.4em;
                    font-weight: normal;
                    padding-top: 20px;
                }
                .teamMate p {
                    margin: 0;
                }
                .teamMate img {
                    float: left;
                    margin: 5px 15px 5px 5px;
                    border: 1px solid #ccc;
                    border-radius: 50%;
                }
            </style>
            <script>
                $(document).ready(function() {
                    $("#panelbar").kendoPanelBar({
                        expandMode: "single"
                    });
                });
            </script>
        </div>

</body>
</html>

HTML

    <select class="col-xs-4" test-id="" ng-model="paymentYear" data-ng-options="item.key as item.value for item in paymentYears" ng-change="getChartData()"></select>

  <div kendo-chart k-options="riskScoreChart" class="chart-container"></div>

JS:

 var self = $scope;

init();

function init() {
            self.ramDashboard = [];
            self.riskScoreDetailsSeries = [];
            self.riskScoreDetailsLabels = [];
            self.paymentYears = [];
            getRamDashboardData();
        }

        function getRamDashboardData() {

             self.paymentYear = self.paymentYears[0].key;
             self.getChartData();
}

self.getChartData = function () {
            var requestData = { PaymentYear: '' };
            requestData.PaymentYear = self.paymentYear;
            dashboardService.getRamDashboardData.save(requestData,
                function(response) {
                    self.ramDashboard = response;
                    bindRiskScoreChart(response.riskScoreDetails);
                 
                });
        }

        function bindRiskScoreChart(riskScoreDetails) {

            self.riskScoreDetailsSeries = riskScoreDetails.datasets;
            self.riskScoreDetailsLabels = riskScoreDetails.labels;

            self.riskScoreChart = {
                chartArea: {
                    height: 300
                },
                legend: {
                    position: "top",
                    offsetX: -100
                },
                seriesDefaults: {
                    type: "column"
                },

                series: self.riskScoreDetailsSeries,
                valueAxis: {
                    labels: {
                        format: "{0}"
                    },
                    majorGridLines: {
                        visible: false
                    },
                    axisCrossingValue: 0
                },
                categoryAxis: {
                    categories: self.riskScoreDetailsLabels,
                    majorGridLines: {
                        visible: false
                    }
                }
                ,
                tooltip: {
                    visible: true,
                    format: "{0}",
                    template: "#= series.name #: #= value #"
                },
                seriesClick: onSeriesClick
            };
        }

Above code is working on with initial Dropdown value selection,but once we change the paymentYear value with Dropdown chart is not getting refreshed.

please help.