Questions on Kendo UI for jQuery Forum

1 answer

205 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

259 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

334 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

84 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

165 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

answered on 17 Jan 2024

1 answer

116 views

Dock Manager for Typescript

When will the kendo.all.d.ts be updated with the new Dock Manger? I didn't see it in the latest public or internal build.

DockManager

answered on 17 Jan 2024

2 answers

244 views

TreeView drag and drop disabling not working anymore

A while back we created a TreeView with drag and drop. The drag event handler selectively calls e.setStatusClass("k-i-cancel") to disable the drop operation. In the drop event handler, e.valid used to be set to false when this happened. We are now using Kendo version 2023.3.1010 and e.Valid is always true. Something appears to be broken now. Is there some kind of fix for this? I've tried to implement the same selective disabling logic in the drop event handler as in the drag event handler, but part of the logic involves looking at the value of e.statusClass which doesn't exist in the drop event.

TreeView

answered on 16 Jan 2024

1 answer

261 views

Disable all inputs on kendo form

Hello.

I have a custom submit() method for my kendoForm. I want to programmatically go through the form and disable all inputs on the form when I submit. how can I achieve this?

Form

answered on 15 Jan 2024

3 answers

1.5K+ views

vertical scrollbars removed....padding remains

I have recently removed the vertical scroll bar from my grid but noticed a 17px padding that defeats the purpose of my removal.
In IE developer tools I see that it's an inline style, but I'm unsure of where/how to override this. Any guidance or direction would be nice.

<div class="k-grid-header" style="padding-right: 17px;">

Grid

updated answer on 12 Jan 2024

2 answers

4.4K+ views

Grid Column Value change on client side

I am working on the Kendo Grid (Batch Editing) with following columns:

A - Stock Value (Numeric) - Non-Editable
B - Item Type (DropDown) - values are "In Stock", "Purchase", "Out Stock", "Credit" - Editable
C - Percentage (Numeric) - Editable
D - Sale Price (Numeric) - Editable
E - Amount - Non-Editable

My requirement is when I change any of the editable field (i.e. Item Type, Percentage or Sale Price), the "Amount" field should be calculated based on following formula.

If "Item Type" = "In Stock" then "Amount" = "Stock Value" - "Percentage"
If "Item Type" = "Purchase" then "Amount" = ("Stock Value" + "Percentage") * "Sale Price"
If "Item Type" = "Out Stock" then "Amount" = ("Stock Value" - "Percentage") * "Sale Price"

If "Item Type" = "Credit" then "Amount" = "Percentage" * "Sale Price"

The "Amount value should be calculated, as soon as I change any of the editable field.

Thanks for your help in advance.

Regards,
Komail Noori

Grid

updated answer on 11 Jan 2024