Telerik Forums
Kendo UI for Angular Forum
1 answer
58 views

I have an open source Angular custom scrollbar library. I wanted to add an integration example with Kendo UI Grid at this page https://www.npmjs.com/package/ngx-scrollbar. but when I tried to add to the demo, it looked bad because of the watermark.

 

In the stackblitz the grid example doesn't show a watermark. I am wondering if there is a way to display the grid example without it for demonstration purpose.

Thanks,

Yanmario
Telerik team
 updated question on 25 Sep 2024
0 answers
65 views

Hello,

I have come across an issue that I was able to replicate in a stackblitz. When using dynamic columns to display a Kendo Grid's data, specifically when the grid only contains one row, the editTemplate unexpectedly reverts to a standard input field. This behavior does not occur when the grid has multiple rows.

In my example stackblitz below, I have a dropdownlist as the edit template for the column Product Type. Upon clicking it, (sometimes a double click) it turns into a input.

 

To repeat:
1) add product type in multi select above grid to display row
2) Click Dropdown
3) Dropdown becomes input

I'd appreciate any help, I've tried a few things like event.preventDefault and other ways to try and stop this behavior, but I cannot figure out a way. Again, it only happens when there is one row.

Thanks in advance!

Kendo UI for Angular Example Application (stackblitz.io)

https://stackblitz.com/edit/angular-ppvmbg?file=src%2Fapp%2Fapp.module.ts

B
Top achievements
Rank 1
 asked on 24 Sep 2024
1 answer
66 views

I have a kendo-treelist in Angular

 

Edit mode has only Number, Text or boolean,

 <kendo-treelist-column field="Enhed" title="Enhed"  editor="text"
    [style]="{'text-align': 'left','min-width':'100px','padding': '0px'}"
      [headerStyle]="{'text-align': 'left'}">
       <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="Enhed">
        <span *ngIf="!kendotreelist.isEditingCell()">{{dataItem.Enhed}}</span>
        <select *ngIf="kendotreelist.isEditingCell()" type="text" [(ngModel)]="dataItem.Enhed" >
          <option *ngFor="let enhed of enheder" [value]="enhed">{{enhed}}</option>
        </select>
      </ng-template>
    </kendo-treelist-column>

 

I need to make it custom select instead.

Is there any one who knows how?

 

Martin Bechev
Telerik team
 answered on 24 Sep 2024
0 answers
265 views

Hello!

I'm trying to implement the DialgService as described in the example (Angular Dialogs Dialog Angular Service - Kendo UI for Angular (telerik.com) but I keep getting the following error:

Cannot attach dialog to the page.
Add an element that uses the kendoDialogContainer directive, or set the 'appendTo' property.

Yes, I tried to google for a solution and some answers suggested, to put the 

<div kendoDialogContainer></div>

into my app.component.html but that didn't change anything. Setting the "appendTo" property only resulted in a typescript error.

Does anyone have a suggestion for me on how to fix this error?

 

Thanks for any help in advance!

Cheers

Joerg

 

 

 

Jörg
Top achievements
Rank 1
 asked on 20 Sep 2024
0 answers
41 views

TL;DR: It'd be great if there was an option for the Grid to automatically stack if we enable it. Something like the way PrimeNG does it would be cool (linked v14 because it appears to be broken in newer versions [why we use Kendo!]).

 

Spiel:
The kendo docs show a really great format for a responsive stacking grid that is especially great for simple grids shown here: https://www.telerik.com/kendo-angular-ui/components/grid/styling/responsive-design

Doing it that way is great and allows for a large degree of customization which I appreciate. However, in many cases it would be preferred to have a solid, opinionated default that allows us to more quickly create grids. Another benefit of the speed is the ease of maintenance. When the grid needs to be modified later on, without an automatic stacking grid we need to modify the columns in two places.

Lucio
Top achievements
Rank 1
 asked on 19 Sep 2024
5 answers
1.4K+ views
How do I make both ends of a stacked bar chart round .attaching the current state of the developed chart and the expected design.kindly let me know how do I achieve this.
Yanmario
Telerik team
 updated answer on 18 Sep 2024
0 answers
704 views

I recently upgraded my application angular version to 18.2.4 now I'm getting this error. I figured that probably Kendo control need to be upgraded as well so I updated the Keno UI version as well.

 

ERROR InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': 'aria-disabled]' is not a valid attribute name.
    at Ct.setAttribute (platform-browser.mjs:593:16)
    at na.setAttribute (browser.mjs:4603:23)
    at o1 (core.mjs:13032:18)
    at C_ (core.mjs:13022:5)
    at T2 (core.mjs:21174:9)
    at hostBindings (progress-kendo-angular-layout.mjs:96:100)
    at rD (core.mjs:12022:17)
    at W0 (core.mjs:13833:9)
    at Y0 (core.mjs:13999:9)
    at LE (core.mjs:13959:5)

 

    "@progress/kendo-angular-buttons": "^16.9.0",
    "@progress/kendo-angular-common": "^16.9.0",
    "@progress/kendo-angular-dateinputs": "^16.9.0",
    "@progress/kendo-angular-dialog": "^16.9.0",
    "@progress/kendo-angular-dropdowns": "^16.9.0",
    "@progress/kendo-angular-excel-export": "^16.9.0",
    "@progress/kendo-angular-grid": "^16.9.0",
    "@progress/kendo-angular-icons": "^16.9.0",
    "@progress/kendo-angular-indicators": "^16.9.0",
    "@progress/kendo-angular-inputs": "^16.9.0",
    "@progress/kendo-angular-intl": "^16.9.0",
    "@progress/kendo-angular-l10n": "^16.9.0",
    "@progress/kendo-angular-label": "^16.9.0",
    "@progress/kendo-angular-layout": "^16.9.0",
    "@progress/kendo-angular-menu": "^16.9.0",
    "@progress/kendo-angular-navigation": "^16.9.0",
    "@progress/kendo-angular-notification": "^16.9.0",
    "@progress/kendo-angular-pdf-export": "^16.9.0",
    "@progress/kendo-angular-popup": "^16.9.0",
    "@progress/kendo-angular-progressbar": "^16.9.0",
    "@progress/kendo-angular-tooltip": "^16.9.0",
    "@progress/kendo-angular-treeview": "^16.9.0",
    "@progress/kendo-angular-upload": "^16.9.0",
    "@progress/kendo-angular-utils": "^16.9.0",
    "@progress/kendo-data-query": "^1.7.0",
    "@progress/kendo-drawing": "^1.20.3",
    "@progress/kendo-licensing": "^1.3.5",
    "@progress/kendo-svg-icons": "^3.1.0",
    "@progress/kendo-theme-default": "^9.0.0"

 

 

I checked earlier post

https://feedback.telerik.com/kendo-angular-ui/1645525-tabstripcomponent-throws-errors-after-updating-to-angular-17-3-0?_gl=1*f8131b*_gcl_au*MjA3Mjg3MTg2My4xNzI2NTY3NTYy*_ga*MzQ5NDk5NTAwLjE3MjY1Njc1NjI.*_ga_9JSNBCSF54*MTcyNjU2NzU2MS4xLjAuMTcyNjU2NzU2MS42MC4wLjA.

 

Yogesh
Top achievements
Rank 1
 asked on 18 Sep 2024
1 answer
90 views

I am a newbee in Kendo Components and need advice on selecting the right component.

I want a grid or tree representation of something like a book with the following structur.

- Book 1

-- Chapter 1

--- Subchapter 1

---- Line 1

---- Line 2

--- Subchapter 2

---- Line 1

---- Line 2

- Book 2

-------

-------

There are about 18 books. Some books divide lines in both chapters and subchapters. Other books only divide by chapters. So using a Grid can be a problem since setting groups = 'book, chapter, subchapter' would mean that books that dont use subchapters will be presented with an empty group for subchapter

I have tried using Master-Detail grid with 4 levels af grid (see the picture). This actually seem to work but will require a lot of styling to get rid of unwanted space. And there is the issue of a bit difficult navigation betwwen the levels.

Would it be better to use a treelist or treeview.

Zornitsa
Telerik team
 answered on 12 Sep 2024
3 answers
122 views

I’m working with the Kendo DateRange component and I need to disable future dates. I attempted to use [disabledDates]="dates", but this option is not available. How can I achieve this?





              <kendo-daterange>
                  <div class="col col-6 custDatePickerWidth">
                    <label>Created Date From</label>
                      <kendo-dateinput name="SearchDatePickerCreatedDateFrom" kendoDateRangeStartInput
                        formControlName="createdDateFrom" [format]="'MM/dd/yyyy'" placeholder="mm/dd/yyyy" [max]="maxDate">
                      </kendo-dateinput>
                  </div>
                  <span class="line">-</span>
                <div class="col col-6 custDatePickerWidth toDate">
                    <label>Created Date To</label>
                      <kendo-dateinput name="SearchDatePickerCreatedDateTo" kendoDateRangeEndInput formControlName="createdDateTo"
                        [format]="'MM/dd/yyyy'" placeholder="mm/dd/yyyy" [max]="maxDate">
                      </kendo-dateinput>
                </div>
              </kendo-daterange>

Hetali
Telerik team
 answered on 11 Sep 2024
1 answer
197 views

Upgrading Kendo packages from v15 to v16 I faced slowness during build process.
with Angular v17, Kendo v15 build takes 8min, same project with Angular v18 and Kendo v16 takes 14 min. 

Also the "Webpack Bundle Analyzer" show biggest bundle.

 

 Is there reason of slow build and huge bundle? 
Zornitsa
Telerik team
 answered on 10 Sep 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?