Is it possible to prevent script/code injection with the "Drag and Drop" feature? It seems text is encoded when displayed but executed on drag and drop. I only tested this with the Grid and TreeList components.

I'm wondering if the Kendo JQuery ListView supports grouping and endless scrolling at the same time. I modified your example Dojo to include both, however, the rest of the list never loads. Am I doing something wrong or is grouping not supported with endless scrolling?

My Example Dojo

Dojo Source

Hi,

I am trying to use the Kendo UI kendoDatePicker but I am not seeing the button that opens up the calendar? Must be missing something? Here is what I am using:

    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="Kendo/2023.3.1010/styles/bootstrap-3.css" />
    <link rel="stylesheet" href="Kendo/2023.3.1010/styles/bootstrap-main.css" />
    <link rel="stylesheet" href="FontAwesome/font-awesome-4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="styles/jquery_1.12.0-rc2/jquery-ui.min.css" />
    
    <!-- JAVASCRIPT -->
    <script type="text/javascript" src="jQuery/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="Kendo/2023.3.1010/js/jszip.min.js"></script>
    <script type="text/javascript" src="Kendo/2023.3.1010/js/kendo.all.min.js"></script>
    <script type="text/javascript" src="Kendo/2023.3.1010/js/kendo.timezones.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui.min.js"></script>

Here is the code in my JavaScript file:

    $("#startDate").kendoDatePicker({
        value: _view.get("startDate"),
        change: function () {
            var value = this.value();
            var submitVal = kendo.toString(value, "yyyy-MM-dd");
            /* The result can be observed in the DevTools(F12) console of the browser. */
            console.log("START DATE: " + value + " AFTER kendo.toString: " + submitVal); //value is the selected date in the datepicker
        }
    });

I am just getting the field with the date inside of it now, no calendar selection button:

Here is a screen shot of my HTML code:

Thanks! 

George

I have a kendo grid utilizing local data (returned in a single api call). I need to virtualize this grid because there are thousands of rows. I also need the grid to be grouped and have group footers. I tried to follow the instructions here but I end up with only 1 group when I add virtualization. I created a Sample Dojo with 500 Items. This is my actual code. I modified the variables in the Dojo to match the sample data available:

   $("#actualsGrid").kendoGrid({
            dataSource: {
                data: actualsData,
                pageSize: 20,
                transport: {
                    read: function (e) {
                        e.success(actualsData);
                    }
                },
                schema: {
                    model: {
                        id: "InvoiceID",
                        fields: {
                            InvoiceID: {
                                type: "number",
                            },
                            Account: {
                                type: "string"
                            }
                        }
                    }
                },
                group: {
                    field: "Account",
                    aggregates: [
                        {
                            field: "Amount",
                            aggregate: "sum"
                        }
                    ]
                }
            },
            columns: [
                {
                    field: "Account",
                    title: "Account",
                    width: 200
                },
                {
                    field: "Date",
                    title: "Accounting Date",
                    width: 100
                },
                {
                    field: "Description",
                    title: "Description",
                    width: 200
                },  
                {
                    field: "Amount",
                    title: "Amount",
                    width: 100,
                    groupFooterTemplate: ({ Amount }) => `${Amount.sum}`
                }
            ],
            height: 300,
            pageSize: 100,
            //scrollable: true,
            scrollable: {
                virtual: true,
                height: "400px",
            },
            pageable: {
                numeric: false,
                previousNext: false,
                messages: {
                    display: "Showing {2} data items"
                }
            },
        });

Hello,

Kendo UI for jQuery doesn't work at all on iPad Mini 4 (iOS 12.4) after version 2024.1..319 I have also tested on IOS 13 and seems to be problem here as well. All newer versions of iOS work correctly.

More specifically kendo versions:

• 2023.3.1114   Works correctly
  
• 2024.1.130    Works correctly
  
• 2024.1.319    Produces an Error (kendo.version is undefined)
  
• 2024.2.514   Produces an Error (kendo.version is undefined)
• 2024.3.806  Produces an Error (kendo.version is undefined)
  
• 2024.3.1015 Produces an Error (kendo.version is undefined)

I've created a dojo just to show the kendo.version and I tested on online test environment.

https://dojo.telerik.com/HKrcQCJW

On attached screenshots you can find the error on 2024.1.319 and how it works correctly on 2023.3.1114 & 2024.1.130.

Please advise.

Regards

I am trying to output the contents of a webpage to a PDF using the below. Here is a simplified example that demonstrates my problem: https://dojo.telerik.com/FsiNAoUB/2

My actual webpage contains a few paragraphs of information in divs and a few tables. The tables can be wide so I am using the kendo.drawing.fit so everything looks good on the PDF.

With the kendo.drawing.fit, the PDF outputs the page very nicely, all the objects fits well on the PDF.

But the problem I have is that the header and footer templates do not work when using kendo.drawing.fit. Meaning, no header or footer appears in the PDF. But the objects do appear as desired.

If I remove the kendo.drawing.fit, the header and footer templates work again, but the output does not look as good. The grids are too wide etc...

How can I get the below example working with header and footer templates?

More information:
If these setting are set here: "kendo.drawing.drawDOM("#grid", {paperSize: "A4",margin: "3cm",template: $("#page-template").html()......."
-All the pages of the PDF are placed on top of each other on 1 single page. For example instead of 3 pages in the PDF, there is only 1 page because each page is "printed" on the same page, on top of each other. However, the header and footer templates do print on the PDF.

Here is an example PDF:

If these setting are set here: "return kendo.drawing.exportPDF(content, {paperSize: "A4",margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },template: $("#page-template").html()});"
-The PDF appears as desired but there are no header or footer templates.

kendo.drawing.drawDOM("#grid", {
	  paperSize: "A4",
	  margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
	  template: $("#page-template").html()
  }).then(function(group){

		//Adding this forces all the pages of the PDF to overlap onto 1 page
		var PAGE_RECT = new kendo.geometry.Rect(
			[0, 0], [mm(210 - 20), mm(297 - 20)]
		);
		var content = new kendo.drawing.Group();
		content.append(group);

		kendo.drawing.fit(content, PAGE_RECT)
		//
	
		return kendo.drawing.exportPDF(content, {
			//paperSize: "A4",
			//margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
			//template: $("#page-template").html()
		  });
  })
	  .done(function (data) {
		kendo.saveAs({
		  dataURI: data,
		  fileName: "filename.pdf",
		  //proxyURL: "myurl/Test/"
		});
	  });

Hello,

I'm currently  creating a treeview page using kendo JQuery.

I want to make it so that when a child node is selected, the parent node is selected.

I found this page, https://docs.telerik.com/kendo-ui/knowledge-base/check-nodes-programmatically, and tried to this properties.

 var treeview = $("#tree").data("kendoTreeView");

    var bar = treeview.findByText("Bar");

    treeview.dataItem(bar).set("checked", true);

But, 'menuAuth.js:299 Uncaught TypeError: Cannot read properties of undefined (reading 'findByText')' was printed on the console.

also, parent cannot be read.

'menuAuth.js:301 Uncaught TypeError: Cannot read properties of undefined (reading 'parent')' is printed on console too.

I really need to make parent node selection.

please let me know how can I use this things.

Thanks,

Jieun

I am trying to use npm version of kendo ui jquery, I have added it to my package.json and referenced the latest version I have access to which is 2023.1.425, when I try to use the license I have on my account I am getting the following error:

License activation failed for @progress/kendo-ui v2023.3.1114 Your trial license expired on 10/14/2023, 2:00:17 PM.

It seems the license is attempting to activate another version, to be more a specific a trial that has expired, I should still be able to use my perpetual license of the latest version I have access to which is 2023.1.425, but it seems the portal has rewritten latest license with a trial license?

any help with this should be appreciated

Hi everyone,

I have problems on binding data from json to Kendo UI for Jquery scheduler, here is my code:

Html/JS

    		$("#scheduler").kendoScheduler({
				timezone: "Europe/Rome",
				ongoingEvents: true,
				editable: false, /*must be read-only*/
				views: [
					{
						type: "month"
					}
				],
				dataSource: {
					batch: true,
					transport: {
						read: {
							url: "/ajax/scheduler-view.php",
							dataType: "json"
						}
					}
				},
				schema: {
					   model: {
						 fields: {
						   id: { type: "number", field: "id" },
						   title: { field: "title"  },
						   start: { type: "date", field: "start" },
						   end: { type: "date", field: "end" },
						   description: { field: "description" },
						   isAllDay: { type: "boolean", field: "isAllDay" }
						 }
					   }
					 }
			});

and here is the JSON:

[{"id":1,"title":"mio titolo","description":"","startTimezone":"Europe\/Rome","start":"\/Date(1729786479)\/","end":"\/Date(1729872879)\/","endTimezone":"Europe\/Rome","isAllDay":true}]

I tryied many ways, but I cannot see the event in the scheduler (that is rendered ok, but empty).

Any suggestion?

Thank you