Questions on Kendo UI for jQuery Forum

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

Spreadsheet

answered on 26 May 2022

1 answer

59 views

Can I add a range of comments to Kendo Spreadsheet similar to the way you can add a range of values.

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.

Spreadsheet

answered on 23 May 2022

1 answer

56 views

SpreadSheet Selection Hangs Chrome

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

ctrl + A button
column selection
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.

Spreadsheet

answered on 20 May 2022

1 answer

67 views

Turn off Borders when Adding filter to KendoSpreadsheet

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 }
]
}
]
});

Spreadsheet

answered on 19 May 2022

1 answer

56 views

Can the comment widget from the Spreadsheet Toolbar be added to Context menu

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?

Spreadsheet

Toolbar

answered on 17 May 2022

1 answer

92 views

JQuery Spreadsheet Toolbar Options Question

I'm using $("#spreadsheet").kendoSpreadsheet() to create a spreadsheet with a toolbar where I have only certain options of the toolbar available. In general, doing this is very straight forward but one of the options I want is "comment". It's on the Toolbar if you don't specify which options you want, but when you do, it does not seem to be available. Am I doing something wrong here. Even the documentation does not list it as an option.

This is straight from the spreadsheet ui documentation:

toolbar - API Reference - Kendo UI Spreadsheet | Kendo UI for jQuery (telerik.com)

The following list indicates the available tools. The tools which are part of a tool group are defined as an array. For example ["bold", "italic", "underline"].

open
exportAs
[cut, copy, paste]
[bold, italic, underline]
backgroundColor, textColor
borders
fontSize, fontFamily
alignment
textWrap
[formatDecreaseDecimal, formatIncreaseDecimal]
format
merge
freeze
filter

Spreadsheet

Toolbar

answered on 17 May 2022

1 answer

81 views

SpreadSheet Load CSV /XLS

I'm trying to import form a file with diferent format

The samples I fount relate do CsvFormatProvider ou XlsFormatProvider tha return a Workbook.

How do I link the retrun workbook to my kendo UI control=

var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
fileName = "SOME_FILE.CSV";

if (!File.Exists(fileName)) {
throw new FileNotFoundException(String.Format("File {0} was not found!", fileName));
}
formatProvider = new CsvFormatProvider();

using(input = new FileStream(fileName, FileMode.Open))
{
workbook = formatProvider.Import(input);
}

Spreadsheet.?? = workbook

Spreadsheet

answered on 10 May 2022

1 answer

189 views

Spreadsheet - Copy and paste function using API

Hi,

How do i trigger a copy and paste function in kendo ui jquery spreadsheet via API? I am trying to copy a selected range of records and paste it over but it does not work with the below codes.

var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
var sheet = spreadsheet.activeSheet();

sheet.range(1, 0, 1, 100).select();
spreadsheet.trigger("copy");
sheet.range(0, 0, 1, 100).select();
spreadsheet.trigger("paste");

Thanks in advance.

Spreadsheet

answered on 21 Mar 2022

1 answer

71 views

Real-time chart update with datasource from spreadsheet

Good morning,

we would need to create a Telerik chart that takes data from a spreadsheet placed on the same page, to expect a real-time update of the chart when editing the spreadsheet.

Is it possible to implement this kind of solution or a variant of it that allows to update the chart as the data in the spreadsheet changes (without reloading the page)?

Kind regards,

Charts

Spreadsheet

answered on 01 Mar 2022

1 answer

56 views

Trigger paste event

Hi,

Is there a way to trigger a paste event when on click from the custom context menu? I am having different option to allow pasting based on the selection. But I will need to trigger the paste function not sure whether can i do it. Currently, my idea is to have the following option:

- Paste with format

- paste without format