Questions on Kendo UI for jQuery Forum

2 answers

1.7K+ views

Hello,

I recently upgrade my Angular project to Angular 15.

My project uses Kendo-UI for Angular, version 2022.3.1109. I can build the Angular project successfully, however, at runtime I get the following error.

Uncaught ReferenceError: jQuery is not defined
    at Object.<anonymous> (main.js:1:289462)
    at 56426 (main.js:1:4601988)
    at r (runtime.js:1:143)
    at 51403 (main.js:1:207525)
    at r (runtime.js:1:143)
    at Ln (main.js:1:6260043)
    at main.js:1:6260064
    at n (runtime.js:1:2659)
    at main.js:1:69

I have no direct reference to JQuery in my Angular project.

I was able to trace the problem to the following lines of code.

Which comes from kendo.router.js.

Could someone help me understand the problem, it seems like there is an issue with Kendo-UI for Angular, version 2022.3.1109, JQuery is not being properly defined.

By the way, I also attempted to follow the guide Kendo UI for jQuery Integration. Same result.

Any help/tips are appreciated.

Thank you.

General Discussions

answered on 26 Jan 2023

1 answer

379 views

Show out of range years in datePicker

In my date picker, I have a range of available dates from 1/1/2022 - 12/31/2024. When I open the date picker and drill back to the years they look out of place because the first three cells which were likely reserved for 2019 - 2021 are blank. 2022 starts in the middle of the picker and 2024 wraps to the next line. There is a feature with the months to display the disabled days using month.empty and passing an HTML string. I don't see anything like that for year though. Is there either a way to show disabled years or to start with the first year in the first cell of the first row?

$("#myDatePicker").kendoDatePicker({
        month: {
            empty: '<span class="k-state-disabled">#= data.value #</span>'
        },
        // I'd like to do something like the below key:year: {
            empty: '<span class="k-state-disabled">#= data.value #</span>'
        },
        dateInput: true,
        start: "month",
        depth: "month",
        min: new Date(2022, 0, 1),
        max: new Date(2024, 11, 31),
        format: "d"
    })

Date/Time Pickers

answered on 25 Jan 2023

1 answer

169 views

Kendo grid grouping with multi dimensional

Hi,

I'm trying to plot a multi-dimensional data in a kendo grid with grouping.

Here's sample json data:

[
  {
    "category": "Car",
    "name": "Car1",
    "answer": "",
    "subvalues": [      
{
        "category": "4 wheels",
        "name": "4 wheels 1",
        "answer": ""
      },
{
        "category": "4 wheels",
        "name": "4 wheels 2",
        "answer": ""
      },
{
        "category": "6 wheels",
        "name": "6 wheels",
        "answer": ""
      }
]
  },
  {
    "category": "Car",
    "name": "Car 2",
    "answer": "",
    "subvalues": []
  },
  {
    "category": "Truck",
    "name": "Truck 1",
    "answer": "",
    "subvalues": [
{
"category": "4x4",
    "name": "4x4 Truck 1",
    "answer": ""
},
{
"category": "4x2",
    "name": "4x2 Truck 1",
    "answer": ""
}]
  },
  {
    "category": "Truck",
    "name": "Truck 2",
    "answer": "",
    "subvalues": []
  }
]

As you can see, there's a subvalues which is a sub category and I want to group it as well within the same grid.

I'm trying this https://demos.telerik.com/kendo-ui/grid/hierarchy but still no chance.

Thanks everyone!

Grid

answered on 24 Jan 2023

1 answer

773 views

Uncaught TypeError: $(...).kendoTreeList is not a function

Currently I'm develop hierarchy char by using Kendo UI Treelist feature. Below is my snipe code

in my .aspx file "

I include those scripting in header

<script type="text/javascript" src="../Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../Scripts/kendo/kendo.all.min.js"></script>

in my javascript (datasource is i load from my own data)

var wbsDataSource =

    [{
        ID: "1",
        Description: "Kick Off",
        Parent: null
    }, {
        ID: "2",
        Description: "Meeting",
        Parent: "1"
    }
]

var dataSource = new kendo.data.TreeListDataSource({
    data: wbsDataSource,
    schema: {
        model: {
            id: "ID",
            parentId: "Parent",
            fields: {
                Parent: {
                    field: "Parent",
                    nullable: true
                },
                ID: {
                    field: "ID",
                    type: "number"
                }
            },
            expanded: true
        }
    }
});

$("#treelist").kendoTreeList({
    dataSource: dataSource,
    height: 800,
    editable: {
        move: {
            reorderable: true
        }
    },
    columns: [{
            field: "Description",
            title: "Description",
            width: 280,
        }
    ]

});

however when i run the code above it throw me error "Uncaught TypeError: $(...).kendoTreeList is not a function"

it will only work when I change my html header into code below (JavaScript remain the same), especially with using the base HREF

<base href="https://demos.telerik.com/kendo-ui/treelist/dragdrop">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-ocean-blue.min.css" />
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/kendo.all.min.js"></script>

TreeList

answered on 24 Jan 2023

1 answer

109 views

BUG - checkbox appears incorrectly (used to work in earlier versions)

text should be above

Form

answered on 24 Jan 2023

2 answers

4.1K+ views

How to set value for Dropdown properly?

Hi,

i have a dropdown. When the value is set in open event, the value is selected only for the first 16 items (depending on itemHeight in virtual). How do I get the value to always be selected and automatically scroll to the selected value? Below you'll find a running example.

Thanks for your help.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kendo UI Snippet</title>

    
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-ocean-blue.min.css">
    
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js"></script>
</head>
<body>

    <div id="example">
        <div id="grid"></div>
    </div>
    <br>
    <br>
    <br>
  <div id="container">
    <input id="dropdownlist" style="width:300px" />
  </div>


  <script id="templateDDL" type="text/x-kendo-template">
    <span>
      <table>
        <tr class="combo-tr">
            <td class="combo-td">${id}</td>
            <td class="combo-td">${name}</td>
            <td class="combo-td">${description}</td>
        </tr>
    </table>
    </span>
  </script>


<script>
    const maxRecords = 10000;
    let data = [];
    
    class MyData{}  

    function generateData(){
        
        for (let i = 1; i <= maxRecords; i++) {
            let myData = new MyData();

            myData.id = i;
            myData.name = "name" + i;
            myData.description = "description" + i;
            
            data.push(myData);
        }   
    }
    
    generateData();

    $(document).ready(function(){
        $("#grid").kendoGrid({
            dataSource: {
                data: data,
                schema: {
                    model: {
                        fields: {
                            id: {type: "integer"},
                            name: { type: "string" },
                            description: { type: "string" }
                        }
                    }
                },
                pageSize: 25,
                serverPaging: false,
            },
            height: 600,
            sortable: true,
            filterable: true,
            selectable: true,
            pageable: {
                previousNext:   true,    
                numeric:        true,
                buttonCount: 3,
            },
            columns: [
                { field: "id", title: "ID", width: "130px" },    
                { field: "name", title: "Name", width: "130px" },
                { field: "description", title: "Description", width: "130px" }
            ],
            filterable: false,
            scrollable: {
                virtual: false
            },
            change: function(e) {
                        changeDdl();
            },
            dataBound: function(e) {
                this.select("tr:eq(0)");
                this.content.scrollTop(0);
            }
        });

        $("#dropdownlist").kendoDropDownList({
            optionLabel: "-- Please select something --",
            width:300,
            size:"small",
            dataSource: data,
            dataTextField: "name",
            dataValueField: "name",
            template: kendo.template($("#templateDDL").html()), 
            serverPaging: true,
            virtual: {
                itemHeight: 50,
                valueMapper: function(options) {
                    $.ajax({
                        dataSource: data,
                        type: "GET",
                        dataType: "json",
                        data: convertValues(options.value),
                        success: function (data) {
                            options.success(data);
                        }
                    })
                },
            },
            open: function(e){
                const ddl_element = $("#dropdownlist").data("kendoDropDownList");
                // read the current value of ddl (startValue), comes from SetDdlValue
                const startValue = ddl_element.text();
                    
                ddl_element.setDataSource(data);

                // looking for startValue in ddl-dataSource
                const itemEqualToStartValue = ddl_element.dataSource.data().find(x=>x.name === startValue);

                // set value of ddl_element, that is equal to the startValue
                ddl_element.value(itemEqualToStartValue.name);
                ddl_element.trigger("change");
            },
            change: function(e){
            }
        });

        
        // set the DDL value for the first time 
        const grid = $("#grid").data("kendoGrid");
        const selectedItem = grid.dataItem(grid.select());
        
        const ddl_element = $("#dropdownlist").data("kendoDropDownList"); 
        SetDdlValue(ddl_element, selectedItem);
        
        function convertValues(value) {
            let data = {};
            value = $.isArray(value) ? value : [value];
            
            for (let idx = 0; idx < value.length; idx++) {
                data["values[" + idx + "]"] = value[idx];
            }
            return data;
        }
          
        // gets called when change in grid is called
        function changeDdl(){
            const grid = $("#grid").data("kendoGrid");
            const selectedItem = grid.dataItem(grid.select());
            
            const ddl_element = $("#dropdownlist").data("kendoDropDownList"); 
            SetDdlValue(ddl_element, selectedItem);
        }        

        function SetDdlValue(ddl_element, ddl_value) {      
            let TempDDS = [];
            let TempJson = { "id": ddl_value.id, "name": ddl_value.name, "description": ""};
            TempDDS.push(TempJson);
            ddl_element.setDataSource(TempDDS);
            ddl_element.value(ddl_value.name);
            ddl_element.trigger("change");
        }
    });
</script>
</body>
</html>

DropDownList

answered on 24 Jan 2023

2 answers

109 views

Spreadsheet SAVE DATA CHANGES send fail - Status Code 502 error

hello.

url:
https://demos.telerik.com/kendo-ui/spreadsheet/datasource
I developed a program by applying this page and I am using it well.

However, if there is a lot of transmission data when trying "SAVE DATA CHANGES", an error occurs. It is not an error that occurs in the target url, but an error that cannot reach the target url itself.

All the data from the above url
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
If I change it to , and save it, I get an error.

method : get

Because it is a get, an error will occur.
On my site, I get an error even though I tried to post.

It's not even that the size of the data to be transferred is large.
Moreover, an error occurs even though it is not a get but a post.
The number of data passed is not large.
This is not an error occurring in the target url, but the transmission itself has failed.

What are the countermeasures? What are the alternatives?
It's not big data, but I get an error at "SAVE DATA CHANGES".
What could be the workaround?

please solve it thank you

Spreadsheet

answered on 24 Jan 2023

1 answer

191 views

Kendo Chart legend customization options

Hi,

I have been using kendo ui charts, and in one of pages I have fixed limited space for whole chart area (chart + legend).

Unfortunately, sometimes, dataset for this chart has a lot of elements (30-50) and legend is simply too big (regardless of position, it doesn't fit together with chart in designated space).

Is there a way to customize legend (to limit its area and have only that area with scrollbar (if I put it right or left), or can I load legend elements in dropdown, so it can be extended if needed?

Any suggestions how to handle this?

Thank you

Regards,

Vedad

Charts

answered on 19 Jan 2023

1 answer

200 views

How to improve ListBox performance?

Hello,

I have strong performance problems with the ListBox when working with 10,000+ records. On the one hand, it takes a very long to display the data, on the other hand, the search takes a very long time if you have a lot of hits. It also takes a very long time to delete the searched word. Drag and drop is also very slow. Is there any way to improve the performance? The version I am using is from late 2020!

For example, when searching for "name5" it takes a long time to display the results, when deleting "name5" from the search box the performance is also poor.
Here I use only 2 listboxes, in my project I need 3, which makes the performance even worse.

Just for your information, I actually do not generate the data locally it's just for this example to generate enough datasets.

Thanks for your help.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-ocean-blue.min.css">
    
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js"></script>

    <title>Kendo Listbox</title>
</head>
<body>
    <script id="listbox_template" type="text/kendo-x-tmpl">                                          
        <div>                                                                                         
            <table class="listbox_trueberschrift" style="width:100%;">                                 
                <colgroup>                                                                            
                    <col style="width:140px;">                                                         
                    <col style="width:180px;">                                                         
                </colgroup>                                                                            
                <tr style="display:none;">                                                            
                    <td class="listbox_tdueberschrift" nowrap>Code</td>                                
                    <td class="listbox_tdueberschrift" nowrap>Beschreibung</td>                        
                </tr>                                                                                  
                <tr>                                                                                   
                    <td nowrap>#:OrderID#</td>                                                         
                    <td nowrap>#:ShipName#</td>                                                         
                </tr>                                                                                  
            </table>                                                                                   
        </div>                                                                                         
    </script>

    <div id="example" role="application">
        <div class="demo-section wide">
            <input type='text' id='searchBox' class='k-input k-textbox k-input-solid k-input-md k-rounded-md' placeholder='Suchen' />
        <div>
            <select id="listbox1"></select>
            <select id="listbox2"></select>
        </div>
    </div>
        <script>
            const maxRecords = 10000;
            let dataSource2 = [];
            let dataSource3 = [];
            
            class MyData{}

            function generateData(){
                for (let i = 1; i <= maxRecords; i++) {
                    let myData = new MyData();

                    myData.OrderID = i;
                    myData.ShipName = "ShipName" + i;
                    
                    if(i <= 5000) dataSource2.push(myData);
                    else dataSource3.push(myData);
                } 
            };

            generateData();
            
            $(document).ready(function () {
                $("#searchBox").on("input",function(e) {
                    var listBox1 = $("#listbox1").getKendoListBox();
                    var listBox2 = $("#listbox2").getKendoListBox();
                    var sarchString = $(this).val();

                    listBox1.dataSource.filter({ field: "ShipName", operator: "contains", value: sarchString });
                    listBox2.dataSource.filter({ field: "ShipName", operator: "contains", value: sarchString });
                });

                $("#listbox1").kendoListBox({
                    connectWith: "test",
                    draggable: true,
                    dropSources: ["listbox2"],
                    selectable: "multiple",
                    dataSource: dataSource2,
                    dataTextField: "ShipName",
                    dataValueField: "OrderID",
                    template: kendo.template($("#listbox_template").html()),
                    toolbar: {
                        tools: ["moveUp", "moveDown", "transferTo", "transferFrom", "transferAllTo", "transferAllFrom", "remove"]
                    }                                                                                    
                });
                
                $("#listbox2").kendoListBox({
                    draggable: true,
                    dropSources: ["listbox1"],
                    dataSource: dataSource3,
                    selectable: "multiple",
                    dataTextField: "ShipName",
                    dataValueField: "OrderID",
                    template: kendo.template($("#listbox_template").html()),
                });
            });
        </script>
    </div>
    
    <style>
        .demo-section label {
            margin-bottom: 5px;
            font-weight: bold;
            display: inline-block;
        }
    
        #example .demo-section {
            max-width: none;
            width: 600px;
        }
    
        #example .k-listbox {
            width: 236px;
            height: 350px;
        }
    
        #example .k-listbox:first-of-type {
            width: 270px;
            margin-right: 1px;
        }
    </style>
</body>
</html>