Questions on Kendo UI for Angular Forum

1 answer

172 views

There is a bug in the Angular Kendo Editor, whereby it treats any semicolon in the style attribute as a CSS property delimiter. However, not all semicolons are CSS property delimiters, as I will show in an example below.

Version: "@progress/kendo-angular-editor": "16.8.0".

Set the value property of <kendo-editor> to the below value:

<p  style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo)"> </p>

Note the semicolon in the URL parameter between svg+xml and base64.

When you load the editor, you will get the following error:

TypeError: Cannot read properties of undefined (reading 'trim')
    at http://localhost:9090/dev-build/vendor.js:81983:45
    at Array.forEach (<anonymous>)
    at applyStyle (http://localhost:9090/dev-build/vendor.js:81981:98)
    at http://localhost:9090/dev-build/vendor.js:81989:5
    at Array.forEach (<anonymous>)
    at restoreStyleAttr (http://localhost:9090/dev-build/vendor.js:81986:65)
    at htmlToFragment (http://localhost:9090/dev-build/vendor.js:82001:3)
    at parseContent (http://localhost:9090/dev-build/vendor.js:82041:15)
    at EditorComponent.initialize (http://localhost:9090/dev-build/vendor.js:324747:100)
    at Object.next (http://localhost:9090/dev-build/vendor.js:324378:155)

The error seems to be occurring in the file

./node_modules/@progress/kendo-drawing/dist/es2015/svg/utils/render-svg.js

Below is the problematic code. It assumes that any semicolon is a CSS property delimiter, but this is not true, as in the example above,

where the semicolon is part of the CSS value.

const applyStyle = (styleString, element) => styleString.split(';').filter(s => s !== '').forEach(s => {
  const parts = s.split(':');
  element.style[parts[0].trim()] = parts[1].trim();
});

The code is crashing on line 3 above, as there is no 1st element of the parts array.

Editor

updated answer on 18 Oct 2024

0 answers

141 views

Angular 10 Kendo Grid Causing "Class constructor vA cannot be invoked without 'new'" Error

I'm in the process of upgrading an Angular application from version 8 to 10. After the upgrade, I'm encountering the following error while using Kendo Grid in my Angular application,

vendor.4add67dadae0cd9152b9.js:16 ERROR Error: Uncaught (in promise): TypeError: Class constructor vA cannot be invoked without 'new'
TypeError: Class constructor vA cannot be invoked without 'new'
    at new t (index.js:2890:28)
    at new e (index.js:6780:28)
    at Sg (core.js:23695:20)
    at _g (core.js:23564:22)
    at mk (core.js:30653:38)
    at Dk (core.js:30969:13)
    at Ck (core.js:30888:13)
    at mk (core.js:30681:5)
    at Dk (core.js:30969:13)
    at Ck (core.js:30888:13)

Here's the relevant code:

queue-grid.component.ts:

import { Component, OnInit, OnDestroy, Input, Inject } from "@angular/core";
import { ActivatedRoute, Router } from '@angular/router';
import { GridDataResult } from '@progress/kendo-angular-grid';
import { SortDescriptor } from '@progress/kendo-data-query';
import { Subscription } from "rxjs/Subscription"
import * as _ from 'lodash';



@Component({
    selector: "queue-grid",
    moduleId: module.id.toString(),
    templateUrl: "./queue-grid.component.html",
    providers: [
        { provide: Window, useValue: window }
    ]
})
export class QueueGridComponent implements OnInit, OnDestroy {
    // ... component properties
    public isLoading: boolean = true; 

    constructor() {
        console.log("Queue Component Constructor");
        this.fetchData();
        console.log("constructor end");
    }

    ngOnInit() {
        console.log("Queue Component oninit ");
        console.log("Component oninit end");
    }

    fetchData() {

        setTimeout(() => {
            this.QueueListData = {
                data: [
                    { reference: "12345", state: "CA", dueDate: "10/20/2024" },
                    { reference: "67890", state: "NY", dueDate: "10/25/2024" },
                    { reference: "54321", state: "TX", dueDate: "10/30/2024" }
                ],
                total: 3
            };
            this.isLoading = false; 
        }, 2000); 
    }

    ngOnDestroy(): void {
    }
}

Relevant parts of queue-grid.component.html:

 <div id="dvListData">
    <kendo-grid [data]="QueueListData?.data">
    <kendo-grid-column field="reference" title="Reference #"> </kendo-grid-column>
    <kendo-grid-column field="state" title="State"> </kendo-grid-column>
    <kendo-grid-column field="dueDate" title="Due Date"> </kendo-grid-column>
    </kendo-grid> 
</div>

Relevant parts of Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GridModule } from '@progress/kendo-angular-grid'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';



@NgModule({
    imports: [
       
        GridModule ,BrowserAnimationsModule
    ],
    declarations: [
        QueueGridComponent
    ]
})
export class QueueGridModule { }

package.json:

"@angular/animations": "^10.2.2",
"@angular/common": "^10.2.2",
"@angular/compiler": "^10.2.2",
"@angular/compiler-cli": "^10.2.2",
"@angular/core": "^10.2.2",
"@angular/forms": "^10.2.2",
"@angular/platform-browser": "^10.2.2",
"@angular/platform-browser-dynamic": "^10.2.2",
"@angular/platform-server": "^10.2.2",
"@angular/router": "^10.2.2",
"@angular/upgrade": "^10.2.2",
"@ng-bootstrap/ng-bootstrap": "^8.0.0",
"@progress/kendo-angular-buttons": "^5.0.0",
"@progress/kendo-angular-common": "^1.0.0",
"@progress/kendo-angular-dateinputs": "^4.0.0",
"@progress/kendo-angular-dropdowns": "^4.0.0",
"@progress/kendo-angular-excel-export": "^3.0.0",
"@progress/kendo-angular-grid": "^4.7.3",
"@progress/kendo-angular-inputs": "^6.0.0",
"@progress/kendo-angular-intl": "^2.0.0",
"@progress/kendo-angular-l10n": "^2.0.0",
"@progress/kendo-angular-layout": "^5.1.0",
"@progress/kendo-angular-pdf-export": "^2.0.0",
"@progress/kendo-angular-popup": "^3.0.0",
"@progress/kendo-data-query": "^1.5.5",
"@progress/kendo-date-math": "^1.3.0",
"@progress/kendo-drawing": "^1.0.0",
"@progress/kendo-file-saver": "^1.0.3",
"@progress/kendo-ooxml": "^1.0.2",
"@progress/kendo-popup-common": "^1.0.0",
"@progress/kendo-theme-default": "^3.0.0",
"@telerik/kendo-draggable": "^1.5.1",
"@telerik/kendo-dropdowns-common": "^1.0.0",
"@telerik/kendo-inputs-common": "^2.2.1",
"@telerik/kendo-intl": "^1.2.0",
"@telerik/kendo-theme-default": "^1.33.4",
"@types/file-saver": "^2.0.0",
"angular-d3-charts": "^4.4.7",
"angular-highcharts": "^10.0.1",
"angular-router-loader": "^0.8.2",
"angular-tree-component": "^8.5.5",
"angular2-template-loader": "^0.6.2",
"bootstrap": "^4.3.1",
"copy-webpack-plugin": "^4.3.1",
"core-js": "^2.6.1",
"file-saver": "^2.0.1",
"hammerjs": "^2.0.8",
"highcharts": "^9.2.2",
"highcharts-stock": "^0.1.7",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^4.0.0",
"jquery": "^3.2.1",
"jszip": "^3.2.0",
"lodash": "^4.14.172",
"mini-css-extract-plugin": "^0.1.0",
"mobx": "^4.0.1",
"moment": "^2.22.2",
"ngx-file-drop": "^11.0.0",
"ng2-input-autocomplete": "^0.3.5",
"ng2-select": "^2.0.0",
"ngx-smart-popover": "^1.0.4",
"ngx-textarea-autosize": "^2.0.0",
"ngx-toastr": "^13.0.0",
"npm": "^8.5.5",
"raw-loader": "^0.5.1",
"rxjs": "^6.5.3",
"rxjs-compat": "^6.6.7",
"style-loader": "^0.19.1",
"systemjs": "^0.19.39",
"ts-loader": "^6.0.0",
"typescript": ">=3.9.0 <4.1.0",
"zone.js": "^0.10.3"

tsconfig.json

"compilerOptions": {
  "baseUrl": "",
  "lib": [ "es2016", "dom" ],
  "downlevelIteration": true,
  "target": "es6",
  "module": "esnext",
  "noImplicitAny": false,
  "sourceMap": true,
  "preserveConstEnums": true,
  "noEmitOnError": false,
  "experimentalDecorators": true,
  "emitDecoratorMetadata": true,
  "forceConsistentCasingInFileNames": false,
  "allowSyntheticDefaultImports": true,
  "declaration": false,
  "moduleResolution": "Node"
}

I'm seeing 'constructor end' in the console, but then it throws the error that i mentioned above.

Grid

updated question on 17 Oct 2024

0 answers

54 views

How can I fix an error with Tile Layout and Bootstrap DropdownMenu

I'm working on a component using Bootstrap's dropdown functionality (ph filter form). I have a dropdown that should appear when clicking a button, but the dropdown is not appearing in the foreground as expected. I've already tried adjusting the z-index and overflow properties, but the dropdown still seems to be hidden behind other elements.
I placed this component inside the kendo-tile-item-header and still the behavior is not what I expected.

Could you please provide information on whether there are known issues or specific considerations when using Bootstrap dropdowns in Kendo Tile Layout? Any guidance or suggestions to resolve this issue would be greatly appreciated.

Best Regards.

TileLayout

asked on 16 Oct 2024

0 answers

59 views

Keyboard navigation between two grids

Hi,

Following this official instruction, we can use TAB key to navigate within a single grid editable cells. However the user requirement is to navigate between two grids - when navigate to the last editable cell in the grid, hitting TAB again should focus on the first editable cell in another grid, and vise versa.

We've tried to use a service (since grids are in different components) in "InCellTabDirective", when no next cell to navigate to, to raise a notification and the next grid will subscribe this notification and put first cell into edit mode with "editRow()". However this does not work as smoothly as expected. It seems the grid header always have a tabindex so will prevent to focus on a cell within, so have to press TAB twice to actually focus on the cell element. Sometimes the kendoTextBox in the first cell does not get focused but instead the cell itself. Sometimes when jumping between two grids the "jump-from" grid still in edit but loses focus, and the "jump-in" grid and two rows focused at the same time.

Is there an official approach or demo how to achieve this - navigate out of current grid to another element, or navigate into grid from outside. Thanks in advance.

Version used: @progress/kendo-angular-grid: "~16.5.0"

Accessibility

Grid

updated question on 16 Oct 2024

0 answers

65 views

Infinite Hierarchical Grids with Heterogeneous Structures in Kendo UI for Angular

Hi.

I'm exploring the possibilities of implementing hierarchical grids in Kendo UI for Angular and would like to know if it is possible to create grids with an infinite (or unpredictable) number of levels, each having heterogeneous structures.

Specifically, the requirement would involve different structures at each level (i.e., different columns and data types), and the number of nested levels is not known in advance.
Is there a way to dynamically handle these scenarios within the Kendo UI for Angular grid component?

I would appreciate any insights, examples, or suggestions on how to approach this.

Regards.

Grid

asked on 10 Oct 2024

0 answers

103 views

Long Progress Bar Animation Time When Reducing Steps in Stepper

I've got a use case where the number of steps in a vertically oriented stepper are dynamic.

If the number of steps is decently high (like, above 10) and the current step is also high, reducing the number of steps to a small value causes a very long and weird looking animation of the progress bar.

Here is a stackblitz demonstrating the issue

Turning off animations or reducing the time would mitigate this problem, but I think the animations are nice to have, especially when progressing through the stepper in a more traditional fashion.

ProgressBar

Stepper

updated question on 09 Oct 2024

1 answer

240 views

Kendo Angular Gantt Chart Installation Issue

Hi,

I have been trying to install gantt chart, version 0.2.0. There are several errors when I import it in app.module.ts. I am attaching screenshot of package.json and the error.

Charts

Gantt

updated answer on 09 Oct 2024

0 answers

45 views

Kendo grid does not maintain `resizable` when using `virtual-scroll` with *ngIf

There is a problem in kendo-grid using `virtual-scroll` that does not accept changing the grid-row dynamically. Problem highlighted in this question:

https://www.telerik.com/forums/is-there-a-way-to-dynamically-set-rowheight-in-a-kendo-grid

The solution was to use *ngIf with true and false, but using resizable, and toogle the `show` property. It doesn't save the previous measurement, and I have to make it manual resizable.

stackblitz:
https://stackblitz.com/edit/angular-fxdtag-rutrah?file=src%2Fapp%2Fapp.component.ts

step 1: change the columns resizable
step 2:change the row heigh (pressing the button)

Grid

asked on 08 Oct 2024

1 answer

1.0K+ views

selectedKeys is not working after update kendo packages

I've prepared kendo grid with multiselection and everything was fine until I updated kendo packages:

Old versions:

"@progress/kendo-angular-buttons": "^5.5.2",
"@progress/kendo-angular-common": "^1.0.0",
"@progress/kendo-angular-dateinputs": "^4.3.2",
"@progress/kendo-angular-dialog": "^4.2.3",
"@progress/kendo-angular-dropdowns": "^5.5.0",
"@progress/kendo-angular-editor": "^1.2.4",
"@progress/kendo-angular-excel-export": "^3.1.5",
"@progress/kendo-angular-grid": "^4.8.4",
"@progress/kendo-angular-inputs": "^6.4.0",
"@progress/kendo-angular-intl": "^2.0.4",
"@progress/kendo-angular-l10n": "^2.0.0",
"@progress/kendo-angular-label": "^2.3.3",
"@progress/kendo-angular-layout": "^4.2.0",
"@progress/kendo-angular-listview": "^0.2.0",
"@progress/kendo-angular-menu": "^2.0.4",
"@progress/kendo-angular-notification": "^2.1.3",
"@progress/kendo-angular-pager": "^1.0.0",
"@progress/kendo-angular-pdf-export": "^2.0.4",
"@progress/kendo-angular-popup": "^3.0.0",
"@progress/kendo-angular-progressbar": "^1.0.0",
"@progress/kendo-angular-toolbar": "^3.2.1",
"@progress/kendo-angular-tooltip": "^3.0.0",
"@progress/kendo-angular-treelist": "^2.0.0",
"@progress/kendo-angular-treeview": "^5.4.2",
"@progress/kendo-angular-upload": "^6.1.0",
"@progress/kendo-data-query": "^1.5.4",
"@progress/kendo-drawing": "^1.5.12",
"@progress/kendo-theme-default": "^4.23.0",
"@progress/kendo-licensing": "^1.2.1",
After update operation:
"@progress/kendo-angular-buttons": "^8.0.0",
"@progress/kendo-angular-common": "^3.1.0",
"@progress/kendo-angular-dateinputs": "^7.0.1",
"@progress/kendo-angular-dialog": "^7.1.2",
"@progress/kendo-angular-dropdowns": "^7.0.2",
"@progress/kendo-angular-editor": "^4.1.3",
"@progress/kendo-angular-excel-export": "^5.0.1",
"@progress/kendo-angular-grid": "^7.2.3",
"@progress/kendo-angular-inputs": "^9.0.3",
"@progress/kendo-angular-intl": "^4.1.0",
"@progress/kendo-angular-l10n": "^4.0.0",
"@progress/kendo-angular-label": "^4.0.0",
"@progress/kendo-angular-layout": "^7.1.0",
"@progress/kendo-angular-listview": "^4.0.0",
"@progress/kendo-angular-menu": "^4.0.0",
"@progress/kendo-angular-notification": "^4.0.0",
"@progress/kendo-angular-pager": "^4.0.1",
"@progress/kendo-angular-pdf-export": "^4.0.0",
"@progress/kendo-angular-popup": "^5.0.0",
"@progress/kendo-angular-progressbar": "^3.0.0",
"@progress/kendo-angular-toolbar": "^6.0.2",
"@progress/kendo-angular-tooltip": "^4.0.1",
"@progress/kendo-angular-treelist": "^5.0.3",
"@progress/kendo-angular-treeview": "^7.1.0",
"@progress/kendo-angular-upload": "^9.0.2",
"@progress/kendo-data-query": "^1.6.0",
"@progress/kendo-drawing": "^1.16.3",
"@progress/kendo-theme-default": "^5.5.0",
"@progress/kendo-licensing": "^1.2.2",
My Kendo Grid properties:
  <kendo-grid  
  [selectable]="selectableSettings"
  (selectedKeysChange)="keyChange($event)"
  kendoGridSelectBy="id"
  [selectedKeys]="mySelection"
  >
Before update everything was fine I mean, I had correct objects (ids) into mySelection array number property.
Defined property into component:
    mySelection: number[] = [];
Selectable settings:
        this.selectableSettings = {
          checkboxOnly: true,
          mode: "multiple"
        };
KeyChange method:
    keyChange(e){
        this.closeEditor();
        if(e.length > 0) {
            this.isSelectionDisabled = false;
        } else {
            this.isSelectionDisabled = true;
        }
        this.extractDataItems = [];
        this.extract();
    }
Extract method:
    extract() {
        this.mySelection.forEach(idx => {
            this._subs.add(
                this.timeBookings$.pipe(
                    map(items => items.find(item => item.id === idx)
                )).subscribe(r => {
                    if(this.mySelection.length > 0 && r) {
                        this.extractDataItems.push(r);
                    }
                })
            );
        });
    }
Important!
When I'm selecting some rows - mySelection is always empty.
I know that in keyChange(e) method I can do something like:
this.mySelection = e;
and everything will work as should but why it was working correctly before update and after not?
Parameter of:
keyChange(e) - parameter e has correct value all the time

Grid

MultiSelect

answered on 08 Oct 2024

0 answers

52 views

How to select user from kendo dropdown then click kendo button do add row to Database table and displayed with kendo grid passing JSON to ajax function

//Controller
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create([DataSourceRequest] DataSourceRequest request, Model x)
{
    if (x!= null && ModelState.IsValid)
    {
        DataLayer.Create();
    }
 
    return Json(new[] { x }.ToDataSourceResult(request, ModelState)); 
}
//DAL
internal static Model Create()
{
    int iRows = 0;
    Guid guid = Guid.NewGuid(); (why is guid repeated twice?)
 
    string query = @"INSERT INTO Table2" +
                    "([Column1], [Column2], [Column3], [Column4], 
                      [Column5], [Column6], [Column7], [Column8],
                      [Column9], [Column10], [Column11], [Column12], [Column13] ) " +
" VALUES " + "(@Column1," + ConfigurationManager.AppSettings["Column2"] + ", ' ', GETDATE(), 
0 ,@Column6,1,@Column8,@Column9,@BEGDATE, @END_DATE,@Column12, @Column13)";
 
    using (IDbConnection _db = OpenConnection())
    {
        iRows = _db.Execute(query);
    }
 
    if (iRows > 0)
    {
        string query2 = @"SELECT * FROM Table2 WHERE PrimaryID2 = ";
 
        using (IDbConnection _db = OpenConnection())
        {
            return _db.Query<Model>(query2, new { PrimaryID2 = guid.ToString() }).FirstOrDefault();
        }
    }
    else
    {
        return null;
    }
}
//MODEL has all the properties (Column1,2, etc)
//VIEW/AJAX
   <div class="col">
    @(Html.Kendo().Button()
    .Name("create")
    .Content("Add new row")
    .HtmlAttributes(new { type = "button",  = "btn btn-primary" })
    .Events(ev => ev.Click("create")))
   </div>
 
   <div class="col">
    .DropDownListFor(a => a.model.primarykey1,     (IEnumerable<SelectListItem>)ViewBag.dropdownlist, "-- Select id1--", new {  @class= "form-control",  @id = "id1" })
  </div>
</div>`
for my AJAX
 
function create(items) {
 
  var selectedResident = $("#primaryid1").val();
 
$.ajax({
  url: "/user/Create",
  type: "POST",
  data: { grid: items },
  traditional: true, // add this
  success: function (result) {
  $('#grid').data('kendoGrid').dataSource.read();
  $('#grid').data('kendoGrid').refresh();
  },
  error:
    function (response) {
    alert("Error: " + response);
    }
 
    });
}

updated question on 08 Oct 2024