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.

Hello,
We are trying to do implement a unique requirement for our customer. For the kendo grid, we have implemented inline editing, but we have a lot of columns and some of the columns has a lot of text inside like the comment type columns. it makes it really hard for the customers to do an inline editing on those columns. For their convenience, we are trying to open up a pop up text editor when they click on certain columns that typically have a lot of texts, they are able to add the comments there, then we send the added comments to the respective cell and be able to save the grid.
Also, we have populating the grid columns dynamically.
The problem here is, after adding the comments and clicking on OK, on the UI the cell has the new comments but it doesn't look like it is being updated. As a result kendo grid doesn't know something has changed, and our save all changes/ cancel buttons are still disabled. I tried enabling them by editing other columns, and I clicked on the save all changes button, and it said saved successfully, but even though the comment cell has new text values, it didn't save them, since I don't see those new comments after the grid refresh.
It looks like the editor text value is not binding to the cell properly. I am attaching a couple of files here, the first one(popup editor.PNG) has the piece of code where it opens the popup if the column type is of comment, the second one(okclick.PNG) has the code which triggers the function on OK click on the editor popup, and the third one is the editor pop up.

I think the value is not binding to the cell properly. Any help is appreciated