Questions on Kendo UI for jQuery Forum

1 answer

132 views

How can I set a date as a category for pie charts that adjusts automatically?

This is the current code and it is not working the way it does for bar charts, it is populating every date onto the graph and not aggregating itself according to months

series: [
                    {
                        type: "pie",
                        field: "value",
                        categoryField: "category",
                        aggregate: "sum",
                        padding: 10,
                        overlay: {
                            gradient: "none",
                        },
                        categoryAxis: {
                            baseUnit: "months",
                            maxDivisions: 5,
                            rangeLabels: {
                              visible: true,
                              format: "M"
                            },
                            labels: {
                              format: "d-M"
                            }
                        },]

This is what I need it to look like:

Charts

DateInput

answered on 08 Aug 2023

1 answer

156 views

Apply same function to all dropdownlists

I want to create a global onOpen function that will apply to all dropdownlists without the need to manually attach it to each one's open option on the site. For example, I want to hide the optionLabel if it has a class of disabled in it but I don't want to have to manually attach it to each dropdownlist created.

                    open: function () {
                        let optionLabel = this.element.getKendoDropDownList().list.find(".k-list-optionlabel");
                        let isDisabled = $(optionLabel).find(".disabled").length > 0;
                        if (isDisabled) {
                            $(optionLabel).hide();
                        }
                    },

I know I could do something like open: onOpen, but I don't want everyone to have to remember to do that on each dropdown list.

DropDownList

answered on 07 Aug 2023

1 answer

773 views

KendoLicensing.setScriptKey... security breach ?

I followed the tutorial to include our Kendo Telerik license key in our application. But I'm a bit confused when exposing this key via console.

Licensing

answered on 07 Aug 2023

1 answer

189 views

Grid to PDF Export - wrong page breaks after resizing columns

Hi

I export various grids to pdf using some page templates for headers and footers.

This works basically fine but if I fiddle around resizing the columns manually, the pdf starts to break the grid content at the wrong place and it seems to ignore the margins set as options.
Attached you find three examples, one with columns in original width, another one with resized columns, the pdf still applying bottom-margin, the third one with resized columns, the pdf now ignoring the bottom-margin.

Is this a know problem or do I miss an important setting?

Grid

updated answer on 04 Aug 2023

0 answers

177 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

747 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

256 views

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

184 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

179 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

310 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