Questions on Kendo UI for jQuery Forum

1 answer

482 views

Hello,

http://dojo.telerik.com/orOBogAX

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.default.min.css">
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/jszip.min.js"></script>

I added this code in index.html Anguler project

this code in componet html

    <div id="example" ng-app="KendoDemos">
      <div ng-controller="MyCtrl">
        <kendo-spreadsheet k-scope-field="spreadsheet" k-sheets="sheets" ></kendo-spreadsheet>
        <!-- OR -->
        <!--<div kendo-spreadsheet="spreadsheet" k-sheets="sheets" ></div>-->
      </div></div>
    <script>
      angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){

        $scope.sheets= [{ name: "Sheet1" }, { name: "Sheet2" }];
        $scope.$on("kendoWidgetCreated", function(event, widget){
          // the event is emitted for every widget; if we have multiple
          // widgets in this controller, we need to check that the event
          // is for the one we're interested in.
          if (widget === $scope.spreadsheet) {
            var sheets = $scope.spreadsheet.sheets();
            $scope.spreadsheet.activeSheet(sheets[1]);
          }
        });
      });
    </script>

I get a error. I want to run a spreadsheet in angular how can I do this?

ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement')
    at MaterialComponent.ngAfterViewInit (material.component.ts:28:28)
    at callHook (core.mjs:2551:1)
    at callHooks (core.mjs:2520:1)
    at executeInitAndCheckHooks (core.mjs:2471:1)
    at refreshView (core.mjs:9566:1)
    at refreshComponent (core.mjs:10692:1)
    at refreshChildComponents (core.mjs:9291:1)
    at refreshView (core.mjs:9545:1)
    at refreshEmbeddedViews (core.mjs:10646:1)
    at refreshView (core.mjs:9519:1)
defaultErrorLogger @ core.mjs:6494
handleError @ core.mjs:6541
(anonymous) @ core.mjs:26589
invoke @ zone.js:372
run @ zone.js:134
runOutsideAngular @ core.mjs:25507
tick @ core.mjs:26589
(anonymous) @ core.mjs:26434
invoke @ zone.js:372
onInvoke @ core.mjs:25608
invoke @ zone.js:371
run @ zone.js:134
run @ core.mjs:25462
next @ core.mjs:26433
next @ Subscriber.js:91
_next @ Subscriber.js:60
next @ Subscriber.js:31
(anonymous) @ Subject.js:34
errorContext @ errorContext.js:19
next @ Subject.js:27
emit @ core.mjs:22483
checkStable @ core.mjs:25530
onHasTask @ core.mjs:25625
hasTask @ zone.js:426
_updateTaskCount @ zone.js:447
_updateTaskCount @ zone.js:274
runTask @ zone.js:195
drainMicroTaskQueue @ zone.js:585
Promise.then (async)
nativeScheduleMicroTask @ zone.js:561
scheduleMicroTask @ zone.js:572
scheduleTask @ zone.js:396
scheduleTask @ zone.js:221
scheduleMicroTask @ zone.js:241
scheduleResolveOrReject @ zone.js:1265
then @ zone.js:1450
bootstrapModule @ core.mjs:26214
14431 @ main.ts:11
__webpack_require__ @ bootstrap:19
__webpack_exec__ @ main.ts:12
(anonymous) @ main.ts:12
__webpack_require__.O @ chunk loaded:23
(anonymous) @ main.ts:12
webpackJsonpCallback @ jsonp chunk loading:34
(anonymous) @ main.js:2
angular.min.js:7 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.7.9/$injector/modulerr?p0=KendoDemos&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.7.9%2F%24injector%2Fnomod%3Fp0%3DKendoDemos%0A%20%20%20%20at%20https%3A%2F%2Fkendo.cdn.telerik.com%2F2022.1.412%2Fjs%2Fangular.min.js%3A7%3A168%0A%20%20%20%20at%20https%3A%2F%2Fkendo.cdn.telerik.com%2F2022.1.412%2Fjs%2Fangular.min.js%3A26%3A453%0A%20%20%20%20at%20b%20(https%3A%2F%2Fkendo.cdn.telerik.com%2F2022.1.412%2Fjs%2Fangular.min.js%3A25%3A478)%0A%20%20%20%20at%20https%3A%2F%2Fkendo.cdn.telerik.com%2F2022.1.412%2Fjs%2Fangular.min.js%3A26%3A227%0A%20%20%20%20at%20https%3A%2F%2Fkendo.cdn.telerik.com%2F2022.1.412%2Fjs%2Fangular.min.js%3A42%3A496%0A%20%20%20%20at%20r%20(https%3A%2F%2Fkendo.cdn.telerik.com%2F2022.1.412%2Fjs%2Fangular.min.js%3A8%3A76)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fkendo.cdn.telerik.com%2F2022.1.412%2Fjs%2Fangular.min.js%3A42%3A344)%0A%20%20%20%20at%20fb%20(https%3A%2F%2Fkendo.cdn.telerik.com%2F2022.1.412%2Fjs%2Fangular.min.js%3A46%3A460)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fkendo.cdn.telerik.com%2F2022.1.412%2Fjs%2Fangular.min.js%3A22%3A57)%0A%20%20%20%20at%20Uc%20(https%3A%2F%2Fkendo.cdn.telerik.com%2F2022.1.412%2Fjs%2Fangular.min.js%3A22%3A370)
    at angular.min.js:7:168
    at angular.min.js:43:285
    at r (angular.min.js:8:76)
    at g (angular.min.js:42:344)
    at fb (angular.min.js:46:460)
    at c (angular.min.js:22:57)
    at Uc (angular.min.js:22:370)
    at Ae (angular.min.js:21:45)
    at HTMLDocument.<anonymous> (angular.min.js:348:494)
    at i (jquery-1.12.3.min.js:2:27449)
(anonymous) @ angular.min.js:7
(anonymous) @ angular.min.js:43
r @ angular.min.js:8
g @ angular.min.js:42
fb @ angular.min.js:46
c @ angular.min.js:22
Uc @ angular.min.js:22
Ae @ angular.min.js:21
(anonymous) @ angular.min.js:348
i @ jquery-1.12.3.min.js:2
fireWith @ jquery-1.12.3.min.js:2
ready @ jquery-1.12.3.min.js:2
K @ jquery-1.12.3.min.js:2
index.js:551 [webpack-dev-server] Live Reloading enabled.
DevTools failed to load source map: Could not load content for https://kendo.cdn.telerik.com/2022.1.412/js/angular.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Spreadsheet

answered on 26 May 2022

3 answers

771 views

select all second-level's nodes in dropdowntree

Hello!

I wonder if there is a possibility to create an option ala "select all", but customize it to selecting only second-level nodes or nodes with specified ids?

DropDownTree

answered on 25 May 2022

0 answers

273 views

File manager tree view custom sort

Hi Team,

I am using file manager and I wanted to sort tree view elements in file manager based on some custom logic. Now by default it is sorting based on name. Is there any way to implement custom sorting?

FileManager

TreeView

asked on 25 May 2022

1 answer

234 views

Kendo UI grid related issue

Hi,

We are using keno grid component, in one of the grid column we are appending kendo multiselect to user to select option ,on selecting we are setting other columns , on setting of other columns selected option from dropdown is going off

Scenario1: once we set the remaining columns the selected option from kendo multiselect is going off.

Scenario2: if we select second time the same option then the selected option is not going off.

Scenario3: if we add the row to the grid , the second time selected option is going off again.

can u please suggest is there anything wrong in the code.

for reference: http://dojo.telerik.com/iNaqIYEh/27

Thank you

DropDownList

Grid

answered on 25 May 2022

1 answer

261 views

Inline Editor Toolbar fixed to top

I added a Kendo UI JQuery Editor to my page. It looks as expected when it is generated from a textarea but when it is generated from a div the toolbar pops up and floats around. I want it always visible AND fixed to the top of the editor just like on this page or on the classic editor. I found one article about it but that article didn't seem to work. My editor also needs to be resizable with an initial height of 75px. Resizing currently doesn't go any smaller than 100px. See this Dojo for the resizing problem: https://dojo.telerik.com/EXiSugUg. I have multiple editors on the page in a modal. I am generating them in a loop like so:

// html <div id="editor1"></div><div id="editor2"></div>...
let id = "editor1";
let editors = {};
editors[id] = $(`#${id}`).kendoEditor({
        pasteCleanup: {
            keepNewLines: true
        },
        resizable: {
            content: true,
            toolbar: true
        },
        tools: [
            "bold", "italic", "underline", "insertUnorderedList", "insertOrderedList", "indent", "outdent", "justifyLeft", "justifyCenter", "justifyRight"
        ]
    }).data("kendoEditor");

Editor

answered on 25 May 2022

1 answer

360 views

kendo jquery orgChart is not displayed as expected

Hello,

I try to use jquery orgChart as in the kendo example below :

https://demos.telerik.com/kendo-ui/orgchart/index

This is the html kendo code, I just changed the source of the image:

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

<script src="js/jquery.min.js"></script>

<script src="js/kendo.all.min.js"></script>

</head>
<body>
<img src="/img/bi15.png" />
<div id="example">
<div id="orgchart"></div>

<script>
var data = [
{ id: 1, name: "Gevin Bell", title: "CEO", expanded: true, avatar: "/img/bi15.png" },
{ id: 2, name: "Clevey Thrustfield", title: "COO", expanded: true, parentId: 1, avatar: "/img/bi15.png" },
{ id: 3, name: "Carol Baker", title: "CFO", expanded: false, parentId: 1, avatar: "/img/bi15.png" },
{ id: 4, name: "Kendra Howell", title: "CMO", expanded: false, parentId: 1, avatar: "/img/bi15.png" },
{ id: 5, name: "Sean Rusell", title: "Financial Manager", expanded: true, parentId: 3, avatar: "/img/bi15.png" },
{ id: 6, name: "Steven North", title: "Senior Manager", expanded: false, parentId: 3, avatar: "/img/bi15.png" },
{ id: 7, name: "Michelle Hudson", title: "Operations Manager", expanded: true, parentId: 2, avatar: "/img/bi15.png" },
{ id: 8, name: "Andrew Berry", title: "Team Lead", parentId: 5, avatar: "/img/bi15.png" },
{ id: 9, name: "Jake Miller", title: "Junior Accountant", parentId: 5, avatar: "/img/bi15.png" },
{ id: 10, name: "Austin Piper", title: "Accountant", parentId: 5, avatar: "/img/bi15.png" },
{ id: 11, name: "Dilyana Newman", title: "Accountant", parentId: 5, avatar: "/img/bi15.png" },
{ id: 12, name: "Eva Andrews", title: "Team Lead", parentId: 6, avatar: "/img/bi15.png" },
{ id: 13, name: "Kaya Nilsen", title: "Financial Specialist", parentId: 6, avatar: "/img/bi15.png" },
{ id: 14, name: "Elena Austin", title: "Team Lead", parentId: 4, avatar: "/img/bi15.png"},
{ id: 15, name: "Lora Samuels", title: "Lawyer", parentId: 4, avatar: "/img/bi15.png"},
{ id: 16, name: "Lillian Carr", title: "Operator", parentId: 7, avatar: "/img/bi15.png" },
{ id: 17, name: "David Henderson", title: "Team Lead", parentId: 7, avatar: "/img/bi15.png" }
];

$("#orgchart").kendoOrgChart({
dataSource: data
});
</script>
</div>

</body>
</html>

but the result is not displayed as expected hierarchy and it doesn't look like a tree.

am I missing something?

my result:

expected result:

Thanks in advance.

OrgChart

answered on 24 May 2022

0 answers

129 views

Adding a dropdown list in the Action Column instead of using command buttons doesn't work right

I'm new to Kendo UI/Telerik, but have been a web developer for over 15 years.

Please forgive my title as well, as I could be doing it completely wrong by doing this:

            dataBound:function(){
                $('.toolbar').kendoToolBar({
                    items: [ {
                        type: "splitButton",
                        text: "Edit",
                        click:function(e){
                            var grid = $('#grid').data('kendoGrid');

                            grid.editRow(e.target.parents('tr'))
                        },
                        menuButtons: [
                            { id: "foo", text: "Print", click:function(){alert('print')} },
                            { id: "bar", text: "Delete", click:function(e){
                                    var grid = $('#grid').data('kendoGrid');

                                    grid.removeRow(e.target.parents('tr'))
                                } },
                        ]
                    } ]
                });
            }

But that's what the demo shows. I’m a bit confused as to why this works with a hardcoded data source:

https://dojo.telerik.com/eMUwAqUH

I've been piecing together quite a bit on my own, but one thing has me stumped -- this seems like such a common requirement for Grid usage, and yet my searches don't seem give me anything for jQuery UI.

But as soon as I swap in my real data source (API call), when I hit Edit, then hit Edit again to save the change, the entire box disappears.

I took a short video:

https://www.loom.com/share/9d894316b4364efbae18c01e8ede9db4

This is a pretty big deal for me because all of my data tables are going to be API driven, and I want to use a dropdown for the action columns NOT individual buttons. A lot of the time I’m going to have more than just “Edit and Delete” so a dropdown makes more sense.

Any help would be appreciated, I'm sure you can literally swap out the dataSource and columns with a sample one, and you should get the exact same error. I'm running on the latest version of Edge, but same thing happens in Chrome.

Data Source

DropDownList

Grid

updated question on 24 May 2022

1 answer

174 views

kendo scheduler field event change and field validation trigger manually

Hi,

In this demo: https://demos.telerik.com/kendo-ui/scheduler/timeline

I have three drives me crazy questions(Especially the last two T_t):

1) How can I elegantly get field value that is DropDownList type in customize validation function , for example: roomId or attendees.

2) How can I code field's change event function in edit-form , for example: roomId or attendees.

3) For example, I code customize validation function for field roomId and field attendees in schema-model-fields. In roomId customize validation function, How can I manual programming trigger attendees's customize validation function for edit-form?

Thank you very much for your help.

DropDownList

Editor

Scheduler