Questions on Kendo UI for jQuery Forum

0 answers

184 views

dataSource of components, data from parent ifram is not working in child ifram, cross origine issue.

Download kendo ui trial and in exmaple i just try following code

place these two file at "Kendo 2023\examples\dropdownlist" and run you will find "Blocked a frame with origin "null" from accessing a cross-origin frame."

parent.html is as below

<html lang="en">

<head>
<title>Parent Frame</title>
<script>
___data = [
{ CityID: 1, CityName: "Lisboa" },
{ CityID: 2, CityName: "Moscow" },
{ CityID: 3, CityName: "Napoli" },
{ CityID: 4, CityName: "Tokyo" },
{ CityID: 5, CityName: "Oslo" },
{ CityID: 6, CityName: "Pаris" },
{ CityID: 7, CityName: "Porto" },
{ CityID: 8, CityName: "Rome" },
{ CityID: 9, CityName: "Berlin" },
{ CityID: 10, CityName: "Nice" },
{ CityID: 11, CityName: "New York" },
{ CityID: 12, CityName: "Sao Paulo" },
{ CityID: 13, CityName: "Rio De Janeiro" },
{ CityID: 14, CityName: "Venice" },
{ CityID: 15, CityName: "Los Angeles" },
{ CityID: 16, CityName: "Madrid" },
{ CityID: 17, CityName: "Barcelona" },
{ CityID: 18, CityName: "Prague" },
{ CityID: 19, CityName: "Mexico City" },
{ CityID: 20, CityName: "Buenos Aires" }
]
</script>
</head>

<body>
<iframe src="./child.html" style="height: 100vh;width: 100vw;border: 0;"></iframe>
</body>

</html>

and child.html is as below

<!DOCTYPE html>
<html lang="en">

<head>
<title>Overview</title>
<meta charset="utf-8">
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../styles/default-ocean-blue.css" rel="stylesheet">
<script src="../../js/jquery.min.js"></script>
<script src="../../js/jszip.min.js"></script>
<script src="../../js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>

</head>

<body>
<div class="k-d-flex k-flex-1 k-flex-col k-px-8 k-pt-7">
<div class="kd-header k-d-flex k-gap-8 k-mb-6 k-justify-content-stretch">
<div class="kd-header-core k-d-flex k-flex-col">
<h2 class="k-h4 k-mt-0 k-mb-4 k-opacity-30">Time to order food</h2>
<span class="k-d-inline-block">Find restaurants in your area</span>
<input id="kd-place-chooser" />
<div class="k-w-24 k-h-4 k-mt-5 k-skeleton k-opacity-40 k-rounded-md"></div>
<div class="k-w-full k-h-8 k-mt-1.5 k-mb-auto k-skeleton k-opacity-30 k-rounded-md"></div>
<div class="kd-actions k-d-flex k-mt-5 k-justify-content-end">
<div class="k-w-20 k-h-8 k-skeleton k-opacity-40 k-rounded-md"></div>
<div class="k-w-20 k-h-8 k-ml-4 k-skeleton k-opacity-50 k-rounded-md"></div>
</div>
</div>
<div
class="kd-image-wrapper !k-d-flex k-justify-content-center k-align-items-center k-skeleton k-opacity-10 k-border k-border-secondary k-border-solid k-rounded-md">
<span class="k-icon k-i-image k-opacity-70"></span>
</div>
</div>
<div class="kd-content k-mt-2 k-grow k-skeleton k-opacity-30 k-rounded-tl-md k-rounded-tr-md"></div>
</div>

<style>
.kd-image-wrapper>.k-icon {
font-size: 72px;
}

/* Breakpoints for full screen demo: max:599px, min:759px and max: 959 */
@media (max-width: 678px),
(min-width: 821px) and (max-width: 1038px),
(min-width: 1241px) and (max-width: 1328px) {
.kd-image-wrapper {
display: none !important;
}

.kd-actions div {
width: auto;
flex-grow: 1;
}

.kd-content {
margin-top: 24px;
}
}

/* Breakpoint for full screen demo: max:359px */
@media (max-width: 476px) {
.kd-header {
height: 100%;
}

.kd-header-core {
display: flex;
flex-direction: column;
height: 100%;
}

.kd-actions {
flex-direction: column;
}

.kd-actions>div {
margin-left: 0;
margin-top: 8px;
}

.kd-content {
display: none;
}
}
</style>

<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
// data: Array.from(parent.___data, (item) => Object.assign({}, item)),
data: parent.___data,
sort: { field: "CityName", dir: "asc" }
});

$("#kd-place-chooser").kendoDropDownList({
filter: "contains",
crossOrigin: "anonymous",
optionLabel: 'Please select city...',
dataTextField: "CityName",
dataValueField: "CityID",
dataSource: dataSource
});
});
</script>
</body>

</html>

Data Source

DropDownList

updated question on 04 Aug 2023

2 answers

770 views

DatePicker Validator Required Not Working

I have a kendo datepicker that is required, however when it is not filled out and the dateInput format is set to true, the required message does not display.

Here is a dojo

https://dojo.telerik.com/ucOdILoT

DatePicker

answered on 03 Aug 2023

1 answer

267 views

[Solved] I want to create a function that can switch favorites per row using a star icon.

Hello, I am studying a lot because I am using Kendo for JQuery for the first time in this project.

Currently, I am creating a function that registers a favorite for each row of data, and I need to create it as shown in the picture.

The favorite column is assigned a Y/N cutoff value, and the icon changes accordingly.

And when the icon is clicked, the icon should change if the favorite status is successfully switched through ajax communication.

Thanks a lot for all your help!

Button

Data Source

Grid

answered on 03 Aug 2023

1 answer

197 views

Kendo TreeView filtering became slow with version upgrade

Hi,

I am using kendo ui treeview for sort of selectable hierarchical menu. This menu can contain pretty much data with deep tree hierarchy.

Ever since we implemented it (few years ago), we used approach suggested here:
https://docs.telerik.com/kendo-ui/knowledge-base/filter-out-search-results

This was working fine so far. However, we finally started updating things to the newer versions, and after update to 2022.2.802 this method became 3-4 times slower than before.
For example same filtering method with exactly same dataset and the same search keyword has following values:

Before update:
measure filter 0.4153999999985099

After update:
measure filter 2.279300000000745

Even this piece of code gets slower

      if (data) {
        // Re-apply the filter on the children.
        dataSource.filter({ field: "hidden", operator: "neq", value: true });
      }

(same iteration)

Old:
measure dsFilter 0.001200000002980232

New:
measure dsFilter 0.013800000000745058

Unfortunately, we cannot update directly to the latest version to test if it is better. This is because of styling braking changes which we have to address and other constraints that we have. We have to do it gradually.

Could you please advise what to do, since depending on the dataset size, filtering can last more than 7-8 seconds, and reseting filtering even longer. This basically renders the feature unusable.

Thank you very much.

Regards, Vedad

Data Source

TreeView

answered on 02 Aug 2023

0 answers

188 views

Diagram - layout type and subtype do not work with addShape

Hello,

I'm creating a diagram using the Diagram component. I'm adding my nodes using the addShape and connect methods.

The problem is that my nodes aren't positioned correctly in the window, they're one on top of the other.

I've set the layout-type and layout-subtype properties, but they don't seem to work in my case. But, by using Hierarchicaldatasource with Diagram, these properties are taken into account and the diagram is displayed correctly.

Unfortunately, this doesn't suit me because I need to customize the connections between nodes (add labels), which is not possible using hierarchical data source.

So my question is whether it's possible to take advantage of the layout-type and layout-subtype properties when adding nodes manually?

Thanks in advance

Diagram

Hierarchical Data Source

asked on 02 Aug 2023

1 answer

320 views

TreeList - Filter Out Child Nodes

I've had a look and haven't found anything that answers my specific need.

I have an app that has a bill of materials and an order.

Bill of materials is a self referencing hirarchy of parts e.g.

Widget 1
- Assembly 1
  - screw type 9
  - ring type A
  - spring type 6
- Assembly 2
  - doodah X
    - Bit 9
  - Thinkgy 33
Widget 2
- etc

If Assembly 1 gets added to an order then it should no longer be visible as an option in the bill of materials (nor should anything under it). Or if doodah X gets added then it and its child should no longer be visible. This is obviously a very simplified example to demonstrate the need.

Is there a way to filter out the child nodes of a treelist like this?

Filter

TreeList

answered on 01 Aug 2023

1 answer

221 views

Create MDI Interface where windows are bounded within right column

Hi,

I’m trying to create an MDI type interface with the following behavior.

Two column layout with Drawer widget on left.
Open window within visible portion of right column.
Window cannot move outside of the visible portion of right column.
Window maximizes only to fill the visible portion of the right column.

Are there some examples around that would help or could y’all give some advice on how to do this?

Thanks,

-G

Drawer

Window

answered on 01 Aug 2023

1 answer

133 views

Accessing attributes in a Filter.

Given a filter control and associated grid:

Is there a way to catch the click event of the apply button?

So, I can format the cells in the resulting grid? I tried this code in the dojo with an alert ("...") and I couldn't see the alert popup on the click. I am assuming I have something really wrong here.

Filter

Grid

answered on 01 Aug 2023

1 answer

131 views

Is the ListView widget still available in Kendo UI Core?

Earlier versions of kendo ui core had a file named kendo.listview.min.js. The version downloaded today (2023.2.718) does not. Is the listView widget still available?

ListView