Questions on Kendo UI for jQuery Forum

0 answers

255 views

Hi Team,

I am using file manager and I wanted to sort tree view elements in file manager based on some custom logic. Now by default it is sorting based on name. Is there any way to implement custom sorting?

FileManager

TreeView

asked on 25 May 2022

1 answer

219 views

Kendo UI grid related issue

Hi,

We are using keno grid component, in one of the grid column we are appending kendo multiselect to user to select option ,on selecting we are setting other columns , on setting of other columns selected option from dropdown is going off

Scenario1: once we set the remaining columns the selected option from kendo multiselect is going off.

Scenario2: if we select second time the same option then the selected option is not going off.

Scenario3: if we add the row to the grid , the second time selected option is going off again.

can u please suggest is there anything wrong in the code.

for reference: http://dojo.telerik.com/iNaqIYEh/27

Thank you

DropDownList

Grid

answered on 25 May 2022

1 answer

226 views

Inline Editor Toolbar fixed to top

I added a Kendo UI JQuery Editor to my page. It looks as expected when it is generated from a textarea but when it is generated from a div the toolbar pops up and floats around. I want it always visible AND fixed to the top of the editor just like on this page or on the classic editor. I found one article about it but that article didn't seem to work. My editor also needs to be resizable with an initial height of 75px. Resizing currently doesn't go any smaller than 100px. See this Dojo for the resizing problem: https://dojo.telerik.com/EXiSugUg. I have multiple editors on the page in a modal. I am generating them in a loop like so:

// html <div id="editor1"></div><div id="editor2"></div>...
let id = "editor1";
let editors = {};
editors[id] = $(`#${id}`).kendoEditor({
        pasteCleanup: {
            keepNewLines: true
        },
        resizable: {
            content: true,
            toolbar: true
        },
        tools: [
            "bold", "italic", "underline", "insertUnorderedList", "insertOrderedList", "indent", "outdent", "justifyLeft", "justifyCenter", "justifyRight"
        ]
    }).data("kendoEditor");

Editor

answered on 25 May 2022

1 answer

341 views

kendo jquery orgChart is not displayed as expected

Hello,

I try to use jquery orgChart as in the kendo example below :

https://demos.telerik.com/kendo-ui/orgchart/index

This is the html kendo code, I just changed the source of the image:

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

<script src="js/jquery.min.js"></script>

<script src="js/kendo.all.min.js"></script>

</head>
<body>
<img src="/img/bi15.png" />
<div id="example">
<div id="orgchart"></div>

<script>
var data = [
{ id: 1, name: "Gevin Bell", title: "CEO", expanded: true, avatar: "/img/bi15.png" },
{ id: 2, name: "Clevey Thrustfield", title: "COO", expanded: true, parentId: 1, avatar: "/img/bi15.png" },
{ id: 3, name: "Carol Baker", title: "CFO", expanded: false, parentId: 1, avatar: "/img/bi15.png" },
{ id: 4, name: "Kendra Howell", title: "CMO", expanded: false, parentId: 1, avatar: "/img/bi15.png" },
{ id: 5, name: "Sean Rusell", title: "Financial Manager", expanded: true, parentId: 3, avatar: "/img/bi15.png" },
{ id: 6, name: "Steven North", title: "Senior Manager", expanded: false, parentId: 3, avatar: "/img/bi15.png" },
{ id: 7, name: "Michelle Hudson", title: "Operations Manager", expanded: true, parentId: 2, avatar: "/img/bi15.png" },
{ id: 8, name: "Andrew Berry", title: "Team Lead", parentId: 5, avatar: "/img/bi15.png" },
{ id: 9, name: "Jake Miller", title: "Junior Accountant", parentId: 5, avatar: "/img/bi15.png" },
{ id: 10, name: "Austin Piper", title: "Accountant", parentId: 5, avatar: "/img/bi15.png" },
{ id: 11, name: "Dilyana Newman", title: "Accountant", parentId: 5, avatar: "/img/bi15.png" },
{ id: 12, name: "Eva Andrews", title: "Team Lead", parentId: 6, avatar: "/img/bi15.png" },
{ id: 13, name: "Kaya Nilsen", title: "Financial Specialist", parentId: 6, avatar: "/img/bi15.png" },
{ id: 14, name: "Elena Austin", title: "Team Lead", parentId: 4, avatar: "/img/bi15.png"},
{ id: 15, name: "Lora Samuels", title: "Lawyer", parentId: 4, avatar: "/img/bi15.png"},
{ id: 16, name: "Lillian Carr", title: "Operator", parentId: 7, avatar: "/img/bi15.png" },
{ id: 17, name: "David Henderson", title: "Team Lead", parentId: 7, avatar: "/img/bi15.png" }
];

$("#orgchart").kendoOrgChart({
dataSource: data
});
</script>
</div>

</body>
</html>

but the result is not displayed as expected hierarchy and it doesn't look like a tree.

am I missing something?

my result:

expected result:

Thanks in advance.

OrgChart

answered on 24 May 2022

0 answers

110 views

Adding a dropdown list in the Action Column instead of using command buttons doesn't work right

I'm new to Kendo UI/Telerik, but have been a web developer for over 15 years.

Please forgive my title as well, as I could be doing it completely wrong by doing this:

            dataBound:function(){
                $('.toolbar').kendoToolBar({
                    items: [ {
                        type: "splitButton",
                        text: "Edit",
                        click:function(e){
                            var grid = $('#grid').data('kendoGrid');

                            grid.editRow(e.target.parents('tr'))
                        },
                        menuButtons: [
                            { id: "foo", text: "Print", click:function(){alert('print')} },
                            { id: "bar", text: "Delete", click:function(e){
                                    var grid = $('#grid').data('kendoGrid');

                                    grid.removeRow(e.target.parents('tr'))
                                } },
                        ]
                    } ]
                });
            }

But that's what the demo shows. I’m a bit confused as to why this works with a hardcoded data source:

https://dojo.telerik.com/eMUwAqUH

I've been piecing together quite a bit on my own, but one thing has me stumped -- this seems like such a common requirement for Grid usage, and yet my searches don't seem give me anything for jQuery UI.

But as soon as I swap in my real data source (API call), when I hit Edit, then hit Edit again to save the change, the entire box disappears.

I took a short video:

https://www.loom.com/share/9d894316b4364efbae18c01e8ede9db4

This is a pretty big deal for me because all of my data tables are going to be API driven, and I want to use a dropdown for the action columns NOT individual buttons. A lot of the time I’m going to have more than just “Edit and Delete” so a dropdown makes more sense.

Any help would be appreciated, I'm sure you can literally swap out the dataSource and columns with a sample one, and you should get the exact same error. I'm running on the latest version of Edge, but same thing happens in Chrome.

Data Source

DropDownList

Grid

updated question on 24 May 2022

1 answer

156 views

kendo scheduler field event change and field validation trigger manually

Hi,

In this demo: https://demos.telerik.com/kendo-ui/scheduler/timeline

I have three drives me crazy questions(Especially the last two T_t):

1) How can I elegantly get field value that is DropDownList type in customize validation function , for example: roomId or attendees.

2) How can I code field's change event function in edit-form , for example: roomId or attendees.

3) For example, I code customize validation function for field roomId and field attendees in schema-model-fields. In roomId customize validation function, How can I manual programming trigger attendees's customize validation function for edit-form?

Thank you very much for your help.

DropDownList

Editor

Scheduler

answered on 23 May 2022

0 answers

91 views

spreadsheet detail configuration

Hello,

I want to hidden insert and data buttons, Can I turn off some feature buttons inside the home button? I will be glad if you help

thank you

Spreadsheet

asked on 23 May 2022

1 answer

125 views

Can I add a range of comments to Kendo Spreadsheet similar to the way you can add a range of values.

Adding a range of values looks like this.

values2 is comma separated string of values enclosed in []

var range = spreadsheet.Range(A1:Z1);

range.values(values2) This fills each cell with one comma separated value from the string and works well.

range.comment(values2) This fills every cell in the range with the entire string of values2. It does not parse in the same way as range.Values.

Spreadsheet

answered on 23 May 2022

1 answer

170 views

kendoCheckBoxGroup on change unable to fetch selected values

on change event - unable to fetch selected values.

Please advise.

<script>

    $(document).ready(function () {

        $("#chk").kendoCheckBoxGroup({
            layout: "vertical",
            autoBind: false,
            items: ["item 1", "item 2", "item 3"],
            
            change: function (e) {

                chkChanged();

            }           
        });
    });

chkChanged = function () {

    debugger;
    var displaynames = $("#chk").kendoCheckBoxGroup().data("kendoCheckBoxGroup");
    var value = displaynames.value().join(",");

    console.log(value)
    
}
</script>

CheckBoxGroup

answered on 23 May 2022

1 answer

116 views

Configuring grid paging

would like to check if the red box up item in the image for paging of the grid be hidden. i know that i can hide using CSS, but i would like to check if the grid have a jquery option to do this instead?

also would like to check if i am able to customised the page size dropdown but adding new page size to it?

Grid

Pager

answered on 23 May 2022