Questions on Kendo UI for jQuery Forum

0 answers

165 views

Manually built source code of kendo ui for jquery in angularjs version doesn't work.

Hi,

I am trying to update kendo ui version from 2022.3 to the latest in our old angularJS application.

I followed instructions to build source code as described here:

https://docs.telerik.com/kendo-ui/intro/installation/ecmascript

I am injecting supported version of jquery, order of injections is ok.. there is something else I can't reach.

However, after injecting kendo.all.js (or kendo.all.min.js) and try to run my application, I always get the error shown down.

Any help or suggestion would be helpful.

Thank you and regards,

Vedad

Error: [$injector:modulerr] Failed to instantiate module myAngularApp due to:
Error: [$injector:modulerr] Failed to instantiate module kendo.directives due to:
Error: [$injector:nomod] Module 'kendo.directives' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=kendo.directives
at http://localhost:8080/myWebApp/js/lib.js:9882:12
at http://localhost:8080/myWebApp/js/lib.js:11896:17
at ensure (http://localhost:8080/myWebApp/js/lib.js:11820:38)
at module (http://localhost:8080/myWebApp/js/lib.js:11894:14)
at http://localhost:8080/myWebApp/js/lib.js:14431:22
at forEach (http://localhost:8080/myWebApp/js/lib.js:10135:20)
at loadModules (http://localhost:8080/myWebApp/js/lib.js:14415:5)
at http://localhost:8080/myWebApp/js/lib.js:14432:40
at forEach (http://localhost:8080/myWebApp/js/lib.js:10135:20)
at loadModules (http://localhost:8080/myWebApp/js/lib.js:14415:5)
at createInjector (http://localhost:8080/myWebApp/js/lib.js:14337:19)
at doBootstrap (http://localhost:8080/myWebApp/js/lib.js:11572:20)
at bootstrap (http://localhost:8080/myWebApp/js/lib.js:11593:12)
at angularInit (http://localhost:8080/myWebApp/js/lib.js:11478:5)
at HTMLDocument.<anonymous> (http://localhost:8080/myWebApp/js/lib.js:41577:5)
at fire (http://localhost:8080/myWebApp/js/lib.js:3187:31)
http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=kendo.directives&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'kendo.directives'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.5.8%2F%24injector%2Fnomod%3Fp0%3Dkendo.directives%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A9882%3A12%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A11896%3A17%0A%20%20%20%20at%20ensure%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A11820%3A38)%0A%20%20%20%20at%20module%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A11894%3A14)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A14431%3A22%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A10135%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A14415%3A5)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A14432%3A40%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A10135%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A14415%3A5)%0A%20%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A14337%3A19)%0A%20%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A11572%3A20)%0A%20%20%20%20at%20bootstrap%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A11593%3A12)%0A%20%20%20%20at%20angularInit%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A11478%3A5)%0A%20%20%20%20at%20HTMLDocument.%3Canonymous%3E%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A41577%3A5)%0A%20%20%20%20at%20fire%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A3187%3A31)
at http://localhost:8080/myWebApp/js/lib.js:9882:12
at http://localhost:8080/myWebApp/js/lib.js:14454:15
at forEach (http://localhost:8080/myWebApp/js/lib.js:10135:20)
at loadModules (http://localhost:8080/myWebApp/js/lib.js:14415:5)
at http://localhost:8080/myWebApp/js/lib.js:14432:40
at forEach (http://localhost:8080/myWebApp/js/lib.js:10135:20)
at loadModules (http://localhost:8080/myWebApp/js/lib.js:14415:5)
at createInjector (http://localhost:8080/myWebApp/js/lib.js:14337:19)
at doBootstrap (http://localhost:8080/myWebApp/js/lib.js:11572:20)
at bootstrap (http://localhost:8080/myWebApp/js/lib.js:11593:12)
at angularInit (http://localhost:8080/myWebApp/js/lib.js:11478:5)
at HTMLDocument.<anonymous> (http://localhost:8080/myWebApp/js/lib.js:41577:5)
at fire (http://localhost:8080/myWebApp/js/lib.js:3187:31)
at Object.fireWith [as resolveWith] (http://localhost:8080/myWebApp/js/lib.js:3317:7)
at Function.ready (http://localhost:8080/myWebApp/js/lib.js:3536:13)
at HTMLDocument.completed (http://localhost:8080/myWebApp/js/lib.js:3552:9)
http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=myAngularApp&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20kendo.directives%20due%20to%3A%0AError%3A%20%5B%24injector%3Anomod%5D%20Module%20'kendo.directives'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.5.8%2F%24injector%2Fnomod%3Fp0%3Dkendo.directives%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A9882%3A12%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A11896%3A17%0A%20%20%20%20at%20ensure%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A11820%3A38)%0A%20%20%20%20at%20module%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A11894%3A14)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A14431%3A22%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A10135%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A14415%3A5)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A14432%3A40%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A10135%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A14415%3A5)%0A%20%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A14337%3A19)%0A%20%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A11572%3A20)%0A%20%20%20%20at%20bootstrap%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A11593%3A12)%0A%20%20%20%20at%20angularInit%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A11478%3A5)%0A%20%20%20%20at%20HTMLDocument.%3Canonymous%3E%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A41577%3A5)%0A%20%20%20%20at%20fire%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A3187%3A31)%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.5.8%2F%24injector%2Fmodulerr%3Fp0%3Dkendo.directives%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520Module%2520'kendo.directives'%2520is%2520not%2520available!%2520You%2520either%2520misspelled%2520the%2520module%2520name%2520or%2520forgot%2520to%2520load%2520it.%2520If%2520registering%2520a%2520module%2520ensure%2520that%2520you%2520specify%2520the%2520dependencies%2520as%2520the%2520second%2520argument.%250Ahttp%253A%252F%252Ferrors.angularjs.org%252F1.5.8%252F%2524injector%252Fnomod%253Fp0%253Dkendo.directives%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8080%252FmyWebApp%252Fjs%252Flib.js%253A9882%253A12%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8080%252FmyWebApp%252Fjs%252Flib.js%253A11896%253A17%250A%2520%2520%2520%2520at%2520ensure%2520(http%253A%252F%252Flocalhost%253A8080%252FmyWebApp%252Fjs%252Flib.js%253A11820%253A38)%250A%2520%2520%2520%2520at%2520module%2520(http%253A%252F%252Flocalhost%253A8080%252FmyWebApp%252Fjs%252Flib.js%253A11894%253A14)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8080%252FmyWebApp%252Fjs%252Flib.js%253A14431%253A22%250A%2520%2520%2520%2520at%2520forEach%2520(http%253A%252F%252Flocalhost%253A8080%252FmyWebApp%252Fjs%252Flib.js%253A10135%253A20)%250A%2520%2520%2520%2520at%2520loadModules%2520(http%253A%252F%252Flocalhost%253A8080%252FmyWebApp%252Fjs%252Flib.js%253A14415%253A5)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8080%252FmyWebApp%252Fjs%252Flib.js%253A14432%253A40%250A%2520%2520%2520%2520at%2520forEach%2520(http%253A%252F%252Flocalhost%253A8080%252FmyWebApp%252Fjs%252Flib.js%253A10135%253A20)%250A%2520%2520%2520%2520at%2520loadModules%2520(http%253A%252F%252Flocalhost%253A8080%252FmyWebApp%252Fjs%252Flib.js%253A14415%253A5)%250A%2520%2520%2520%2520at%2520createInjector%2520(http%253A%252F%252Flocalhost%253A8080%252FmyWebApp%252Fjs%252Flib.js%253A14337%253A19)%250A%2520%2520%2520%2520at%2520doBootstrap%2520(http%253A%252F%252Flocalhost%253A8080%252FmyWebApp%252Fjs%252Flib.js%253A11572%253A20)%250A%2520%2520%2520%2520at%2520bootstrap%2520(http%253A%252F%252Flocalhost%253A8080%252FmyWebApp%252Fjs%252Flib.js%253A11593%253A12)%250A%2520%2520%2520%2520at%2520angularInit%2520(http%253A%252F%252Flocalhost%253A8080%252FmyWebApp%252Fjs%252Flib.js%253A11478%253A5)%250A%2520%2520%2520%2520at%2520HTMLDocument.%253Canonymous%253E%2520(http%253A%252F%252Flocalhost%253A8080%252FmyWebApp%252Fjs%252Flib.js%253A41577%253A5)%250A%2520%2520%2520%2520at%2520fire%2520(http%253A%252F%252Flocalhost%253A8080%252FmyWebApp%252Fjs%252Flib.js%253A3187%253A31)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A9882%3A12%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A14454%3A15%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A10135%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A14415%3A5)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A14432%3A40%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A10135%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A14415%3A5)%0A%20%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A14337%3A19)%0A%20%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A11572%3A20)%0A%20%20%20%20at%20bootstrap%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A11593%3A12)%0A%20%20%20%20at%20angularInit%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A11478%3A5)%0A%20%20%20%20at%20HTMLDocument.%3Canonymous%3E%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A41577%3A5)%0A%20%20%20%20at%20fire%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A3187%3A31)%0A%20%20%20%20at%20Object.fireWith%20%5Bas%20resolveWith%5D%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A3317%3A7)%0A%20%20%20%20at%20Function.ready%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A3536%3A13)%0A%20%20%20%20at%20HTMLDocument.completed%20(http%3A%2F%2Flocalhost%3A8080%2FmyWebApp%2Fjs%2Flib.js%3A3552%3A9)
at http://localhost:8080/myWebApp/js/lib.js:9882:12
at http://localhost:8080/myWebApp/js/lib.js:14454:15
at forEach (http://localhost:8080/myWebApp/js/lib.js:10135:20)
at loadModules (http://localhost:8080/myWebApp/js/lib.js:14415:5)
at createInjector (http://localhost:8080/myWebApp/js/lib.js:14337:19)
at doBootstrap (http://localhost:8080/myWebApp/js/lib.js:11572:20)
at bootstrap (http://localhost:8080/myWebApp/js/lib.js:11593:12)
at angularInit (http://localhost:8080/myWebApp/js/lib.js:11478:5)
at HTMLDocument.<anonymous> (http://localhost:8080/myWebApp/js/lib.js:41577:5)
at fire (http://localhost:8080/myWebApp/js/lib.js:3187:31)
at Object.fireWith [as resolveWith] (http://localhost:8080/myWebApp/js/lib.js:3317:7)
at Function.ready (http://localhost:8080/myWebApp/js/lib.js:3536:13)
at HTMLDocument.completed (http://localhost:8080/myWebApp/js/lib.js:3552:9)

General Discussions

asked on 12 Sep 2024

0 answers

147 views

Filter and Grid Cell Editing Date Format

I am running into an issue with allowing copy/paste of dates into the filter and cell input fields. Currently, the date fields have validation to support MM/dd/yyyy, and users of the app may be trying to copy dates in that are MM/dd/yy. I would expect Kendo to auto format the date to MM/dd/yyyy after the paste happens, or at least allow support for that, but it doesn't seem to happen.

In the cell, when putting in MM/dd/yy, a validation message appears saying the date is invalid, and there doesn't appear to be a way to override that. In the filter, when putting in MM/dd/yy and submitting the filter, it doesn't stick and completely ignores the date put in.

Is there any way with the latest version of Kendo (I am on 16) to allow for different date formats in these fields, or is there the possibility that this is something coming in the future?

asked on 11 Sep 2024

1 answer

191 views

Compress pictures before upload using the upload widget

I use the upload widget in a long-running web app to allow picture upload.

Over the years, the number and size of pictures have increased.

I compress property in the upload widget would be great, however, short of this, has anyone played around with compressing images in the browser in connection with using the upload widget?

/Morten

Upload

answered on 11 Sep 2024

2 answers

152 views

In Speadsheet, cells are not exporting to excel with border

When creating cells they are created roughly as follows

{
value: String(result[0][i]["date_description"]),
 ...CONFIG_LEFT,
borderTop: { color: "#000000", style: "solid", width: 1 },
borderBottom: { color: "#000000", style: "solid", width: 1 },
borderLeft: { color: "#000000", style: "solid", width: 1 },
borderRight: { color: "#000000", style: "solid", width: 1 },
},

This displays correctly on the browser view but when I go to export it and then open it in excel only the bottom border shows up

Spreadsheet

updated answer on 11 Sep 2024

0 answers

346 views

How to update Multiselect data?

Hi!

I initialized a multiselect:

 let kendoMultiSelect = $("#multisel").kendoMultiSelect({
     dataSource: ['item1'],
     value: ['item1'],
     autoClose: false
 }).data("kendoMultiSelect");

and function of refresh multiselect data:

$.ajax({
     url: myUrl,
     type: "POST",
     data: window.kendo.stringify({ objId: that.objId }),
     contentType: "application/json",
     cache: false,
     async: true,
     success: function (response) { //response - array (for example: ['new1', 'new2', ...])
         let widget =  $("#multisel").getKendoMultiSelect();
         widget.dataSource = response;
         widget.value = response; //I need all the data to be selected at once
     }
 });

After success query the multiselect did not update.

When I try to open the multiselect dropdown I get an error: "TypeError: this.dataSource.flatView is not a function"

How can I update the multiselect.

Data Source

General Discussions

MultiSelect

asked on 10 Sep 2024

0 answers

128 views

kendoGrid cannot works without 'async:false'

when jquery is 1.X,we can do like this

<script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: dataSource,
                columns: [{
                    field: "ContactName",
                    title: "Contact Name",
                    values: getDictName('type')
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }]
            });
			function getDictName(type){
			   $.ajax({
			   url:"demo.action",
			   success:function(result){
                      return result;//the result like:[{key:'a',value:'apple'},{key:'o',value:'orange'}]
                }});
			}
			
        });
    </script>

but when we change jquery to 3.X, the function of 'getDictName' is not work,because jquery-3.x is not support for 'async:false', so before the function-getDictName returned the result, the kendoGrid is already performed.

Grid

asked on 05 Sep 2024

1 answer

85 views

Spreadsheet for quick input

I'm looking into using Spreadsheet to enter data into an underlying database quickly.

Like the table below, where the columns A, B, C and D would be loaded from the database, the columns E and F (Sales and VM) should be editable (from row 2), and the Total column (G) should sum Sales and VM.

	A	B	C	D	E	F	G
1	Location	Location group	Country	Manager	Sales	VM	Total
2	A	X	1	I	6	3	9
3	B	X	1	I	2	2	4
4	C	Y	1	II	3	1	4
5	D	Y	2	II	4	2	6
6	Total						23

The underlying database would be updated whenever a cell in either column E or F (Sales or VM) was updated (onChange).

On change I would need to be able to get the value of the column header (row 1 ), and the value in the cell from the updated row in column A.

Is all this possible?

/Morten

Spreadsheet

answered on 04 Sep 2024

0 answers

262 views

Auto Height for List View

I have a kendo UI Jquery list view. It has a search bar that filters the datasource. I want the height to be a maximum of 50vh. My issue is that when I only have 1 item, the height is too large. How do I make it automatically calculate the height? Here is a dojo. To demonstrate, set the max and min to 31 so you only have one item, you will notice that the gray box doesn't shrink to fit the one item. If I remove the height option, it doesn't ever show anything.

https://dojo.telerik.com/@dojolee/ApicowUQ

ListView

asked on 03 Sep 2024

1 answer

196 views

Confused about data grid options to allow scrolling/resizing.

I'm trying to make a few of our datagrids that end up having way too many columns a bit more manageable for users.

Setting the table to 'scrollable: true' seems like it should fix one issue and allow the datagrid to overflow with scrollbars, so you an scroll the table itself rather than the entire page.

But when I add 'scrollable: true' to our datagrid, I get a very different result...instead of allowing the really wide table to scroll, in collapses all the columns to fit the width of the window. In some ways, this is useful--but not at all what that property is meant to do, is it?

Am I misunderstanding something?

General Discussions