Questions on Kendo UI for Angular Forum

0 answers

306 views

Hello!

We got the issue that icons are not displayed correctly inside our kendo ui components.

We followed the styling tutorial Styling & Themes - Overview - Kendo UI for Angular (telerik.com) and Overview - Icon - Kendo UI for Angular (telerik.com).

We are using Kendo 11.3, kendo-theme-bootstrap 7.0.2 (also installed default theme), kendo-font-icons ^2.0.0

We also imported inside styles.scss:

@import '@progress/kendo-theme-bootstrap/scss/icons/_index.scss';
...
// kendo-angular-dropdowns
@import '@progress/kendo-theme-bootstrap/scss/autocomplete/_index.scss';
@import '@progress/kendo-theme-bootstrap/scss/combobox/_index.scss';
@import '@progress/kendo-theme-bootstrap/scss/dropdownlist/_index.scss';
@import '@progress/kendo-theme-bootstrap/scss/dropdowntree/_index.scss';
@import '@progress/kendo-theme-bootstrap/scss/multiselect/_index.scss';
...
@import '@progress/kendo-font-icons/dist/index.css';

The result of a dropdown box is in the image, it shows the wrong icon for the arrow down symbol.
Has anyone had this issue before and can somebody help please?

Thank you for your time

DropDownList

Icon

asked on 12 Dec 2023

0 answers

100 views

schedulers with collapsable hierarchical grouping for angular

Good morning
I would need schedulers with hierarchical grouping to be collapsable (like accordions).
Is there any option that works out of box?
Or can it be done with some custom template/css?
I saw that this product does exactly what I would like
https://bryntum.com/products/schedulerpro/examples-scheduler/frameworks/angular/tasks/dist/tasks/

Thank you

Scheduler

asked on 11 Dec 2023

1 answer

162 views

Stacked chart crashes when displaying large number of records

Hello,

We are currently experiencing a problem while presenting a stacked chart with approximately 8000 records. When we try to display all 8000 records at once, the chart keeps loading and the browser crashes after a few seconds, basically the screen freezes. We are currently using the chrome browser to run the web application.But when we load the chart with around 3000 records, it displays all of them without any problems.
As a result, we only face this problem when we attempt to load a huge number of records at once. So my concern is whether there is a fixed number of records that we can load for a stacked chart at once.

Charts

answered on 11 Dec 2023

0 answers

70 views

Display separate dashed line in vertical kendo chart with the given values including existing lines

Display separate horizontal dashed line in vertical kendo chart with the given values including existing lines

Charts

updated question on 08 Dec 2023

0 answers

69 views

Customize Built-in Pager Components

I'm currently utilizing the kendoPagerTemplate within a grid. In the template I am using the built-in elements of:
PagerNextButtonsComponent
PagerNumericButtonsComponent
PagerPageSizesComponent
PagerPrevButtonsComponent

I noticed that they generate kendo buttons and dropdown lists with classes that are from appearance options applied to them. Is there a way to choose which options they are, or am I forced to use CSS to select those class names and modify them to look like a different appearance option?

Grid

Pager

asked on 08 Dec 2023

1 answer

266 views

grid row reordering not working on newly added rows

Grid row reordering works fine when gird first loaded. But when new rows added to the data, i cant reorder the newly added rows to another index, the rowReorder event is not firing.Im using `kendoGridInCellEditing` and `editService`.

Grid

answered on 07 Dec 2023

2 answers

480 views

Override Filter on Grid to remove "Is Null" & "Is Not Null"

Hi everyone.

I already have a wrapper for "Kendo-grid" (app-data-table: it set everything about data, kind of filters (row, menu), and others) and almost work fine that all, however, when I use it in other component that insert the "kendo-grid-column" and I tried to customize a filter it start to throw errors.

Here a brief part of code:

<app-data-table *ngIf="dataTableOptions" [options]="dataTableOptions" (api)="setDataTableAPI($event)"
<kendo-grid-column field="fieldName" [title]="fieldTitle" [filterable]="true" [width]="180" filter="text"> 
            <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
                <kendo-grid-string-filter-menu
                  [column]="column"
                  [filter]="filter"
                  [filterService]="filterService">
                    <kendo-filter-eq-operator></kendo-filter-eq-operator>
                    <kendo-filter-neq-operator></kendo-filter-neq-operator>
                    <kendo-filter-contains-operator></kendo-filter-contains-operator>
                    <kendo-filter-not-contains-operator></kendo-filter-not-contains-operator>
                    <kendo-filter-startswith-operator></kendo-filter-startswith-operator>
                    <kendo-filter-endswith-operator></kendo-filter-endswith-operator>
                </kendo-grid-string-filter-menu>
          </ng-template>
        </kendo-grid-column>
</app-data-table>

Here an image with one of the errors:

Any help, thanks?

Grid

answered on 07 Dec 2023

0 answers

71 views

Sort grid column on a property of the field's dataitem?

<kendo-grid
  [kendoGridBinding]="reports"
  [pageable]="false"
  [sortable]="true"
>
    <kendo-grid-column field="quarter" title="Quarter">
    </kendo-grid-column>
    <kendo-grid-column field="wages" title="Total Wages" [width]="120" format="{0:c}">
    </kendo-grid-column>
    <kendo-grid-column field="taxable" title="Taxable Wages" [width]="120" format="{0:c}">
    </kendo-grid-column>
    <!-- Employer column doesn't sort -->
    <kendo-grid-column field="employer" title="Employer" [width]="100">
        <ng-template kendoGridCellTemplate let-dataItem>
            {{ dataItem.entity?.name}}
        </ng-template>       
    </kendo-grid-column>
</kendo-grid>

The grid above sorts properly on 3 columns, but not on the Employer column. Is it because I'm using the name property of the dataItem instead of the dataItem itself? Is there a way to do this so it sorts properly?

Grid

Sortable

asked on 05 Dec 2023

0 answers

194 views

Manual page breaking not splitting my page and overflow not showing

Hi There,

I'm currently trying to use the Kendo PDF Export Function using Kendo Drawing and have been struggling to split the page of dynamic widgets into 2 and it cuts off the bottom of the page and doesnt go onto a second page even when using force page break.

Is there any function to check if the page is overflowing? so I can adjust the table template with extra white space.

Or how can I amend this issue and make the page flow onto 2 pages even if the element ends up getting split in 2.

Attempt without page breaking:

const drawing = awaitdrawDOM(this.elm.nativeElement, {
      paperSize: 'a4',
      scale: 0.45,
    });

const myData = await exportPDF(drawing);

saveAs(myData, `test.pdf`);

<div #elm >
...content...
</div>

In the image of the pdf, the bottom of the grid is cut off, then I did the same with text and the text template isnt even visible and doesnt flow onto the next page.

Attempt with Page breaking:

const drawing = awaitdrawDOM(this.elm.nativeElement, {
      paperSize: 'a4',
      scale: 0.45, 
      forcePageBreak: '.page-break',
    });

const myData = await exportPDF(drawing);

saveAs(myData, `test.pdf`);

Child Component with page breaking:

<div class=".page-break"></div>
<div class="h-full flex flex-col">
...content...
</div>

Grid component with page breaking

<div class="h-full flex flex-col page-break">

<ngContainer... *gridTemplate></ng-container>

...content...
</div>

<ngTemplate  #gridTemplate>
...Kendo Grid...
</ngTemplate>

Drawer

Drawing

PDF Export

updated question on 04 Dec 2023

1 answer

376 views

Is there a property to determine when a textbox or textarea is focused?

I'm placing a component inside textbox and textarea suffixes:

<kendo-textarea #noteInput
    [(ngModel)]="newNote"
    [maxlength]="MAX_LENGTH_NOTE"
  >
    <kendo-textarea-suffix>      
      <ci-counter
        [value]="noteInput.value"
        [max]="noteInput.maxlength"
        [displayAtThreshold]="100"
      ></ci-counter>
    </kendo-textarea-suffix>
</kendo-textarea>

That works fine, but I'd like to remove them when the input isn't being edited. Is there any property or other way to know this through the template? Such as:

<kendo-textarea #noteInput
    [(ngModel)]="newNote"
    [maxlength]="MAX_LENGTH_NOTE"
  >
    <kendo-textarea-suffix>      
      <ci-counter *ngIf="noteInput.???"
        [value]="noteInput.value"
        [max]="noteInput.maxlength"
        [displayAtThreshold]="100"
      ></ci-counter>
    </kendo-textarea-suffix>
</kendo-textarea>

TextArea

TextBox

answered on 01 Dec 2023