Telerik Forums
Kendo UI for Angular Forum
1 answer
164 views
Hello,

I'm currently looking into Kendo-UI and found information that Telerik provides a .NET abstraction layer for it's UI components to be used in Web Tests.

https://www.telerik.com/blogs/automated-testing-of-kendo-ui-made-easy


For instance:
using Telerik.TestingFramework.Controls.KendoUI.Angular;
using Telerik.TestingFramework.Controls.KendoUI.Angular.Grid;
KendoAngularGrid grid = Manager.ActiveBrowser.Frames[0].Find.AllByTagName<KendoAngularGrid>("kendo-grid").FirstOrDefault();

 

Now, for my question:
Is the c# library that provides this abstraction layer (Telerik.TestingFramework.Controls.KendoUI.Angular) also available as a NuGet package and if so, where can I find them? This would be important when setting up dependencies and controlling the build chain in a modern setup.

Thanks, Michael

Elena
Telerik team
 answered on 29 Nov 2021
1 answer
406 views

Hi,

I have the problem that my component styles are not assigned to the kendo grid column.


Component Html-Snippet:
<kendo-grid-column field="displayname" title="DisplayName"  [class]="'isTrainedColumn'"> </kendo-grid-column>

Component SCSS-Style Snippet:
.isTrainedColumn {
    text-align: right;
    background-color: red;
}

Generated HTML-Code:

<style>
.isTrainedColumn[_ngcontent-ndt-c454] {
  text-align: right;
  background-color: red;
}
</style>

Selector is only set at grid level and template level
<kendo-grid _ngcontent-ndt-c454="" ...>

But missing on the TD-Tag
Is this an issue or a missconfiguration on my side?
Silviya
Telerik team
 answered on 29 Nov 2021
1 answer
342 views

Hello,

Is there a way to change table/cells width in KendoEditor other than typing spaces or editing HTML source directly ?

Ideally with a mouse dragging, similar to what TinyMCE Editor offers.

Thank you,

--

Leonid.

Martin Bechev
Telerik team
 answered on 29 Nov 2021
0 answers
317 views

Hello Team,

I am using line type stock chart for multiple series where I have dates like: "01-Jan-2021", "04-Jan-2021" and so on. I am using new Date() to parse the dates to Kendo acceptable format. Chart is rendering but dates are wrong on the X axis labels as well as tooltip. Data set contains multiple attributes along with date starting from "01-Jan-2021" but in the chart it is starting from "27-Dec-2020" that is incorrect and it is happening for all next data points. All data points showing incorrect date. I have tried to change date format by using getTime() method (referring Kendo API Data) but no luck. When I change the date range by using navigator it shows me correct start and end date in information popup which appears for few seconds but x axis labels are incorrect.

Could you please help me to understand what I am doing wrong here.

Thanks in advance.

 

Regards,

Deepesh

Deepesh
Top achievements
Rank 1
Iron
 asked on 26 Nov 2021
1 answer
568 views

Hi, i want to make a link on the row, when the user see the grid he can click on the row wich is a link.

Thank you

 

<divclass="grid-collaborateur">

    <!-- Création du bloc Grid de Kendo qui encadre tous le contenu avec ses paramètres -->
    <kendo-grid
        [height]="500"
        [kendoGridBinding]="collaborateurs"
        [resizable]="true"
        [filterable]="true"
        [sortable]="true"
        [pageable]=true
        [pageSize]="10">
        <!-- Début Excel boutton -->
        <ng-template kendoGridToolbarTemplate>
            <button kendoGridExcelCommand icon="file-excel" class="excel-export">Exporter sur Excel</button>
            <kendo-grid-excel fileName="ListeCollaborateur.xlsx">
                <!-- Choix des colonnes export pour excel (la colonne action n'est pas présente ci-dessous car ne doit pas être présente dans le fichier excel) -->
                <kendo-excelexport-column field="matricule" title="Matricule">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="nom" title="Nom">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="prenom" title="Prénom">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="dateDebut" title="Date Début">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="dateFin" title="Date Fin">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="typeEmploye" title="Type Collaborateur">
                </kendo-excelexport-column>
                <kendo-excelexport-column field="section" title="Section Collaborateur">
                </kendo-excelexport-column>
            </kendo-grid-excel>
        </ng-template>
        <!-- Fin excel boutton -->
        <!-- Début création des colonnes du Grid -->
        <!-- Création de la colonne Matricule dans le tableau -->
        <kendo-grid-column field="matricule" title="Matricule">
            <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                <!-- Modification du filtre par défault par un filtre String -->
                <kendo-grid-string-filter-cell
                  [showOperators]="false"
                  [column]="column"
                  [filter]="filter">
                </kendo-grid-string-filter-cell>
              </ng-template>
        </kendo-grid-column>
        <!-- Création de la colonne Nom dans le tableau -->
        <kendo-grid-column field="nom" title="Nom">
            <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                <!-- Modification du filtre par défault par un filtre String -->
                <kendo-grid-string-filter-cell
                  [showOperators]="false"
                  [column]="column"
                  [filter]="filter">
                </kendo-grid-string-filter-cell>
              </ng-template>
        </kendo-grid-column>
        <!-- Création de la colonne Prénom dans le tableau -->
        <kendo-grid-column field="prenom" title="Prénom">
            <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                <!-- Modification du filtre par défault par un filtre String -->
                <kendo-grid-string-filter-cell
                  [showOperators]="false"
                  [column]="column"
                  [filter]="filter">
                </kendo-grid-string-filter-cell>
              </ng-template>
        </kendo-grid-column>
        <!-- Création de la colonne Date Début dans le tableau -->
        <kendo-grid-column field="dateDebut" title="Date Début">
            <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                <!-- Modification du filtre par défault par un filtre Date -->
                <kendo-grid-date-filter-cell
                    [showOperators]="false"
                    [column]="column"
                    [filter]="filter">
                </kendo-grid-date-filter-cell>
            </ng-template>
        </kendo-grid-column>
        <!-- Création de la colonne Date Fin dans le tableau -->
        <kendo-grid-column field="dateFin" title="Date Fin">
            <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                <!-- Modification du filtre par défault par un filtre Date -->
                <kendo-grid-date-filter-cell
                    [showOperators]="false"
                    [column]="column"
                    [filter]="filter">
                </kendo-grid-date-filter-cell>
            </ng-template>
        </kendo-grid-column>
        <!-- Création de la colonne Type Collaborateur dans le tableau -->
        <kendo-grid-column field="typeEmploye" title="Type Collaborateur">
            <!-- Pas de modification du filtre, version défault -->
        </kendo-grid-column>
        <!-- Création de la colonne Section dans le tableau -->
        <kendo-grid-column field="section" title="Section">
            <!-- Pas de modification du filtre, version défault -->
        </kendo-grid-column>
       
        <!-- Création de la colonne Actions dans le tableau -->
        <kendo-grid-column field="Modifier" title="Actions">
            <!-- Suppression du filtre pour cette colonne -->
            <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
            </ng-template>
            <!-- Création d'un bouton Modifier -->
            <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                <!--  Appel du bouton modifier collaborateur-->
              <button-modifier-collaborateur></button-modifier-collaborateur>
            </ng-template>
        </kendo-grid-column>
        <!-- Fin création des colonnes du Grid -->
        <!-- Modification du text du pager -->
        <kendo-grid-messages [pagerOf]="'sur'" [pagerItems]="'collaborateurs'">
        </kendo-grid-messages>
    </kendo-grid>
</div>
Dimiter Topalov
Telerik team
 answered on 25 Nov 2021
1 answer
268 views

Hi,

I was wondering if it is possible to default the AM/PM designator programmatically, without having to set an actual time value to the time picker?

The min property does work, however it does not seem to synchronise with the AM/PM designator on the actual input field.

For example, if I've set the min to be 1:00PM, then the list actually does not have the AM available - which is correct. However, the input field still has "hh:mm am" displaying.

I suppose one other way could be to change the dayPeriod placeholder text from AM to PM, if that is at all possible using the currently existing API.

Martin Bechev
Telerik team
 answered on 23 Nov 2021
1 answer
208 views

Hi,

 

Could i use Kendo component with RxJs7 and Typescript 4.4 in Angular13 ?

 

Regards

Dimiter Topalov
Telerik team
 answered on 23 Nov 2021
1 answer
995 views

I am using autoFocusedElement to set focus to the first input on a dialog as described at https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/initial-focus/.  When that input is wrapped in a floating label, it appears to work, but it produces the following error in the console:  

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'k-state-focused: false'. Current value: 'k-state-focused: true'.

Am I doing something wrong, or is there anything I can do to work around this?  Here is the modified template that I used to reproduce the error:


        <div class="example-wrapper">
            <button kendoButton *ngIf="!opened" (click)="open()">Open dialog</button>
            <kendo-dialog *ngIf="opened"
                autoFocusedElement="#username"
                title="Please confirm"
                (close)="close('cancel')"
                [minWidth]="250"
                [width]="450"
            >
                <div style="margin: 30px; text-align: center;">
                    <p>Enter your username below</p>

                    <kendo-floatinglabel text="User Name">
                      <input kendoTextBox id="username" placeholder="Your username" style="width: 200px"/>
                    </kendo-floatinglabel>
                </div>
                <kendo-dialog-actions>
                    <button kendoButton (click)="close('no')">No</button>
                    <button kendoButton (click)="close('yes')" primary="true">Yes</button>
                </kendo-dialog-actions>
            </kendo-dialog>
        </div>

Martin Bechev
Telerik team
 answered on 22 Nov 2021
1 answer
343 views

Hi Team,

I am trying to use shared tooltip in stock chart but it is not working as expected. However it is working fine with line chart. Can anyone help me on this?

 

Thanks in advance.

Martin Bechev
Telerik team
 answered on 22 Nov 2021
1 answer
228 views

I'm having six tabs and in all six tabs, I'm having a kendo-grid table. when I load the component it's becoming too slow(40 seconds) when working with 500 records. and I'm loading data from API(Backend) and data comes from the backend very quickly(1 second) and pagination is enabled.

I have even implemented virtual scrolling but didn't help me.

<kendo-grid [data]="gridDataOpen" [loading]="loaderVisible" [filterable]="true" [filter]="state.filter" 
                 scrollable="virtual" [rowHeight]="35" [sortable]="true" [sort]="state.sort" [pageSize]="state.take"    

[skip]="state.skip"[height]="700"(dataStateChange)="dataStateChange($event)"(pageChange)="pageChange($event)">

pageChange(e) {
    this.loaderVisible = true;
    this.state.skip = e.skip;
    this.loadItems(e);

}

public pageSize = 100;
  loadItems(state): void {
    this.gridDataOpen = {
      data: this.tableDataOpen.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataOpen.length,
    };
    this.gridDataAccepted = {
      data: this.tableDataAccepted.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataAccepted.length,
    };
    this.gridDataSubmitted = {
      data: this.tableDataSubmitted.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataSubmitted.length,
    };
    this.gridDataSubmissionAccepted = {
      data: this.tableDataSubmissionAccepted.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataSubmissionAccepted.length,
    };
    this.gridDataRejected = {
      data: this.tableDataRejected.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataRejected.length,
    };
    this.gridDataCancelled = {
      data: this.tableDataCancelled.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataCancelled.length,
    };
    this.loaderVisible = false;
  }

 

Martin Bechev
Telerik team
 answered on 19 Nov 2021
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?