I have a JSON return from an endpoint that is hierarchical in a way but has different field names on each level for the ID and text. How would I make a kendo Drop Down Tree with this data without having to recreate the entire list? I will need to use the valueMapper, loadOnDemand, and get the value like this: .value(). It is like this (except with a lot more records): 

[
  {
    stateId: 1,
    stateName: "Florida",
    cities: [
      {
        cityId: 1,
        cityName: "Orlando",
        stores: [
          {
            storeId: 101,
            storeName: "I4"
          },
          {
            storeId: 202,
            storeName: "International Drive",
          },
          {
            storeId: 240,
            storeName: "UCF"
          }
        ]
      }
    ]
  }
]

Hi,

I am currently attempting to upgrade the Kendo UI from 2022.2.510 to 2023.2.829 and need some assistance figuring out which .css files and .js files are the closest match to what I have for 2022.2.510. Wow it's different....seems like most of the css and javascript libraries have been reorganized.

    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="Kendo/2023.2.829/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="Kendo/2023.2.829/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="Kendo/2023.2.829/styles/kendo.bootstrap.mobile.min.css" />
    <link rel="stylesheet" href="FontAwesome/font-awesome-4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="styles/jquery_1.12.0-rc2/jquery-ui.min.css" />

    <!-- JAVASCRIPT -->
    <script type="text/javascript" src="Kendo/2023.2.829/js/jquery.min.js"></script>
    <script type="text/javascript" src="Kendo/2023.2.829/js/jszip.min.js"></script>
    <script type="text/javascript" src="Kendo/2023.2.829/js/kendo.all.min.js"></script>
    <script type="text/javascript" src="Kendo/2023.2.829/js/kendo.timezones.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui.min.js"></script>
    <script type="text/javascript" src="scripts/populateTable.js"></script>
    <script type="text/javascript" src="scripts/interimDataRecs.js"></script>
    <script type="text/javascript" src="scripts/payrollDataRecs.js"></script>

I am fairly new at working with the Kendo UI -- I may just need to be pointed to documentation or a README that maps the old files to the new(?). I am not using anything fancy...these are pretty much the default controls.

So far I have not attempted to swap out ANYTHING.... I don't even know where to begin.. I am however, starting to do this shortly.  Yikes! 

FYI: I am using the following controls:

• kendoDropDownList
• kendoButton
• kendoGrid (detailInit -- using the hiarchical stuff).
• kendoSwitch
• kendoNotification
• kendoToolTip

Be curious if you all have a recommend approach or stratedgy to upgrading Kendo UI for jQuery libraries?

I'd also like to know the best approach to minifying the Kendo folders?

The Kendo stuff is stashed in the wwwroot (I did not design this structurer ... but I am stuck with it.):

Thanks for your help and patience  ^__^

George

I want to resize my grid that inside another grid. These grids are hierarchical. I wrote something for that but this works for second click. The processes I mentioned are seen in the pictures (firstclick, secondclick). the red circle shows extand button.

The js code block I wrote for solution but it does not work properly:

// The code inside the databound function of master grid
    $("#SiparisListeleGrid td a.k-icon").click(function () { // onclick for a element that opens second grid inside the row
        if ($(this).hasClass("k-i-expand")) { // if the grid is expand

            // uid of tr element
            var tr_UID = $(this).parents("tr").data("uid");

            // master grid
            var ustGrid = $("#SiparisListeleGrid").data("kendoGrid");

            $(ustGrid.dataSource.data()).each(function (i, item) {
                if (item.uid == tr_UID) {
                    var altGrid = $("#Grid_SiparisSatir_" + item.SipUstID).data("kendoGrid");
                    var rowCount = altGrid.dataSource.view().length;

                    $("#Grid_SiparisSatir_" + item.SipUstID).attr("style", "height:" + (rowCount * 40 + 125) + "px;");

                    $("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content").css("height", (rowCount * 40));

                    $("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content-locked").css("height", (rowCount * 40));
                }
            });
        }
    });
    // This code block only works on second clicking the expan button.
    // Does not recognize the second grid when clicked for the firs time
    // Should I use databound for second grid? However I do not know how can I do that.

Hello,
I am new to Kendo UI.  I am trying to create a hierarchy grid with two json data sources with the following code (two json files at the bottom of the post).  The filter doesn't seem to take any effect.  All movies are listed for both categories.  It is the same when I change the filter to 'filter: { "field": "category", "operator": "eq", "value": "Drama"}'.  What am I missing?  Thanks.

        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function() {
                    var element = $("#grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {
                                read: "https://www.example.com/category.json"
                            },
                            schema: {
                               data: "categories"
                            },
                            pageSize: 6,
                            serverPaging: true,
                            serverSorting: true
                        },
                        height: 600,
                        sortable: true,
                        pageable: true,
                        detailInit: detailInit,
                        dataBound: function() {
                            this.expandRow(this.tbody.find("tr.k-master-row").first());
                        },
                        columns: [
                            {
                                field: "categoryName",
                                title: "Category",
                                width: "110px"
                            },
                            {
                                field: "description",
                                title: "Description",
                                width: "110px"
                            }
                        ]
                    });
                });

                function detailInit(e) {
                    $("<div/>").appendTo(e.detailCell).kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {
                                read: "https://www.example.com/movie.json"
                            },
                            schema: {
                               data: "movies"
                            },
                            serverPaging: true,
                            serverSorting: true,
                            serverFiltering: true,
                            pageSize: 100,
                            filter: { field: "category", operator: "eq", value: e.data.categoryName }
                        },
                        scrollable: false,
                        sortable: true,
                        pageable: true,
                        columns: [
                            { field: "title", width: "110px" },
                            { field: "year", width: "110px" }
                        ]
                    });
                }
            </script>
        </div>

#############################################################

category.json:

{
    "categories": [
       {
           "categoryName": "SciFi",
           "description": "SciFi movies since 1970"
       },
       {
           "categoryName": "Drama",
           "description": "Drama movies since 1990"
       }
    ]
}

###############################################################

movie.json:

{
    "movies": [
        { "title": "Star Wars: A New Hope", "year": 1977, "category": "SciFi" },
        { "title": "Star Wars: The Empire Strikes Back", "year": 1980, "category": "SciFi" },
        { "title": "Star Wars: Return of the Jedi", "year": 1983, "category": "SciFi" },
        { "title": "The Shawshenk Redemption", "year": 1994, "category": "Drama" },
        { "title": "Fight Club", "year": 1999, "category": "Drama" },
        { "title": "The Usual Suspects", "year": 1995, "category": "Drama" }
    ]
}

I am designing a hierarchy of pages and components and I am trying to figure out what _attachBubbleHandlers is used for considering it basically does:

where that._data is an ObservableArray which never triggers the error event.

See https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.data.js#L4856

Please clarify.

Dojo demonstrating the issue: https://dojo.telerik.com/@ian+telerik@ocucom.com/EBeDE

When using a HierarchicalDataSource bound to a viewModel, using any method to insert a new row in a child datasource results in a duplicate top-level item in the bound HTML view, until the "change" event is manually triggered on the parent. 

My goal is putting together a hierarchical product editor (for, say, departments and employees; some hierarchy where the children are of differing object types to the parent).