Telerik Forums
Kendo UI for jQuery Forum
1 answer
128 views

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

George
Top achievements
Rank 2
Iron
Iron
Iron
 updated answer on 11 Oct 2023
0 answers
74 views
Hello,

I'm creating a diagram using the Diagram component. I'm adding my nodes using the addShape and connect methods.

The problem is that my nodes aren't positioned correctly in the window, they're one on top of the other.

I've set the layout-type and layout-subtype properties, but they don't seem to work in my case. But, by using Hierarchicaldatasource with Diagram, these properties are taken into account and the diagram is displayed correctly.

Unfortunately, this doesn't suit me because I need to customize the connections between nodes (add labels), which is not possible using hierarchical data source.



So my question is whether it's possible to take advantage of the layout-type and layout-subtype properties when adding nodes manually?


Thanks in advance
VB
Top achievements
Rank 1
Veteran
Iron
 asked on 02 Aug 2023
1 answer
636 views

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.

Georgi Denchev
Telerik team
 answered on 13 Oct 2022
1 answer
217 views
I can move rows from the nested grid up to the master grid, but I can't get it to work the other way. Any help would be appreciated.
Nikolay
Telerik team
 answered on 31 May 2021
2 answers
345 views

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" }
    ]
}

Nikolay
Telerik team
 answered on 08 Apr 2020
1 answer
49 views

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:

that._data.bind(ERROR, e => {
    that.trigger(ERROR, e);
});

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.

Ianko
Telerik team
 answered on 11 Oct 2018
4 answers
307 views

I have datasource for geoJson data collection
var remoteDataSourse = new kendo.data.DataSource({
                type: "odata-v4",
                transport: {
                    read: {
                        url: "/_api/web/lists/getByTitle('Status_Of_Progress')/items?$filter=Enabled eq 1&$top=10000",
                    }
                },
                schema: {
                     data: function (data) {
                        return data;
                     },
                    parse: function(data){
                        
                        let items = data && data.value ? data.value : [data];
                        items = items.map(function(item){
                            if (item.geojson !== null){
                                let el = JSON.parse(item.geojson);                                
                                if(el.type === "FeatureCollection") {
                                    el = el.features[0];
                                } 
                                el.properties.data = item;
                                return el;
                            } else {

                            }
                        });
                        return items;
                    }
                },
                pageSize: 10000
            });

also i have child lists with additional data
/_api/web/getFolderByServerRelativeUrl('/clng/Status_Of_Progress_Images/ITEMS_CODE')/files?$orderby=TimeLastModified desc
/_api/web/lists/getByTitle('Status_Of_Progress_PIR')/items?$filter=CodeId eq 'ITEMS_ID'&$orderby=Planned asc
/_api/web/lists/getByTitle('Status_Of_Progress_CIW')/items?$filter=CodeId eq 'ITEMS_ID'&$orderby=Planned asc
/_api/web/lists/getByTitle('Status_Of_Progress_Procurement')/items?$filter=CodeId eq 'ITEMS_ID'&$orderby=Planned asc

How i can create Hierarchical Data Source for this?
Konstantin Dikov
Telerik team
 answered on 23 Nov 2017
1 answer
127 views

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). 

 

Ianko
Telerik team
 answered on 13 Nov 2017
6 answers
317 views

 If I have a node in a HierarchicalDataSource, and I want to sync changes to it, I assume I should call

node.parentNode().children.sync()

When I call this, the resulting data packet contains, as its 'id' property, the id of the parentNode, not of the child. 

This seems to be due to the fact that kendo.data.Node's _initChildren function indiscriminately applies the parent's identity to the request's data object. 

Clearly, that makes no sense for update/delete actions, where some other property would make more sense, or the ability to include or not include the parent property. 

Arguably, the entire path should be available, for situations where a node can exist in multiple places in the tree. 

I suppose I could overcome this with the data: property being a function, but I think the basic assumption is mistaken.

 

Viktor Tachev
Telerik team
 answered on 13 Nov 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?