Link on the row

[Kylian]

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]

Hi Kylian,

There are a couple of approaches to achieve the desired functionality:

1) Use the Grid cell templates to provide the desired links with the respective content - could be anchor tags or other elements with custom click handlers that navigate to a specified address on click, e.g.:

https://stackblitz.com/edit/angular-381shk?file=app%2Fapp.component.ts

2) Handle the Grid cellClick event and navigate to the desired page programmatically, e.g.:

https://stackblitz.com/edit/angular-xbzmnp?file=app%2Fapp.component.ts

On a side note, the Grid ExcelComponent configuration is supposed to be placed between the <kendo-grid> tags, not to be nested in the ToolbarTemplate:

<kendo-grid [kendoGridBinding]="products" [height]="400" [group]="group">
      <ng-template kendoGridToolbarTemplate>
        <button type="button" kendoGridExcelCommand icon="file-excel">
          Export to Excel
        </button>
      </ng-template>
      <kendo-grid-column
        field="ProductID" ... // column options
      >
      </kendo-grid-column>... // other columns
  
      <kendo-grid-excel fileName="Products.xlsx"></kendo-grid-excel>
    </kendo-grid>

https://www.telerik.com/kendo-angular-ui-develop/components/grid/export/excel-export/

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik