I am using a KendoUI grid to display data on screen. Each row has a set of buttons that trigger various actions. One button triggers a modal popup asking the user to select a child item (generated via an ajax call) of the row before continuing on with the action. The first time the button is triggered, the select is correctly filled, however, on subsequent calls the select box is left blank as if the element doesn't exist. Any idea what I am doing wrong here:

    $(document).ready(function () {
      $('#formGrid').delegate('.exportButton', 'click', function () {
         var button = $(this);
         var formId = button.attr("data-form-id");
         var formImplementationId = button.attr("data-form-implementation-id");
         var formVersion = Number(button.attr("data-form-version"));

         $.ajax({
           url: AppSettings["BaseUrl"] + "/xxxx/GetVersions?formId=" + formId + "&formImplementationId=" + formImplementationId,
           dataType: 'json',
           success: function (data) {
             $.each(data, function (index) {
               var item = data[index];
               $("#exportVersion").append("<option value=\"" + item.Version + "\">Version: " + item.Version + " (" + item.EffectiveDate + ")</option>")
             });
           }
         });

         var kendoWindow = $("<div />").kendoWindow({
           title: "Export Form",
           resizable: false,
           modal: true
         });

         kendoWindow.data("kendoWindow")
           .content($("#select-export-version").html())
           .center().open();

         kendoWindow
           .find(".export-confirm")
           .click(function () {
             if ($(this).hasClass("export-confirm-yes")) {
               window.location = AppSettings["BaseUrl"] + "/xxxx/ExportForm?formId=" + formId + "&formImplementationId=" + formImplementationId + "&formVersion=" + $('#exportVersion').val()
             }

             kendoWindow.data("kendoWindow").close();
           })
           .end()
         });
      });

      $('#formGrid').kendoGrid({
        dataSource: {
          transport: {
            read: {
              url: '@Url.EncodedAction("GetForms", "xxxx")',
              dataType: "json",
              contentType: "application/json"
            }
          },
          schema: {
            model: {
              fields: {
                FormName: { type: "string" },
                ContractName: { type: "string" },
                EffectiveDate: { type: "date" },
                UserName: { type: "string" },
                IsDraft: { type: "string" },
                FormId: { type: "string" },
                FormImplementationId: { type: "string" },
                FormVersion: { type: "number" }
              }
            }
          },
          pageSize: 15,
          sort: [{ field: "FormName", dir: "asc" }]
        },
        sortable: true,
        pageable: true,
        columns: [
          {field: "FormName", title: "Form"},
          {field: "Version", title: "Version", width: 100},
          {field: "ContractName", title: "Contract", width: 150},
          {field: "EffectiveDate", title: "Last Modified", format: "{0:MM/dd/yyyy}"},
          {title: "User", field: "UserName"},
          {field: "Status", title: "Status", width: 120},
          {
            template: function (dataItem) {
              buttons = '<div class="buttonDiv">';
              buttons += '<button class="exportButton" title="Export Form" data-form-id="' + dataItem.FormId + '" data-form-implementation-id="' + dataItem.FormImplementationId + '" data-form-version="' + dataItem.Version + '"><span class="glyphicon glyphicon-open"></span></button>'
              buttons += '</div>';

              return buttons;
            },
          }
        ]
      });
    });

    <script id="select-export-version" type="text/x-kendo-template">
      <div id="export-file-modal" class="maintenance-modal">
        <p>
          <label for="exportVersion">Select the version of the form to export:</label><br />
          <select id="exportVersion"></select>
        </p>
        <div id="export-buttons" class="text-center same-width">
          <button class="export-confirm export-confirm-yes k-button k-default">Export</button>
          <button class="export-confirm export-confirm-no k-button k-primary">Cancel</button>
        </div>
      </div>
    </script>

In a non-MVVM enviroment, I can define the child entities of my hierarchical datasource by setting the schema:

In a viewModel I am defining the same datasource like this:

What is happening here, that I am loading a flat array of json objects from a file (later api endpoint) and unflatten this list, so it is in a hierachical format. The method to unflatten this array is naming the children "Assets". Running this, the treeview fails to display. If I change the unflatten method to name those children "items", the treebiew works.

You can reproduce this in this Dojo: http://dojo.telerik.com/UTOBe/3

Change items, to anything else and it stops working. How can I configure the kendo.observableHierarchy, so it uses any other property then "items" to determine if an object has children using a viewModel?

Destroying and recreating a Toolbar in the same DOM element causes problem with Splitbutton expansion via keyboard.  To reproduce:

1.  Create a toolbar with a splitbutton.  Using the keyboard, tab to the splitbutton and use alt-down to expand it.  Works great.

2.  Destroy the toolbar with .destroy(), and empty the containing DOM element.

3.  Create a toolbar with a splitbutton in the same (now empty) DOM.

4.  Tab to the splitbutton and press alt-down.  The splitbutton expands and immediately closes.

Demonstrated here:  http://dojo.telerik.com/@richm/odATu

I need to put a Registered Sign SuperScript in Combo. I managed to put a Registered Sign, but not in a superscript. It worked in the template, but when the user selects it, the html tags are displayed to the user as text in the input element.

The following link contains things that I tried:

http://dojo.telerik.com/eWAWO/2

Hi,

I'm using the Kendo UI Menu for Angular 1 to list projects users can access in a solution. Is it possible to use JSON objects received from a WebAPI directly as menuItems or will I have to remap these into simpler objects? In this demo you are using custom attributes, will I be able to access these in the select event (how?)?

Further more, is it possible to access the datasource from another function in my Angular controller? I am currently storing the project ID in localstorage and if I'm able to use JSON objects or custom attributes in MenuItems I'd like to access the datasource so I can retrieve properties/attributes from the MenuItems.

BR,

Henrik

I have a number of regular MVC grids that make their requests to controllers with additional data, and they make use of the Data attribute to call a function which returns an object. For example:

...and this works fine, but for the PivotGrid I can't seem to find a matching equivalent. The configuration seems to be quite different in fact:

I cannot seem to use the same configuration (Transport instead of Read), and I cannot find anywhere the "Data" action can be assigned. I can set this attribute to the relevant javascript function after page load using:

$("#pivotGrid").data('kendoPivotGrid').dataSource.transport.options.read.data = pivotSync;

...but I would like to be able to set this during the initial configuration of the pivot grid. Is this possible?

I have successfully set up several KendoUI Grids, but I cannot get one using server-side paging to work. I modified my rest service so I will return a total value (hard coded right now).

Below please find the JSON that is put out and the javascript. Any help would be greatly appreciated.