Telerik Forums
Kendo UI for jQuery Forum
1 answer
103 views
I'm looking at the spreadsheet validation here: https://demos.telerik.com/kendo-ui/spreadsheet/validation
It should that validation rules are set at each individual cell.   We are looking to build this grid dynamically (populating from a database) and that would require iterating through each cell to set validation.  Is there a way to set validation at the column level? 
Neli
Telerik team
 answered on 03 Jun 2022
1 answer
61 views

Hello,

What should I write to get the value inside the cell? I run in angular, I want to assign the cell value I selected to the variable.


  @ViewChild('spreadsheet') spreadsheetEl!: ElementRef;

  constructor(private hostEl: ElementRef) {}

  ngAfterViewInit() {
    kendo.jQuery(this.spreadsheetEl.nativeElement).kendoSpreadsheet({
           columns: 3,
           //rows: 10,
           sheetsbar: false,
           toolbar: {
            home: [
              "open", "exportAs",

              {
                  type: "button",
                  text: "Material select",
                  showText: "both",
                  icon: "k-icon k-i-cog",
                  click: function(e: any) {



                    var sheet = this.spreadsheetEl.nativeElement.activeSheet();
                    var range = sheet.selection();
                  }
              }
          ],
            insert: false,
            data: false,
            },
...

thank you

regards

Neli
Telerik team
 answered on 01 Jun 2022
0 answers
50 views

Hello,

 

1. How to put validation in spreadsheet when  i'm getting data dynamically their are data coming key value pair.So how to validate every column based on requirement.Please help me to solve this problem. Thanks

brajesh
Top achievements
Rank 1
Iron
 asked on 30 May 2022
0 answers
46 views

Hello,

1. Is it possible to send key as number in spredsheet this number show as header. When I'm sending this key it's throwing error.If you have any idea please help me.

I'm sending like this

[{"2019":5475.13,

"2022":5676376.325,

"2023":5443.2332}]  

I want to set key as header.

brajesh
Top achievements
Rank 1
Iron
 updated question on 30 May 2022
1 answer
357 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

 


Martin
Telerik team
 answered on 26 May 2022
0 answers
59 views

Hello,

 

I want to hidden insert and data buttons, Can I turn off some feature buttons inside the home button? I will be glad if you help

 

thank you

kypdk
Top achievements
Rank 1
Iron
 asked on 23 May 2022
1 answer
59 views

Adding a range of values looks like this.

 

values2 is comma separated string of values enclosed in []

 

var range = spreadsheet.Range(A1:Z1);

range.values(values2)   This fills each cell with one comma separated value from the string and works well.

range.comment(values2) This fills every cell in the range with the entire string of values2. It does not parse in the same way as range.Values.

Neli
Telerik team
 answered on 23 May 2022
1 answer
56 views

When the spreadsheet loads, everything is working perfectly. Data in spreadsheet is big.

Is there a way to disable the selection of whole spreadsheet with

  1. ctrl + A button
  2. column selection
  3. row selection. 

This hangs the chrome browser and pushes CPU to 99 . I tried manually to disable the column and row selection but ctrl +A selecting the whole sheet disables the whole browser.

Neli
Telerik team
 answered on 20 May 2022
1 answer
67 views

I using this very simple example of kendoSpreadsheet and when I added filters, it applies a colored border around all filtered rows and columns, then shows another colored border around selected cells. I have one simple question. How do you turn that off? I find it very hard on the eyes and distracting.

 

  $("#spreadsheet").kendoSpreadsheet({
        select: onSelect,
        change: onChange,
        toolbar: {
            home: [{
                type: "button",
                text: "Comments",
                showText: "both",
                icon: "k-icon k-i-cog",
                click: function () {
                    makeDialog();
                    openDialog();
                }
            }
            ]
        },
        sheets: [{
            name: "TimeTracker",
            filter: {
                ref: "A1:E3",
                columns: []
            },
            columns: [
                { width: 100 },
                { width: 100 },
                { width: 100 },
                { width: 100 },
                { width: 100 }
            ]
        }
        ]
    });
Neli
Telerik team
 answered on 19 May 2022
1 answer
56 views

I have three related questions:

Can spreadsheet cell comments from the tool bar be added to the context menu. 

If not, can a custom function be added to the context menu.

When you update a cell comment using the comment control from the menu bar, is there an event either at the cell level or comment dialog level that can be captured. From what I can see so far, not of the widgets on the menu bar have events that can be captured. Is that correct?

Neli
Telerik team
 answered on 17 May 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?