As many developers probably have before me, considering when building an app with AngularJS and Kendo UI if I should use the Kendo UI Datasource "all the way" or instead mix it with Angulars $http/$resource. Or to be more specific, how to handle transfer of data to and from the Kendo UI datasource, as the Datasource would probably be used no matter what as it plays nice with the Kendo UI widgets. As of now we've build (kind of) a service that returns a Kendo UI Datasource complete with URLs for read, update, create, destroy and model/schema info so we don't have to have that code in our controllers (or even worse, views) which work fine but we are considering if we should change that to a more AngularJS like services using $http or $resource. But we are a bit wary of what kind of problems we might run into in the future by doing so. At the same time, having a "pure" AngularJS handling of data is also tempting. 

It would be nice if Telerik could provide some summary of pros and cons of using each method, what to look out for and what might not work if using $http/$resource compared to the "normal" Kendo UI way. 

I want to have a dropdownlist where there is an additional icon to the right of the down arrow in the dropdownlist (part of the widget, but to the right of the dropdownlist). Clicking the new icon would pass an additional param to the web service endpoint that retrieves the results shown in the dropdown.

Two separate questions:

1. How best to approach? Extend the kendo DropDownList? This is what I feel would be most appropriate, but wanted to confirm my feeling.

2. How best to style it? I want the new icon to the right of the down arrow. Are there any examples of how best to accomplish this?

Thanks,

--Ed

My Data Action:

My View that creates the grid:

No matter what I do, I cannot get the DataSource to bind. 

But, if I add this script:

Then I can get the grid to bind.  So, Obviously the grid can handle the data that I am sending, in the format that I am sending, but ... it will not simply bind when I define the datasource in the MVC helper.

Here is a Dojo simulating the issue: http://dojo.telerik.com/awEdu/2

When the number of columns are reduced to fit the screen without horizontal scrolling, then resizing works. What is the work around to get a grid to resize working with overflow of columns?

Hello,

I am am trying to make my grid filterable for every item in each of the nested grid's columns.

My grid is set up very similarly to this demo example http://demos.telerik.com/kendo-ui/grid/hierarchy

Pretty much I want it so that if you filter by any item in the nested grid, it would filter it out in all of the other nested grids as well. Right now all of my header grid columns and detail grid columns are shared as well.

Thank You,

Justin

My chart is has the font Brush Script MT. When I use the exportPDF option , however it changes to someother font . However, exportImg works fine. I also tried to set the font family using css , but it doesn't work .

 code snippet . I have attached the sample html .

 function createChart() {
            $("#fontchart").kendoChart({
                title: {
                    text: "Hybrid car mileage report",
                    font: "bold 16px 'Brush Script MT'"
                },
                legend: {
                    position: "top",
                    labels: {
                        font: "12px 'Brush Script MT'"
                    }
                },
                series: [{
                    type: "column",
                    data: [20, 40, 45, 30, 50],
                    stack: true,
                    name: "on battery",
                    color: "#cc6e38"
                }, {
                    type: "column",
                    data: [20, 30, 35, 35, 40],
                    stack: true,
                    name: "on gas",
                    color: "#ef955f"
                }, {
                    type: "line",
                    data: [30, 38, 40, 32, 42],
                    name: "mpg",
                    color: "#ec5e0a",
                    axis: "mpg"
                }, {
                    type: "line",
                    data: [7.8, 6.2, 5.9, 7.4, 5.6],
                    name: "l/100 km",
                    color: "#4e4141",
                    axis: "l100km"
                }],
                valueAxes: [{
                    title: { text: "miles",
                           font: "12px 'Brush Script MT'"},
                    min: 0,
                    max: 100
                }, {
                    name: "km",
                    title: { text: "km",
                           font: "12px 'Brush Script MT'"},
                    min: 0,
                    max: 161,
                    majorUnit: 32
                }, {
                    name: "mpg",
                    title: { text: "miles per gallon",
                           font: "12px 'Brush Script MT'"},                       
                    color: "#ec5e0a"
                }, {
                    name: "l100km",
                    title: { text: "liters per 100km",
                           font: "12px 'Brush Script MT'"},
                  
                    color: "#4e4141"
                }],
                categoryAxis: {
                    categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
                      labels : {
                            font: "12px 'Brush Script MT'"
                      },

                    // Align the first two value axes to the left
                    // and the last two to the right.
                    //
                    // Right alignment is done by specifying a
                    // crossing value greater than or equal to
                    // the number of categories.
                    axisCrossingValues: [0, 0, 10, 10]
                }
            });
        }

$(".export-pdf").click(function() {
            var chart = $("#fontchart").getKendoChart();
            chart.exportPDF({ paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },font: "12px 'Brush Script MT'" }).done(function(data) {
                kendo.saveAs({
                    dataURI: data,
                    fileName: "chart.pdf",
                      font: "12px 'Brush Script MT'",
                    proxyURL: "//demos.telerik.com/kendo-ui/service/export"
                });
            });
        });

Hello gents,

Is there a way to do a datetimepicker inside a kendo ui dropdown list . What i want to accomplish is this: have a select and the default option to be a date time picker and the other options to be some data that i bring via a .net controller.( i wanna do this dynamically for i don't know if i have data or not ).Also it must be a widget so that's why i attached the following code

I have tried the  following :

<script>
    (function () {
        var kendo = window.kendo,
            ui = kendo.ui,
            Widget = ui.Widget,

        CHANGE = "change";

        var RangeSelector = Widget.extend({
            init: function (element, options) {
                var that = this;

                debugger;
                kendo.ui.Widget.fn.init.call(that, element, options);
                that.template = kendo.template(that.options.template);

                that._dataSource();
            },
            options: {
                name: "RangeSelector",
                autoBind: true,
                template: "<ul><li id='default'/></li></ul>"
            },
            refresh: function () {
                var that = this,
                    view = that.dataSource.view(),
                    html = kendo.render(that.template, view);

                that.element.html(html);
            },
            _dataSource: function () {
                var that = this;
                // returns the datasource OR creates one if using array or configuration object

                that.dataSource = kendo.data.DataSource.create(that.options.dataSource);

                // bind to the change event to refresh the widget
                that.dataSource.bind(CHANGE, function () {
                    that.refresh();
                });

                if (that.options.autoBind) {
                    that.dataSource.fetch();
                }
            }
        });

        ui.plugin(RangeSelector);

    })(jQuery);
</script>

<script>


    $("#rangeSelector").kendoRangeSelector({
        dataSource: ["item1", "item2", "item3"]
    });

    $('#default').kendoDateTimePicker({
        format: "MM/dd/yyyy hh:mm tt"
    });

</script>