Questions on Kendo UI for jQuery Forum

0 answers

306 views

kendo TreeList event drop element is missing or not in correct order

Hi,

I was developing using kendo UI TreeList, however I found an issue when I drop a row from 1 parent to another, the source was not reparenting to the correct parent. Instead if was set to wrong position (as for my case it become a parent itself).

Step to reproduce:
Open this url https://dojo.telerik.com/UCUXaloN

Drag "Sprint planning (2012-2728)" and drop it to "Kick off" as per image below
After the drop the e.position should be "over" and I expect the row will appear inside "Kick Off" node and not as a parent itself. In the drop event after the "over" I will have my own logic to perform certain task.

Help is needed as I try with different and still not able to position it correctly.

Drag and Drop

TreeList

asked on 27 Jan 2023

2 answers

221 views

Symbol picker in kendo Editor?

Is there a button on the toolbar that enables a Symbol picker dialog like that found in MS Word? Is there a better option than using ALT codes for a user to type in French accented characters? I don't want to change the localization of the editor - I want to present the editor in English but make it easier for a French user to enter French text. ALT codes and pasting from Word work but not really optimal.

Thanks.

Editor

answered on 26 Jan 2023

0 answers

136 views

Limitations of jQuery Grid Row Template

jQuery Grid Row Template can't escape from the bondage of row.
jQuery Grid Row Template works only in row units.

However, ListView is nice because it allows you to put multiple divs on a single line.

I've done a lot of development with KendoGrid. I want the already created KendoGrid to behave like a ListView.
I need a template like ListView inside a Grid. Is it difficult to make?
Grid and ListView are very similar. I hope that the already developed Grid will be like ListView with a simple template function.
Converting an already developed Grid to a ListView takes too much effort. that's insane It should be resolved in Progress.

Or, is there already a way?

thank you.

Grid

ListView

asked on 26 Jan 2023

2 answers

1.0K+ views

"Insert hyperlink" not working when editor inside a bootstrap modal

When i use the editor inside a bootstrap modal the "insert hyperlink" shows the window but i can not write in the fields.

Example:
http://jsfiddle.net/keebj1t3/

Editor

answered on 26 Jan 2023

1 answer

512 views

[Solved] Kendo listview with collapse and expand function

how can I add a expand and collapse button for every grouping in kendo listview?

ListView

answered on 26 Jan 2023

0 answers

153 views

How to set attributes to options in Select?

Hi guys,

I want set custom attributes to options in select but I could not find a way to do that. Is there any way to do so?

Data Source

DropDownList

asked on 26 Jan 2023

2 answers

1.8K+ views

JQuery Is Not Defined

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

437 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"
    })

DatePicker

answered on 25 Jan 2023

1 answer

193 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

866 views

[Solved] 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