We have implemented a bunch of Angular 1 Kendo controls into our application. We have been encountering some slowness on the front end with the browser freezing when transitioning view states. I did some investigating, and was able to identify the issue as being related to the destroy methods kendo has implemented. 

I put in some performance testing code around the destroys, and for EACH calendar control on the page, the  .destroy() method is taking ~100ms, and for kendo windows, it is taking ~120-160ms per instance. If I comment the destroy method calls out, the page runs smoothly (but obviously we open ourselves up to memory leaks, so probably not a viable option). 

We have plenty of our own directives on the page, and destroying all our controls collectively takes under 5ms. Why is each instance of these kendo controls taking 20+ more time than the rest of our controls combined? Is this a known issue?

We aren't doing anything overly fancy with our implementation, below is how our date picker is implemented. 

   <input kendo-date-picker
           k-options="::datepickeroptions"
           ng-model="value"
           ng-show="!readmode"/>

We are using ~6 month old version of the library, however updating it to the latest made no improvement. 

Any help would be appreciated!

Thanks. 

Employee>()
.Name("Grid")
.EnableCustomBinding(true) .
Columns(columns => { 
    columns.Bound(p => p.EmpId).Groupable(false);
    columns.Bound(p => p.EmpName); 
    columns.Bound(p => p.EmpDepartment);
    columns.Bound(p => p.EmpSal);
})
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax().Events((events => events.Error("onError")))
.Read(read => read.Action("Employee_Read", "Home"))
.ServerOperation(true) ) ) 

My Code behind:-

public JsonResult Employee_Read([DataSourceRequest]DataSourceRequest request) 
{ 
var employees = GetEmployeeData();
DataSourceResult result = employees.ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);
}

Please note that Employee class is not IQueryAble.

Please suggest suitable solution.

Regards,
Ankit Verma

Is there a way to conditionally show a tooltip? I want to be able to prevent showing the tooltip based on some arbitrary javascripting. I've tried to mess with the show event (return false / ev.preventDefault() / etc), but that doesnt seem to work. I've found a rather funky solution to this question on http://stackoverflow.com/questions/23297623/kendo-ui-conditionally-preventing-a-tooltip-from-being-displayed-on-a-grid-cell where a 'beforeShow' event is added to the tooltip show function. Any other options that I might have missed?

Regards,
Ron

HI 

     I have an issue in kendo combobox I added a tooltip in kendo combobox dropdown list, the issue is when I click the tooltip in the combobox the dropdown was automatically closed. I want the when the tooltip dialog opens then the corresponding combobox dropdown list should not close. I am stuck in this issue help me out.

I used both the e.Preventdefault and e.stoppropagating but its not working. The following code that I used for the tooltip click event and I attached the screenshot of my issue.

comboBox.list.find('.info-MultiComboBox', '.cogInfo', 'cog-widget').click(function (e) {
// For some reason, this click event causes the dropdown to close. Calling preventDefault() stops this behavior.
e.preventDefault();
});

The change event doesn't actual change when you change the value; it only fires when the control loses focus.

Even on the Telerik Demo, it only updates the log box when you click off of the control.

How do I make it fire when I am typing in the control itself?

One of our team members can reproduce this on his computer, but so far no one else can on theirs, and I'm wondering if it's something anyone has ever heard of?

Here's what he does:

1. Use either Firefox (v50.1.0) or IE 11 on Windows 7
2. Go to the Kendo UI editor demo page at http://demos.telerik.com/kendo-ui/editor/index
3. Click into the editor
4. Use the RIGHT Ctrl key + A to select all the content
5. Use one of the editor's formatting buttons, such as the "Center text" button.

For this person, the formatting is only applied to the content right next to where he positioned the cursor in Step 3, and not to all the selected text. It doesn't happen in Chrome, and it also doesn't happen if he uses the left Ctrl key. 

It also doesn't happen to anyone else on the team, even when we use the same version of Firefox and IE.

I have replicated this in the sample project attached.

Simply put, change events on the Kendo DatePicker control (created by the MVC wrapper), fire immediately upon loading the page, but do not fire when the date value of the control is changed.

Hi, 

i have created scheduler, which initialise and adding data source on button click.

so first time it is working properly, but second time when i click the same button it again create the new scheduler with same data source.

on page i can see the two scheduler with one with out data and other with data.

attaching the screenshot for the same.

here is button click code:

$.ajaxSetup({ cache: true});
$.getScript('js/jquery.min.js', function(data, textStatus, jqxhr) {
  $.getScript('js/kendo.all.min.js', function(data, textStatus, jqxhr) {
    $.getScript('js/kendo.timezones.min.js', function(data, textStatus, jqxhr) {
      $(document).ready(
        function () {
          $.ajax( {
            url: "http://"+host+"/MDMToolkit//api/MESLookup?ObjectName=MDM_Sched_Get_ScheduledJob&Command=GetByKey&filterParams="+
            JSON.stringify(ParamsArray),
            contentType: "application/jsonp; charset=utf-8",
            async:false,
            dataType: "json",
            success: function (records)
            {
              POdata = records;
            },
            error: function (err)
            {
              console.log('err:'+err.responseText);
            }
          });


          $('#schedulerS1').kendoScheduler({
            views: [
              "timeline"
            ],
            toolbar: ["pdf"],
            messages: {
              pdf: "PDF Export"
            },sync: function() {
              this.read();
            }, 
            resources: [
              {
                field: "oper_id",
                name: "Jobs",
                title: "Jobs",
                dataSource: []
              }
            ],
            majorTick: 120,
            minorTickCount: 1,
            columnWidth: 50,
            timezone:"Europe/London",
            group: {
              resources: ["Jobs"],
              orientation: "vertical"
            },
            save: appointment_save,

            editable: {

              create: false,
            },
            resizeEnd: function(e) {
              isResize = 1;
              startdate = new Date(e.event.start);
              enddate = new Date(e.event.end);
              console.log("startdate : "+startdate);
              console.log("enddate "+enddate);
            },

            footer: false,

            date: new Date(date),
            startTime: new Date(date)

          });

          var scheduler = $("#schedulerS1").data("kendoScheduler");
         
          var dataSource = new kendo.data.SchedulerDataSource({
            data: //Data Source
          });
          scheduler.setDataSource(dataSource);
 scheduler.resources[0].dataSource.add(//DATA)
      scheduler.view(scheduler.view().name);

          function dataSource_sync(e)
          {
            console.log("sync complete");

          }

          function appointment_save(e) (
          }
        });
    });
  });
});

The column menu is not getting sorted as claimed in the  Help URL (http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columnMenu.messages.sortAscending)

I have attached screenshots of both the preview and the DOJO output the strings are not sorted as claimed. Is there a straight /roundabout fix for this??

hi,

we have a grid with batch edit and a check box in the column. this check box can be changed in the view mode also. while editing data is not updated in the UI and check box is also not working like not editable. we are using 2016 kendo with angularJs.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/editing">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read:  {
                                    url: crudServiceBaseUrl + "/Products",
                                    dataType: "jsonp"
                                },
                                update: {
                                    url: crudServiceBaseUrl + "/Products/Update",
                                    dataType: "jsonp"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                },
                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                }
                            },
                            batch: true,
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "ProductID",
                                    fields: {
                                        ProductID: { editable: false, nullable: true },
                                        ProductName: { validation: { required: true } },
                                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                        Discontinued: { type: "boolean" },
                                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                    }
                                }
                            }
                        });

                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        navigatable: true,
                        pageable: true,
                        height: 550,
                        toolbar: ["create", "save", "cancel"],
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
                            { field: "UnitsInStock", title: "Units In Stock", width: 120 },
                            { field: "Discontinued", width: 120 ,
                          template: '<input ng-model = "dataItem.Discontinued" id ="qw_#=ProductName#" type="checkbox" ng-change="getClick(dataItem)" class = "k-checkbox"></input><label for="qw_#=ProductName#" class="k-checkbox-label"></label>', editor: '<input ng-model = "dataItem.Discontinued" id ="qw_#=ProductName#" type="checkbox" ng-change="getClick(dataItem)" class = "k-checkbox"></input><label for="qw_#=ProductName#" class="k-checkbox-label"></label>'},
                            { command: "destroy", title: "&nbsp;", width: 150 }],
                        editable: true
                    });
                });
            </script>
        </div>


</body>
</html>