Hello,

I have implemented the kendo UI drop down list in jQuery making use of the no data template too add a new item when the search returns no results.  My no data template is defined as follows:

    <script id="noDataTemplate" type="text/x-kendo-tmpl">
        <div>
            <button class="k-button" onclick="addNew('#: instance.filterInput.val() #')">Add</button>
        </div>
    </script>

and the JS function it calls:

 function addNew(newItemName) {
           alert(newItemName);

       //logic will go here to add the new item to the drop down list

        }

This works perfectly, however if the text typed into the search bar contains an apostrophe the button becomes unresponsive. Is there any way to escape the apostrophe so that the function is still called successfully, and the paramter 'newItemName' will still contain the apostrophe, as the name for the new item can validly contain one.

Many thanks

We have a customer that has several sizing requests in regards to having the scheduler in month view automatically resize to show all data (show everything regardless of size). The default static positioning/height/width using tables will not work for them.

For events, if their name wraps 2,3,4,... lines, they want the event box to auto-grow its height to show all text. The static EventHeight setting will not do.

The days that show/hold the events, needs to auto grow their height as well to fit in all events, even if there are 10 events for 1 day. They don't want the "..." to switch over to the day view from the month view to see all. So likely the row for that week would auto-grow to be able to hold the 1 day with 10 events.

Any resources/thoughts on how we may approach this?

    Hello Telerik Team,

I have signed up for a Trial of Kendo UI JS to check out whether your product will solve a business case we are trying to build with a web application.

I have an issue with filtering on the values of the graphs. 

Please have a look at the following screenshot:

chart before filtering

Here, you can see an unfiltered view of an example chart. 

This chart's data comes from a web interface, and for this particular example it is:

[{"Date":"2018-01-02","Name":"Karol","Points":"2","CalculatedValue":"2","CreatedAt":"05/20/2018"},
{"Date":"2018-01-02","Name":"Karol","Points":"6","CalculatedValue":"6","CreatedAt":"05/20/2018"},
{"Date":"2018-01-02","Name":"Peter","Points":"4","CalculatedValue":"4","CreatedAt":"05/20/2018"},
{"Date":"2018-01-06","Name":"Matthew","Points":"8","CalculatedValue":"8","CreatedAt":"05/20/2018"}]

My aggregate is "sum", so for example on 2018-01-02 for "Karol" the sum is 8.

Whenever I want to filter on values greater than 6 on the WHOLE chart suddenly the values of "Karol" are no longer visible. This _makes_ sense becuase there is no single point of data that is greater than 6 for Karol, but since my aggregate is sum, I would have expected for Kendo UI to filter aggregates, and therefore still show me the values for Karol.

chart after filtering

Please look at my setup for the DS and the Chart. Could you please tell me how should I set up the filtering in order to filter on actual aggregate values, instead of their base fractions?


var ds = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/xx/xxxxx",
                        data: {
                            id: xxx
                        },
                        dataType: "json",
                        type: "post"
                    }
                },
                group: {
                    field: "Name",
                    aggregates: [
                        { field: "CalculatedValue", aggregate: "sum" }
                    ]
                },
                sort: {
                    field: "Date",
                    dir: "asc"
                },
                schema: {
                    model: {
                        fields: {
                            CalculatedValue: {
                                type: "number"
                            },
                            CreatedAt: {
                                type: "date",
                                format: "{0:dd/MM/yyyy}"
                            },
                            "Date": {
                                    
                                type: "date",
                                format: "{0:yyyy-MM-dd}"

                                    
                            }
                        }
                    }
                }
                    ,
                filter: [
                ]
            });


            $("#chart-div-calc-148-_25392").kendoChart({
                theme: "moonlight",
                dataSource: ds,
                seriesColors: [
                    "#0C6BC1", "#06CAEA", "#F7A9F7", "#A00B00", "#FF9900", "#EDED11", "#00E000", "#00722E", "#CF00E9",
                    "#7427D8", "#072DE8", "#FFFFFF", "#878787", "#F43F00"
                ],
                title: {
                    text: "Filter",
                    align: "left"
                },
                legend: {
                    position: "right",
                    cursor: "pointer",
                    orientation: "vertical"
                },
                series: [
                    {
                        type: "line",
                        field: "CalculatedValue",
                        style: "smooth",
                        name: "#= group.value #",
                        categoryField: "Date",
                        aggregate: "sum",
                        labels: {
                            visible: false,
                            format: "{0:N2}"
                        }
                    }
                ],
                tooltip: {
                    visible: true,
                    shared: false,
                    format: "{0:N2}",
                    template: '${series.name}: <b style="font-size: 1.1em"> ${value}</b>'
                    //template: '#= kendo.format("{0:d-MMM-yyyy}", category)#',
                    //template: "${series}: ${value}"
                },

                valueAxis: {
                    labels: {
                        format: "{0:N0}"
                    },
                    title: {
                        text: ""
                    }
                },
                pannable: {
                    lock: "y"
                },
                zoomable: {
                },

                render: function(e) {
                    var loading = $('#chart-loading-148-_25392', e.sender.element.parent());
                    console.dir(this);
                    var totalmax = -6666 + (this._model._plotArea.valueAxis.totalMax * 0.01);


                    if ($(this).data('putPlots') == null) {

                        var axisNames = ["valueAxis"];
                        var options = {};

                        for (var i = 0; i < axisNames.length; i++) {
                            options[axisNames[i]] = { plotBands: [{
                                from: -6666,
                                to: totalmax,
                                color: '#00FF00',
                                opacity: 1
                            }] };
                        }

                        console.dir(options);
                        $(this).data('putPlots', true);
                        this.setOptions(options);


                }
                    kendo.ui.progress(loading, false);
                },
                categoryAxis: {
                    majorGridLines: {
                        visible: false
                    },
                    categoryField: "Date"
                        
                        ,type: "date",
                        baseUnit: "days",
                        //baseUnitStep: "auto",
                        baseUnit: "days"
                        
,
                    labels: {
                            
                            format: "dd-MMM-yyyy",
                            weekStartDay: 1,
                            
                        rotation: "auto"
                    }

                }
            });
        }

Thank you in advance for looking into it

Even though many similar topics can be found on the internet, I wasn't able to bind my dropdownlist value within a scheduler template:

this is my code within the template:

<div class="k-edit-label"><label for="trainerId">Trainer</label></div>

<div data-container-for="trainerId" class="k-edit-field">
    <input id="trainerId" name="trainerId"
           data-bind="value:trainerId"
           data-role="dropdownlist" />
</div>

the dropdownlist is beeing created by edit event of scheduler:

  // Creating dynamic dropdown
            e.container.find("#trainerId").kendoDropDownList({
                dataTextField: "Text",
                dataValueField: "Value",
                change: function(e) {
                   
                },
                dataSource: {
                    transport: {
                        read: {
                            type: 'post',
                            dataType: "json",
                            url: '@Url.Action("Trainers_List","Trainer")',
                        }
                    }
                }
            });

Fiddler shows :

'TrainerId' is listed in the body but has no value.

Instead there are other fields like:

trainer.Disabled,

trainerId.Sorting,

trainerId.Value which actually holds the correct value.

What am I doing wrong here?

Hi,

I'm using a custom popup edit template for my grid where I'm using a datetimepicker with data attributes.

I would like to use disableDates function to allow only a range between [PlannedFromTemp, PlannedToTemp], but until now I was not able to pass the "date" argument in the function as in the documentation here.

How can I pass the "date" in my test function as in the documentation, but in my concrete custom template?

 <input id="Timefrom" name="Timefrom"
               data-type="date"
               data-role="datetimepicker"
               data-bind="value: Timefrom"
               data-format="dd.MM.yyyy HH:mm"
               data-time-format="HH:mm"
               data-disable-dates="#= test(date, PlannedFromTemp, PlannedToTemp) # " 
             
              />

Thank you in advance,

Hello

Based on API documentation there is no method/option to enable/disable action buttons defined in a dialog. 

Is there a way to enable/disable action buttons in a dialog?

Regards

Hello

I'm using a dialog widget. By default the dialog closes on clicking on any defined action buttons. I would like to prevent that and close the dialog programmatically. How can I set the defined action buttons to not close after clicking on them?

Regards

Is the custom download builder still being updated for the R2 2018 update? I'd like to add DropDownTree to my custom bundle but the list of components is empty for 2018.2.516.  CDN seems to be updated as I can navigate manually to kendo.dropdowntree.min.js