Telerik Forums
Kendo UI for Angular Forum
1 answer
121 views

Hello kendo community,

I have issues with selection on groups in kendo grid. I am trying to use groups and selection with kendo grid and it seems like the selection event trigger does not work in groups, however the checkbox does not apper to be checked. Is there any other solution or is there a way to select multiple rows which are grouped?

Here is a stackblitz demo: https://stackblitz.com/edit/angular-ujcgdv

Hope there is a fix for this.

Best, Mike

Dimiter Topalov
Telerik team
 answered on 14 May 2019
1 answer
254 views

Looking for clarification of how to use the Angular Material Theme supplied with Kendo UI. 

Do I still need to include Bootstrap 4 for purposes of general layout. i.e. row / column / flex etc...  for non Kendo components.

Is Bootstrap the suggested framework to use with the Material theme.  Should it be Material.  It looks like the Material theme uses a base of the Default theme.  The default theme seems to be based on Bootstrap.

Svet
Telerik team
 answered on 13 May 2019
1 answer
563 views

Is it possible to add a divider/header within the data array?  

Something like.

Item1

-----------------

Header Title

Item2

Hetali
Telerik team
 answered on 10 May 2019
2 answers
2.6K+ views

Hi,

When opening a <kendo-dialog> the background is still scrolling.

The work around I found is to set the <body> with an overflow:hidden.

But how to automate this generally for all my modals?

Since this is a modal, I think the kendo-dialog should be disabling the body scrolling.

Any workaround to fix this?

Thanks.

 

Patrick
Top achievements
Rank 1
 answered on 08 May 2019
1 answer
205 views
Is there an example somewhere of using the selectBy so that the selectionChange event handler is passed a dataItem (or context.dataItem)? I have seen this capability alluded to in some articles, but I have not been able to find examples or get it to work for me. Thank you.
Dimiter Topalov
Telerik team
 answered on 08 May 2019
2 answers
481 views
I've got a scatter line chart that I want to add data item notes that will be built from fields in the data item.  Currently I'm able to use a template to format tooltips dynamically (see code below).  Is there a similar way of accomplishing this with notes?  The only samples I can see use the  noteTextField on the kendo-chart-series-item which implies adding an additional field on source data items, generating the content for each item in code, and not having the ability to format the contents.  I am I missing something?

  <kendo-chart-series-item-tooltip>
      <ng-template let-dataItem="dataItem">
          <span style="font-weight: bold">{{dataItem.productName}}</span> - Total Count
          <span style="font-weight: bold">{{dataItem.totalCount}}</span>
         <span style="font-weight: bold">{{dataItem.date | amDateFormat:'LL' }}</span>
    </ng-template><b
  </kendo-chart-series-item-tooltip>

Mike
Top achievements
Rank 1
 answered on 07 May 2019
1 answer
2.7K+ views

How could I change default color for a bar/column based on its value?

 

I was thinking that I could use "color" property of the kendo-chart-series-item (https://www.telerik.com/kendo-angular-ui/components/charts/api/SeriesItemComponent/)

"<kendo-chart-series-item type="column" [data]="data?.ColumnData?.slice(1)" axis="secondAxis" name="Packs" [color]="checkColor($point)">"

public checkColor(point) {
    console.log("Point:", point);
}

However when code runs "point" is undefined.

 

David
Top achievements
Rank 1
 answered on 06 May 2019
13 answers
2.0K+ views

Hello,

I am using PDF export for my grids as the typical way; i.e., having a button with kendoGridPDFCommand directive applied, and a  kendo-grid-pdf component inside the grid. This was working nicely with no problem. I had not tested Export To PDF for a while and now I see it is not working; when I press the button the grid is stuck in loading state (i.e., showing loading icon). 

The only thing (related to Export PDF) that has changed during this time is that kendo packages have been updated. So, my suspicion is that it has been broken because of some inconsistencies in kendo packages. Here is the list of kendo packages I am using:

01.+-- @progress/kendo-angular-buttons@4.3.3
02.+-- @progress/kendo-angular-dateinputs@3.5.4
03.+-- @progress/kendo-angular-dropdowns@3.4.2
04.+-- @progress/kendo-angular-excel-export@2.3.0
05.+-- @progress/kendo-angular-grid@3.14.0
06.+-- @progress/kendo-angular-inputs@4.2.1
07.+-- @progress/kendo-angular-intl@1.7.0
08.+-- @progress/kendo-angular-l10n@1.4.0
09.+-- @progress/kendo-angular-popup@2.5.0
10.+-- @progress/kendo-data-query@1.5.0
11.+-- @progress/kendo-drawing@1.5.8
12.+-- @progress/kendo-theme-bootstrap@3.3.1
13.+-- @progress/kendo-theme-default@3.5.1

 

Best regards,

Mojtaba

Daniel
Telerik team
 answered on 06 May 2019
2 answers
2.2K+ views

We have been working on a Angular 7 Kendo UI application and things are going well. The application compiles and runs fine.

We are now getting into Angular testing with the default Jasmine/Karma. First 'ng test' showed pages of issues. So I decided to start from scratch with a new Angular app and slowly copy over the functionality.

I modified the app.component.ts and its html which includes kendo-splitter and its kendo-splitter-pane

<kendo-splitter orientation="horizontal" kendoRippleContainer>
    <kendo-splitter-pane *ngIf="showNav && !hideNav" [collapsible]="false" [resizable]="false" size="180px">
        <div class="fordav-logo"></div>
        <kendo-panelbar [selectable]="true" [expandMode]="single">
            <kendo-panelbar-item *ngFor="let route of panelBarArray"
            ...... Removed for brevity
            >
                </kendo-panelbar-item>
            </kendo-panelbar-item>
        </kendo-panelbar>
    </kendo-splitter-pane>
    <kendo-splitter-pane>
        <kendo-splitter orientation="vertical">
            <kendo-splitter-pane *ngIf="showNav" [scrollable]="false" [collapsible]="false" [resizable]="false" size="52px">
                ...... Removed for brevity
            </kendo-splitter-pane>
            <kendo-splitter-pane>
                <router-outlet></router-outlet>
            </kendo-splitter-pane>
        </kendo-splitter>
    </kendo-splitter-pane>
</kendo-splitter>

 

The output of Karma v4.1.0 

Failed: Template parse errors:
Can't bind to 'collapsible' since it isn't a known property of 'kendo-splitter-pane'.
1. If 'kendo-splitter-pane' is an Angular component and it has 'collapsible' input, then verify that it is part of this module.
2. If 'kendo-splitter-pane' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("orientation="horizontal" kendoRippleContainer>
    <kendo-splitter-pane *ngIf="showNav && !hideNav" [ERROR ->][collapsible]="false" [resizable]="false" size="180px">
        <div class="fordav-logo"></div>
Can't bind to 'resizable' since it isn't a known property of 'kendo-splitter-pane'.
1. If 'kendo-splitter-pane' is an Angular component and it has 'resizable' input, then verify that it is part of this module.
2. If 'kendo-splitter-pane' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("l" kendoRippleContainer>
    <kendo-splitter-pane *ngIf="showNav && !hideNav" [collapsible]="false" [ERROR ->][resizable]="false" size="180px">
        <div class="fordav-logo"></div>
        <kendo-panelbar [se"): ng:///DynamicTestModule/AppComponent.html@1:75
Can't bind to 'selectable' since it isn't a known property of 'kendo-panelbar'.
1. If 'kendo-panelbar' is an Angular component and it has 'selectable' input, then verify that it is part of this module.
2. If 'kendo-panelbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("" [resizable]="false" size="180px">
        <div class="fordav-logo"></div>
        <kendo-panelbar [ERROR ->][selectable]="true" [expandMode]="single">
            <kendo-panelbar-item *ngFor="let route of pane"): ng:///DynamicTestModule/AppComponent.html@3:24
Can't bind to 'expandMode' since it isn't a known property of 'kendo-panelbar'.
1. If 'kendo-panelbar' is an Angular component and it has 'expandMode' input, then verify that it is part of this module.
2. If 'kendo-panelbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("" size="180px">
        <div class="fordav-logo"></div>
        <kendo-panelbar [selectable]="true" [ERROR ->][expandMode]="single">
            <kendo-panelbar-item *ngFor="let route of panelBarArray"
Can't bind to 'selected' since it isn't a known property of 'kendo-panelbar-item'.
1. If 'kendo-panelbar-item' is an Angular component and it has 'selected' input, then verify that it is part of this module.
2. If 'kendo-panelbar-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("id]="route.path"
            [title]="route.data.title ? route.data.title : route.path"
            [ERROR ->][selected]="'/' + route.path == selectedId"
            [routerLink]="route.children?null:route.path""): ng:///DynamicTestModule/AppComponent.html@7:12
Can't bind to 'expanded' since it isn't a known property of 'kendo-panelbar-item'.
1. If 'kendo-panelbar-item' is an Angular component and it has 'expanded' input, then verify that it is part of this module.
2. If 'kendo-panelbar-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("' + route.path == selectedId"
            [routerLink]="route.children?null:route.path"
            [ERROR ->][expanded]="'/' + route.path == selectedParent"
            (click)="itemClick(route.children?null:ro"): ng:///DynamicTestModule/AppComponent.html@9:12

And many more lines.

Do you have advice on proceeding with testing on components that include Kendo UI elements?

Do you have documentation on Angular testing for Kendo UI Angular usage?

Svet
Telerik team
 answered on 06 May 2019
1 answer
129 views

     I know there is an Angular Demo link here: https://www.telerik.com/kendo-angular-ui/components/

But is there a vnext demo site for Angular Components?  

https://www.telerik.com/kendo-angular-ui/components/vnext ?

Svet
Telerik team
 answered on 02 May 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?