Questions on Kendo UI for jQuery Forum

0 answers

210 views

Hi,

My CSP settings on the server-side:

Response.AddHeader("Content-Security-Policy", "default-src 'self'; script-src 'self' https://code.jquery.com 'nonce-kendoInlineScript' https://kendo.cdn.telerik.com; connect-src 'self'; img-src 'self' 'unsafe-inline' blob: data: gap:; style-src 'self' 'unsafe-inline' https://kendo.cdn.telerik.com; font-src 'self' data:;");

My CSP settings on the front-end:

And I get the following error:

Now of course, when I add 'unsafe-eval' in the CSP settings/config, the errors will be gone but it's not ideal since at the end of the day, it's still a security risk however low.

BTW, I'm using CDN to load the JQuery and Kendo js:

I would greatly appreciate if you can give some assistance.

Thanks,

JT

DropDownList

asked on 12 Mar 2025

2 answers

41 views

Loop rows activesheet to find visible rows

I have a kendospreadsheet with a column filter on every column.

After the user has set filters, I want only to get visible rows.

How is this possible?

Found resources:

https://docs.telerik.com/kendo-ui/knowledge-base/spreadsheet-hidden-rows-count-on-filtering

Spreadsheet

answered on 11 Mar 2025

2 answers

61 views

Incorrect characters in downloaded pdf in Diagram control

https://demos.telerik.com/kendo-ui/diagram/pdf-export In this example when I add data in languages other than English, they display correctly in the diagram, but when I export the pdf those data do not display correctly. how can I fix this defect?

Diagram view ----->

Downloaded pdf ------------------------->

Diagram

answered on 10 Mar 2025

4 answers

653 views

calendar customization

Hi, i am currently using kendo calendar control in my application i wanted to use multi-language for numbers and date formats and all other options in en-GB. I am currently using the code below to override the culture it works fine.

var customCulture = $.extend({}, kendo.culture(), {

name: "custom-culture",

calendars: {

standard: {

days: {

names: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],

namesAbbr: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],

namesShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]

},

months: {

names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],

namesAbbr: ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]

},

patterns: {

d: "dd/MM/yyyy",

D: "dd MMMM yyyy",

F: "dd MMMM yyyy HH:mm:ss",

g: "dd/MM/yyyy HH:mm",

G: "dd/MM/yyyy HH:mm:ss",

m: "d MMMM",

M: "d MMMM",

s: "yyyy'-'MM'-'dd'T'HH':'mm':'ss",

t: "HH:mm",

T: "HH:mm:ss",

u: "yyyy'-'MM'-'dd HH':'mm':'ss'Z'",

y: "MMMM yyyy",

Y: "MMMM yyyy"

},

firstDay: 1

}

});

But the problem is i don't want to change the patterns setting from the clients culture i need to remove this from being over ridden. If i remove this patterns code piece it all stop working. Is there any way to do this ??

Thanks a lot in advise.

Calendar

answered on 06 Mar 2025

1 answer

38 views

MVVM datasource jQuery input stoped working after upgrade

Hello,

we recently upgraded from Kendoui 2022 to the latest version and our MVVM forms stoped working.

So either there are changes to the datasource or MVVM or both.

Any ideas how to fix it?

The input elements look like this:

<input  data-bind="value: emailTextSource.data()[0].siteGroup" name="siteGroup" id="siteGroup" value="" class=" form-control" />

Here is the datasource and the binding:

<script>
	var crudServiceBaseUrl = 'emailTexts';
	var myData = new kendo.data.DataSource({
        transport: {
            read: {
                url: crudServiceBaseUrl + "/getdetails?id=1",
                dataType: "json"
            },
            update: {
                url: crudServiceBaseUrl + "/updatedetails",
                dataType: "json",
                type: 'get'
            },
            destroy: {
                url: crudServiceBaseUrl + "/destroydetails",
                dataType: "json"
            },
        },
        schema: {
            model: {
                id: "id",
                fields: {
                	    }
            }
        }
    });
	var viewModel = kendo.observable({
    	emailTextSource: myData,
		language: [{"language":1,"text":"Deutsch","logger":"","wirebox":"","languageId":1,"id":1,"validationResult":""},{"language":1,"text":"Englisch","logger":"","wirebox":"","languageId":2,"id":3,"validationResult":""}], delete: function(e) {
			if (confirm('Sind Sie sicher?')) {
			    this.emailTextSource.remove(this.emailTextSource.data()[0]);
				this.emailTextSource.sync();
			} else {
			    // Do nothing!
			}
		}
		, save: function(e) {
			if (confirm('Speichern?')) {
				myData.sync();
			} else {
			    // Do nothing!
			}
		}
		
	});
	kendo.bind($("#emailTextDiv"), viewModel);
	myData.read();

</script>

MVVM

answered on 05 Mar 2025

1 answer

501 views

The Kendo context menu does not appear in the modal popup.

Hello,

I'm using a model popup in which I bind the kendo grid and set the grid right-click to open the context menu. However, the context menu does not appear. I'm using Kendo 2023.2.606 version. Please leave your feedback.

This below same code work fine in normal page. But, it's not working in model popup.

Context menu Code is here:

<ul id="clientSearchGridContextMenu" class="hide">
<li id="clientSearchGridContextMenuAddFavourite">@Resource.lblAddFavourite</li>
<li id="clientSearchGridContextMenuRemoveFavourite" class="border-bottom-div">@Resource.lblRemoveFavourite</li>
<li id="clientSearchGridContextMenuClose">@Resource.lblClose</li>
</ul>

JavaScript code for context men:

bindClientSearchGridContextMenu: function (favourites) {
clientManagement.variable.clientSearchGridContextMenuAddFavourite.css('display', favourites ? 'none' : 'block');
clientManagement.variable.clientSearchGridContextMenuRemoveFavourite.css('display', favourites ? 'block' : 'none');

clientManagement.variable.clientSearchGridContextMenu.kendoContextMenu({
target: "#clientMatterGrid",
filter: "tbody > tr",
open: function (e) {
clientManagement.variable.clientSearchGridContextMenu.addClass("show");
let node = $(e.target);
$("#clientMatterGrid").data('kendoGrid').select(node);
},
select: function (e) {
let node = $(e.target);

$("#clientMatterGrid").data('kendoGrid').select(node);

switch ($(e.item).attr('id')) {
case "clientSearchGridContextMenuAddFavourite":
clientManagement.addRemoveFavourite(true);
break;
case "clientSearchGridContextMenuRemoveFavourite":
clientManagement.addRemoveFavourite(false);
break;
case "clientSearchGridContextMenuClose":
clientManagement.variable.clientSearchGridContextMenu.data("kendoContextMenu").close();
break;
}
}
});
}

Grid

ModalView

answered on 28 Feb 2025

1 answer

51 views

Kendo MultiSelect with Virtualization: DataSource Data Empty for a Few Milliseconds

$("#msUsers").kendoMultiSelect({
        placeholder: "Select Users...",
        autoClose: false,
        dataTextField: "UserName",
        dataValueField: "UserId",
        virtual: {
            itemHeight: 40,
            mapValueTo: "dataItem",
            valueMapper: function (options) {
                var ids = options.value;
                if (!ids.length) {
                    options.success([]);
                    return;
                }
                $.ajax({
                    url: "/Home/GetUserByIds",
                    traditional: true,
                    data: { ids: ids },
                    success: function (response) {
                        options.success(response.length ? response : []);
                    },
                    error: function (xhr) {
                        console.log("Error:", xhr.responseText);
                    }
                });
            }
        },
        dataSource: {
            transport: {
                read: {
                    url: "/Home/BindUsers",
                    dataType: "json",
                    data: function (options) {
                        return {
                            skip: options.skip,
                            take: options.take,
                            filter: options.filter
                        };
                    }
                },
                parameterMap: function (data, action) {
                    if (action === "read") {
                        return {
                            take: data.take,
                            skip: data.skip,
                            filter: data.filter?.filters?.[0]?.value || ""
                        };
                    }
                    return data;
                }
            },
            schema: {
                data: "Data",
                total: "Total"
            },
            pageSize: 40,
            serverPaging: true,
            serverFiltering: true
        }
    });

I’m using Kendo UI MultiSelect with virtualization enabled, and I’ve noticed an issue where calling:


$("#multiSelect").data("kendoMultiSelect").value([1,2]);  //Where [1,2] already exists in the dataSource.

Immediately after setting the value, I attempt to retrieve it, but the result is an empty array [].
I tested this with setInterval(), and for a few milliseconds, the value remains empty before updating correctly.
My code logic requires retrieving the value immediately after setting it and passing it to an API call. However, as mentioned, I receive an empty array.
Is there an event I can listen for before proceeding?
I could use setTimeout(), but that feels like a hack.

MultiSelect

answered on 28 Feb 2025

1 answer

69 views

Multi language support for pdf export functionality

kendo.drawing.PDFOptions

I am using this option to download the pdf format of the kendo diagram control. How can I add the language options, to download the PDF in different languages?

/Kumeri.

Diagram

Globalization

answered on 27 Feb 2025

0 answers

47 views

How to manipulate the text of the k-group-indicator button

In my formatting of the grid I set the grid column titles. However when the user groups by the columns the k-group-indicator button uses the same "Title". Is there a way to have the k-group-indicator display a different text? My issue is that it doesn't format as HTML the same as the grid so it displays the html markup " </th>" which is not what I want.

{
field: "ClientName", title: "[[[Client Name]]]",
template: "#= data.ClientName #",
width: 100,
groupHeaderTemplate: "[[[Client Name]]] ${data.value}",
hideOnGroup: true
},
{
field: "Acct", title: "[[[Account Number]]]",
template: "#= data.Acct #",
width: 100,
groupHeaderTemplate: "[[[Account Number]]] ${data.value}",
hideOnGroup: true
},

 {
                    field: "ClientName", title: "[[[Client<br/>Name]]]",
                    template: "#= data.ClientName #",
                    width: 100,
                    groupHeaderTemplate: "[[[Client Name]]] ${data.value}",
                    hideOnGroup: true
                },
                {
                    field: "Acct", title: "[[[Account<br/>Number]]]",
                    template: "#= data.Acct #",
                    width: 100,
                    groupHeaderTemplate: "[[[Account Number]]]  ${data.value}",
                    hideOnGroup: true
                },