Hi

I try to read data from my angular service with this code (see below) but when i try to do a read() after init my service never call, what I'm wrong? I need to do that to reduce amount of data and re read when change month on scheduler using dataBound event

Hi,

I'm having some issues with some kendo controls, mostly with the grid and the autocomplete.

The grid is being created with KendoUI and the Autocomplete with ASP.net MVC editor templates and both are a bit lower than expected.

If i search something on the autocomplete or load some data into the grid it makes the call  to the webservices and after the data is return it still

a delay (+-6 seconds) before the content is painted on the control.

I have trying to query the same api endpoints using a jquery autocomple and its way faster.

Also the page in general has +20 kendo controls and  it  takes quite long to load.
So my question is, is there any way that i can measure and optimize the performance of the telerik controls?

Thanks in Advance

HI --

We have existing code creating a tab strip with a series of tabs like this

   @(Html.Kendo().TabStrip().Name("tabStrip_#=MeterID#")
                  .SelectedIndex(0)
                  .Events(events => events.Show("loadDetails(#:EnrollmentID#, #:MeterID#, #:IsCrossSell#)"))
                  .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
                  .Items(items =>
                  {
                      items.Add().Text("Documents").Content(
                          "<div id='divDocumentDownload_#=MeterID#'></div>" +
                          );

                      items.Add().Text("Other Fields").Content(
                          "<div id='divOtherFields_#=MeterID#'></div>"
                          );

                      items.Add().Text("Error Report").Content(
                          "<div id='divErrorReport_#=MeterID#' style='padding-top: 5px; padding-left: 5px; border:solid; border-width: 1px; margin-top: 10px; background-color: \\#F0F0F0;'>" +
                          "</div>"
                          );

                      items.Add().Text("Bill Images").Content(
                          "<div id='divBillLinks_#=MeterID#'></div>" +
                          );

                      items.Add().Text("Photo ID").Content(
                            "<div id='divPhotoIdWrapper_#=MeterID#'>" +
                            );

                  }).ToClientTemplate())

Is it possible to create the tabs ("items") separately and then add them in the code? Something like this

                  .Items(items =>
                  {item.Add(itemA).Add(itemB)}

The reason I'm asking is that the items themselves are fairly complicated (I have simplified the code above) and it would be much easier to modify and debug code if it wasn't one large chunk.

Thanks

Rich

hello,

I am new to the Kendo UI so I really need some help.  I'm sure this is simple for those knowledgable, but I have tried everything.

I have a kendo combobox on my index.cshtml view.  The combo is filling correctly.  It is bound to a list within my model.

What I need to do is make it post back to my index controller when a user makes a selection.  I have spent hours reading the forums and other online blogs and cannot seem to find an example like mine using combobox.

Here is my combobox:

 .Content(@<text>
            <div style="padding:5px">
                @(Html.Kendo().ComboBox()
                .Name("PaystubsCombo")
                .Placeholder("Select a Paystub")
                .BindTo(Model.PaystubsAvailable)
                .DataTextField("WedDDDisplay") 
                .DataValueField("WedValue")
               
                )
            </div>
    </text>)
)

Thanks for the help in advance!

I am using grid with inline editing and looking for advice on how to auto-trigger 'Add new record' when a current new record update is Ctrl-Clicked or Ctrl-Entered.

If the edit row is for an existing row the Ctrl- modifier should not cause a new record.

Also, if a new row is being edited and 'Add new record' is clicked I would like to alert the user there is unsaved data.  At which point they can cancel and continue editing, accept inputs and create a new record or ignore inputs and create a new record.

I'm new to Kendo and having issues with the following data grid not refreshing.  Not sure what the issue is, but any help is greatly appreciated.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
  
  <div id="app"></div>
  <div><button id="btnRefresh" onclick="refresh()">refresh</button></div>
    <script id="grid-view" type="text/x-kendo-tmpl">
    <div class="manage-roles">
      <div id="grid" data-role="grid"
      data-scrollable="true"
      data-editable="inline"
      data-columns='[
        { field : "JobTitle", width: 120, title : "Job Title Code" },
        { field : "Description" },
        { field : "CategoryId", template: "${Category}" },
        {"command": "edit"}]'
      data-bind="source: roles"
      style="height: 500px">
      </div>
      </div>
    </script>

    <script>
      
      var roleViewModel = kendo.observable({
        categories: new kendo.data.DataSource({
          data: [
            { "CategoryId": 1, "Description": "IT" },
            { "CategoryId": 2, "Description": "Billing" },
            { "CategoryId": 3, "Description": "HR" },
            { "CategoryId": 4, "Description": "Sales" },
            { "CategoryId": 5, "Description": "Field" },
            { "CategoryId": 10, "Description": "Stuff" },
            { "CategoryId": 11, "Description": "Unassigned" }
          ]
        }),
        roles: new kendo.data.DataSource({
          data: [
            { "RoleId": 1, "JobTitle": "AADM1", "Description": "Administrative Assistant I", "Category": "Stuff", "CategoryId": 10 },
            { "RoleId": 2, "JobTitle": "AADM2", "Description": "Administrative Assistant II", "Category": null, "CategoryId": 0 },
            { "RoleId": 3, "JobTitle": "ACCIN", "Description": "Accounting Intern", "Category": null, "CategoryId": 0 },
            { "RoleId": 4, "JobTitle": "ACCSU", "Description": "Accounting Supervisor", "Category": null, "CategoryId": 0 }, { "RoleId": 5, "JobTitle": "ACCTC", "Description": "Accountant", "Category": null, "CategoryId": 0 }
          ]
        })
      });

      function refresh() {
        console.log('am here too');
        var grid = $('#grid').data("kendoGrid");
        console.log(grid);
       
        
        grid.dataSource.data = new kendo.data.DataSource ({
            data: [
            { "RoleId": 10, "JobTitle": "AADM11", "Description": "Administrative Assistant I", "Category": "Stuff", "CategoryId": 10 },
            { "RoleId": 12, "JobTitle": "AADM12", "Description": "Administrative Assistant II", "Category": null, "CategoryId": 0 },
            { "RoleId": 13, "JobTitle": "ACCIN1", "Description": "Accounting Intern", "Category": null, "CategoryId": 0 },
            { "RoleId": 14, "JobTitle": "ACCSU1", "Description": "Accounting Supervisor", "Category": null, "CategoryId": 0 }, { "RoleId": 5, "JobTitle": "ACCTC", "Description": "Accountant", "Category": null, "CategoryId": 0 }
          ]
        });
        
        console.log('am here');
        //grid.read();
        grid.refresh();
      }
      
      var categoryEditor = function(container, options) {     
        $('<input data-bind="value: ' + options.field + '" />')
        .appendTo(container)
        .kendoDropDownList({
          dataSource: roleViewModel.categories,
          dataTextField: 'Description',
          dataValueField: 'CategoryId'
        });
      };

      var view = new kendo.View($("#grid-view").html(), {
        model: roleViewModel,
        init: function() {
          var widget = this.element.find("[data-role=grid]").data("kendoGrid");

          widget.columns[2].editor = categoryEditor;
        }

      });

      var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer></footer>");

      layout.render($("#app"));

      layout.showIn("#content", view);
    </script>
</body>
</html>

Hello

I am using gantt with angularjs.I want custom Confirmation modal while deleting Task,Based on your documentations i tried,,but i didnt work

AngularJs controller:-

gantt configuration object I am adding this field

messages: {

deleteTaskConfirmation:kendo.template($("#editor").html())

}

$scope.customFunction=function()

{console.log("Custom function triggered");

}

Firstly,Popup it is not displaying properly.please look into the attached screenshot

Secondly,how can i bind the custom  button functionality with controller. ($scope.customFunction())