Telerik Forums
Kendo UI for Angular Forum
1 answer
547 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
241 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
197 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
967 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
326 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
207 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.skipthis.state.skip + this.pageSize),
      total: this.tableDataOpen.length,
    };
    this.gridDataAccepted = {
      data: this.tableDataAccepted.slice(this.state.skipthis.state.skip + this.pageSize),
      total: this.tableDataAccepted.length,
    };
    this.gridDataSubmitted = {
      data: this.tableDataSubmitted.slice(this.state.skipthis.state.skip + this.pageSize),
      total: this.tableDataSubmitted.length,
    };
    this.gridDataSubmissionAccepted = {
      data: this.tableDataSubmissionAccepted.slice(this.state.skipthis.state.skip + this.pageSize),
      total: this.tableDataSubmissionAccepted.length,
    };
    this.gridDataRejected = {
      data: this.tableDataRejected.slice(this.state.skipthis.state.skip + this.pageSize),
      total: this.tableDataRejected.length,
    };
    this.gridDataCancelled = {
      data: this.tableDataCancelled.slice(this.state.skipthis.state.skip + this.pageSize),
      total: this.tableDataCancelled.length,
    };
    this.loaderVisible = false;
  }

 

Martin Bechev
Telerik team
 answered on 19 Nov 2021
1 answer
181 views

Hi,

We use editable grids with multiple selection that sometimes have a page size of 500 or larger. In this case, when selecting another row when one or more rows are already selected, it takes few seconds to execute the operation. Is there anything that can be done to make this work faster?

Thanks,

Iuliana

Martin Bechev
Telerik team
 updated answer on 19 Nov 2021
1 answer
150 views

hello,

I have been searching myself silly on how to change just 1 label in an axis.I have searched for hours on how to do this, but can not find it. 

For instance : I have a x-axis that has every month of the year. But I want to change the color of the current month. 

As far as i can tell, I have to do something with the  axisLabelVisualArgs, but for the life of me, I can't figure out how I can change a text's color dependant on a condition.

This is the result I want to get :

Dimiter Topalov
Telerik team
 answered on 18 Nov 2021
1 answer
188 views

Hi,

When a user clicks a cell in the grid, is there any way to get the <td> of clicked cell in order to modify the styling (for example, add a solid border) as a way of highlighting the clicked cell? I would like the cell to remain highlighted until I programmatically clear the highlighting, so that I can highlight more than one cell. Please note this has nothing to do with editing.

I'd appreciate any pointers. Thanks in advance.

Alvin

Dimiter Topalov
Telerik team
 answered on 17 Nov 2021
1 answer
220 views

Hi

 

I am trying to populate Kendo Tile Layout inside Kendo Tabstrip but seems there is a bug when I drag the item. The position of selected tile is broken initially

 

When I click the red circle area to drag, the tile is moving to some strange place(position where you see 'Page Views' tile). This does not happen when I populate tile layout without trabstrip.

 

Any idea how to resolve this? I upgraded Kendo Angular lib to the latest.

* Code is attached.

 

Kind regards

David

Dimiter Topalov
Telerik team
 answered on 17 Nov 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?