Questions on Kendo UI for jQuery Forum

1 answer

136 views

Default Font Select Value Instead Of "inherited font".

I'm using the kendo editor tool for a rich text editor, and I want to change the default font family. No matter what I do (I've tried accessing the HTML element by jQuery and DOM selectors and change its value), the selected font stays "inherited font" option, what should I do? (Same goes for "inherited size", for the font size)

DropDownList

Toolbar

answered on 21 Aug 2023

1 answer

52 views

I need to make a MultiSelect containing CheckboxGroup

Hello community, how are you?

I need to replicate a filter like the one in this image. This is inside a kendoGrid filter, but I can't replicate something similar with MultiSelect and CheckboxGroup.

Supposedly this function is what makes this filter look like that:

function categoryDropdownEditor(container, options) {
        $('<input required data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataSource: fk_categoriesDatasource,
                dataTextField: "category",
                dataValueField: "id",
                filter: "contains",
                minLength: 1
            });
    }

My kendoGrid is configured like this:

$("#grid").kendoGrid({
        dataSource: dataSourceGrid,
       
        autoBind: true,
        scrollable: true,
        sortable: true,
        filterable: true,
        groupable: true,
        resizable: false,
        loaderType: "skeleton",
        pageable: {
            refresh: true,
            numeric: false,
            input: true,
            previousNext: true,
            alwaysVisible: true
        },
        noRecords: {
            template: function (e) {
                return "No hay datos disponibles.";
            }
        },
        columns: [
            {
                title: "Categoría",
                field: "category_id",
                dataTextField: "category",
                dataValueField: "id",
                editor: categoryDropdownEditor,
                filterable: {multi: true},
                dataSource: {
                    transport: {
                        read: {
                            url: apibaseurl + endpoint + "/categories",
                            type: "GET",
                            dataType: "json",
                            beforeSend: addToken,
                        },
                    },
                    schema: {
                        data: "data",
                        total: "total",
                        model: {
                            id: "id",
                            fields: {
                                category: {type: 'string'},
                            }
                        }
                    },
                },
            },
            
            {
                command: [
                    "edit",
                    {
                        name: " ",
                        iconClass: "k-icon k-i-more-vertical",
                    }
                ],
                title: "&nbsp;",
                width: 210
            }],
        editable: "popup",
    });

I apologize if it is not understood or if I forgot to put something, it is my first post here.

Thank you very much for your attention.

Jonathan.

DropDownList

Grid

MultiSelect

answered on 16 Aug 2023

1 answer

44 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

0 answers

67 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

1 answer

58 views

Multiselect dropdown control stopped working after Google Update.

I have several Multiselect dropdown controls in my web application that have stopped working after users Chrome browser updated to version 115. They work fine on Chrome 114.

When we click on the control the list does not show up.

DropDownList

MultiSelect

answered on 28 Jul 2023

2 answers

132 views

Change event triggered when not changing virtualized dropdownlist

I have a dropdown list with virtualization (https://dojo.telerik.com/AhuQEDEL/2). When I open and close the dropdownlist without actually changing anything the change event is occasionally triggered. I reproduced the odd behavior in this this Dojo. You will notice that the "change" is logged in the console when you open and close the list without selecting anything. This behavior is also inconsistent as sometimes it logs the change and sometimes it doesn't.

Data Source

DropDownList

answered on 04 Jul 2023

1 answer

49 views

OptionLabel not working with ValueMapper

https://dojo.telerik.com/EgiqeKug

I have a kendo dropdownlist with virtualization. I am including an optionLabel and a valueMapper. Unfortunately, including the valueMapper causes the option label to not show up. Is there a fix for this? Here is a dojo showing the issue.

DropDownList

updated answer on 29 Jun 2023

1 answer

67 views

Dropdownlist with virtualization returning blank for value

https://dojo.telerik.com/ezOJuzog

I have a kendo dropdownlist with virtualization that uses a local json object (the real list is longer than my example). When I set the value and immediately try to log that new value out, I get nothing. How do I log out the value after setting it when using virtualization? Here is a dojo example where you will see it logs "The value is now:" with no answer. If I remove virtualization it logs the answer out.

Data Source

DropDownList

answered on 27 Jun 2023

2 answers

64 views

Is it possible to change recurrenceeditor from buttongroup to dropdownlist?

Hi,

Is it possible to change recurrenceeditor from buttongroup (green selection on the image) to dropdownlist (red selection on the image)?

I'm currently operating on version 2023.1.117 and I know in previous version we had dropdown on recurrence editor.

ButtonGroup

DropDownList

Scheduler

answered on 13 Jun 2023

1 answer

181 views

Combination of Dropdownlist and Multiselect with Checkboxes

I'm looking for a widget that is sort of a combination of a dropdownlist and a multiselect. I would like to be able to select multiple items from the dropdownlist but instead of having chips like in the multiselect, I want the dropdownlist to display either "All Selected", "Multiple Selected" (or a count), or the name of the option selected if only one is selected. I would ideally have checkboxes to the left of each item but it could just highlight the item like the current multiselect does. Is there a way to accomplish this with Kendo UI for JQuery?

DropDownList

MultiSelect