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>

Hello all,

Is it possible to created a nested datasource or at least is there a general best practice for combining multiple datasources? Here is my scenario:

I have an API that exposes some data for an object, a house for instance. A house has various propeties: rooms, bathrooms, etc. For a particular module in our client application we are "searching" for a specific object using an AutoComplete. Once the specific object is view is displayed with the detailed information about the house. In addition in this specific view some additional data is needed, which currently we are combining into one large response object all at once. However it seems that this breaks one of the fundamentals of a RESTful API in that now our /Houses endpoint returns all this related data that is sometimes needed but not always. I have also read that even allowing for related data to be dynamically included at the request of the client information is considered "barely acceptable" which leaves the other option being to make several (4 total in my scenario) requests. Which I have no problem doing in interest of keeping our API "pure". However I would rather not have to "monitor" the completion of each datasource independently then display the form once the last of the datasources has completed. Is there a way to combine the results of my datasources? Could I simply create an observable array that keeps a reference to each datasource?

Any ideas on this topic would be greatly appreciated.

Hi,

 I encountered same issue as shown here: http://jsfiddle.net/ruapho/GaFd6/4/. The workaround is to define the children 'inline'.

 Btw. Is it possible to use a service or factory to fetch data from service, e.g. by injecting the service to the read function? Or I should use the $.ajax or $.get functions?

Best regards

Marcin Danek