Questions on Kendo UI for jQuery Forum

1 answer

42 views

I've been trying to update from an older version 2019.3.1114 to a newer version, but from 2020.1.114, which is the next on the list that's not internal https://www.npmjs.com/package/@progress/kendo-ui?activeTab=versions, an onwards, I get the same error

kendoUpload is not a function.
RIght now I'm just trying to upgrade to the newest version but regardless I still get the same error. It sets some other kendo stuff on
$('files') as you can see from the screenshot, (kendoAddClass, kendoAnimate etc.) but not kendoUpload

On
https://docs.telerik.com/kendo-ui/controls/upload/get-started
It says I should make the "files" input which I have
and it says I should call kendoUpload on files which I'm trying to but it doesn't exist
I thought it was a timing issue so I put it into a setTimeout, but it's still not there

Looking at
https://docs.telerik.com/kendo-ui/backwards-compatibility/2020-backward-compatibility
There's nothing that suggests that kendoUpload should break or act different from 2019 to 2020 versions as far as I can see.

Is there something else I'm missing? Do I need to activate it somehow? I'm loading both kendo.all.js and kendo.upload.js, I tried with just all.js first.

Upload

answered on 25 Jan 2024

0 answers

31 views

Many to many visualization example

I've been searching through the forum for an example of a many-to-many example in dojo and thus far I've been unsuccessful. I've seen a couple of questions from 6-8 years ago, but nothing recent to tell me that it is possible. My desire is that given a proper datasource representing objects that have multiple parents and/or children that a relationship diagram can be created. I have a single parent orgchart working just fine and it works great because I don't have to set positions for the elements or set connectors. From my limited searching and reading on Diagrams I'm pretty sure I can eventually figure out how to get one working, but I believe it would require me to explicitly position each element as well as create and position connectors. If I'm wrong, a working example would work wonders for my understanding.

Diagram

OrgChart

asked on 24 Jan 2024

0 answers

22 views

Problem with borders in schedulers. Borders falling apart and scheduler has the difference between the header and the content borders

Good morning,
I have a problem with the scheduler and its vertical lines in the header and table.
As you can see, the lines are offset by some fraction of a millimeter. Nothing in the dimensions has been changed, the scheduler loads itself in this form. Trying to resize the cell doesn't change anything.

Sometimes it happens from the very beginning, sometimes only at a certain point do these lines stop being in the right place.

I see the same issue on your pages

so my question is whether there is any way to prevent this, because when there are many columns, the last borders are seriously damaged as you can see:

Scheduler

asked on 24 Jan 2024

1 answer

22 views

Scheduler Month view - can it be 2 months?

Since printing from the scheduler uses the current view, I was would like to make the view be 2 months.

Am trying to show multiple projects and only 30 days worth isn't quite doing it.

SIMILARLY,

if I'm in near the end of the month, showing the Timeline Month view only shows me a few days into the future - I don't care about past days.
Is there a way to set the STARTING DATE in a month view?
IF SO, perhaps specifying an ENDING DATE is the answer to my first question (Start + 60).

Thx
Jaymer...

Scheduler

answered on 24 Jan 2024

1 answer

12 views

Persist expanded groups after read

Hello,

We have a grid with a default grouping applied to it, and are trying to persist the expanded groups through a read operation (remote datasource).

We have been successful in persisting them through some operations using the following code:

function getExpandedGroups() {
    expandedGroups = [];
    try {
        let groupRows = $(".k-grouping-row");
        for (let i = 0; i < groupRows.length; i++) {
            let e = groupRows[i];
            let expanded = e.children[0]["ariaExpanded"];
            if (expanded === "true") {
                let groupName = $(e).find(".k-reset").text();
                let slicePos = groupName.lastIndexOf(" (");
                groupName = groupName.slice(0, slicePos);
                expandedGroups.push(groupName);
            }
        }
    }
    catch { }
    return expandedGroups;
}

function restoreExpandedGroups() {
    try {
        groupRows = $(".k-grouping-row");
        for (let i = 0; i < groupRows.length; i++) {
            let e = groupRows[i];
            let groupName = $(e).find(".k-reset").text();
            let slicePos = groupName.lastIndexOf(" (");
            groupName = groupName.slice(0, slicePos);
            if (expandedGroups.includes(groupName)) {
                attachmentTable.expandGroup(e);
            }
        }
    }
    catch { }
}

which works fine if our code calls the read event, since we can execute it before and after eg.

    let expandedGroups = getExpandedGroups();
    attachmentTable.dataSource.read().then(function () {    
        restoreExpandedGroups(expandedGroups);
    });

however, when we use any of the grid functionality like sorting on a column, there doesn't seem to be any events that we can subscribe to that occur after the grid sets the groups back to their collapsed state, and we aren't able to persist the grouping in the same way.

Are there any potential workarounds for this issue?

Thanks

Regards,

Will Douglas

Grid

answered on 22 Jan 2024

1 answer

36 views

Why does OrgChart parent width control spacing of child items?

Using the Kendo UI Dojo, I have the code seen at the bottom. There are also two screenshots.

If you run this, you will find that the child elements are widely spaced apart even though their own content is small. If I change the value of item ID 1 to 10 characters, the spacing shrinks to reasonable distances (see screenshots below). I don't understand why the parent width should affect the child widths. Is there any way for me to correct this?

Thank you,

Tom Clark

<!DOCTYPE html>

<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/orgchart/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="https://kendo.cdn.telerik.com/themes/7.0.2/default/default-main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2023.3.1114/js/kendo.all.min.js"></script>

<style>
.k-card {
border: none !important;
background-color: inherit !important;
}

.k-orgchart-card {
width: auto !important;
}

.k-orgchart-node-group-container {
padding: 0 !important;
}

.k-button {
cursor: default !important;
outline: none !important;
}

.k-orgchart-line-v, .k-orgchart-line-h {
color: #000000 !important;
}

.org-chart-item {
padding: 10px 15px 10px 15px !important;
white-space: nowrap !important;
font-size: 12px !important;
}

</style>
</head>
<body>
<div id="example">
<div id="orgchart"></div>

<script>
var data = [
{ id: 1, name: "123456789012345678901234567890", expanded: true },
{ id: 2, name: "Clevey Thrustfield", parentId: 1 },
{ id: 3, name: "Carol Baker", parentId: 1 },
{ id: 4, name: "Kendra Howell",parentId: 1 },
{ id: 5, name: "Sean Rusell",parentId: 1 },
{ id: 6, name: "Steven North", parentId: 1 },
{ id: 7, name: "Frank Furter", parentId: 1 }
];

$("#orgchart").kendoOrgChart({
dataSource: data,
collapse: function (e) { e.preventDefault(); },
editable: false,
groupField: "name",
groupHeaderTemplate: "",
template: `<div class="org-chart-item">#: name #</div>`
});
</script>
</div>
</body>
</html>

DISPLAY WHEN PARENT WIDTH IS LARGE:

DISPLAY WHEN PARENT WIDTH IS SMALL:

OrgChart

answered on 22 Jan 2024

1 answer

53 views

Kendo Grid, add edit and delete button inside dropdown

I have a kendo grid with inline editing and would like to put the edit and delete button inside a dropdown.

Before code:

columns.Command(command =>
{
   command.Edit();
   command.Destroy();
 }).Width(70);

I came up with the following markup

columns.Bound(x => x.Id).Title(" ").IncludeInMenu(false).ClientTemplate(
   @"<div class='btn-group'>
   <a role='button' class='k-button k-button-icontext k-grid-edit' href='\\#'><span class='k-icon k-i-edit'></span>Edit</a>
   <a class='k-button k-button-icontext dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
       <span class='caret'></span>
   </a>
   <ul class='dropdown-menu'>
      <li><a role='button' class='k-button k-button-icontext k-grid-delete' href='\\#'><span class='k-icon k-i-close'></span>Delete</a></li>
   </ul>
   </div>")
.Width(80);

This is basically ok, but the problem is that after clicking the edit button, the Update/Cancel buttons are not displayed. Is there a way to fix this issue?

Grid

answered on 19 Jan 2024

1 answer

42 views

Grid is slow to sort and clear filters

I am trying the jQuery grid and really like the various features. However, compared to other grids I have tested I have found the performance to be much slower in some circumstances. I have a grid with only 6 columns. When the number of rows gets above approximately 1000, the time to sort on a text column can be 2 or 3 seconds. Also, when entering a search text to filter the grid and then clearing the search, it takes several seconds to restore the full list. In every other grid both of these operations are instantaneous even with tens of thousands of records. This is really not acceptable from a user point of view and I wonder why this grid is so much slower than the competition.

Grid

answered on 18 Jan 2024

1 answer

22 views

Customize foreColor/backColor in editor toolbar for version 2019.1.115

Dear support,

We are using kendo UI for jQuery editor and we have a question about editorTools "forecolor" and "backcolor" from the toolbar.

Could you please tell us if it's possible to display the 2 modes(palette and gradient) together, from our version of kendo : 2019.1.115 ?

Like for example this colorPicker : https://dojo.telerik.com/EWahuGuM

Best Regards,

Hamza.

answered on 17 Jan 2024

1 answer

29 views

Customize foreColor/backColor in editor toolbar

Hello, i'm working on kendo UI for jQuery editor and i have a question about forecolor and backcolor in the toolbar.
I'd like to know if it's possible to display 2 modes in same time: palette and gradient, like in this colorPicker example :
https://dojo.telerik.com/EWahuGuM

Thank you.

Editor

Toolbar