es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Kendo UI para Angular: Tooltip en una celda de cuadrícula con contenido externo.

12 Jun, 2023 Programación

Aquí se describe cómo poner un tooltip en una celda de Kendo Grid. Sin embargo, solo se trata de un tooltip que contiene información del elemento anchor, por ejemplo, su atributo “title”. Pero, ¿cuál es la mejor manera de integrar información externa no disponible en el anchor? En mi caso, quiero tener un tooltip que muestre el nombre del último editor del ítem del grid cuando me coloco sobre una celda en particular. El nombre no es parte del contenido de la celda. Viene adicionalmente desde el backend para cada fila del grid. ¿Cómo puedo acceder a ello para el tooltip?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar información externa en un tooltip en una celda de una cuadrícula de Kendo, puedes usar la kendoTooltipDirective y el evento show.

    Primero, debes agregar kendoTooltipDirective a la celda donde deseas mostrar el tooltip.

    Luego, en tu componente, crea una función que obtenga el nombre del último editor para la fila correspondiente a la celda.

    En el método del ciclo de vida ngAfterViewInit(), adjunta el evento show a la kendoTooltipDirective de la celda. En el manejador del evento show, llama a la función que creaste para obtener el nombre del último editor y úsalo para establecer el contenido del tooltip.

    Aquí tienes un ejemplo:

    <!-- language: lang-html -->
<kendo-grid [height]="200" [data]="myModel">
  <kendo-grid-column field="one" title="First column" width="90">
  </kendo-grid-column>
  <kendo-grid-column field="two" title="Second column" width="60">
  </kendo-grid-column>
  <kendo-grid-column field="three" title="Third column" width="120">
    <ng-template kendogridcelltemplate="" let-dataitem="">
      <span kendotooltip="" kendotooltipdirective="" #tooltip="kendoTooltip">{{dataItem.three}}</span>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

    import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { TooltipComponent } from '@progress/kendo-angular-tooltip';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent implements AfterViewInit {
  @ViewChild('tooltip', { static: true }) public tooltip: TooltipComponent;

  constructor(private myService: MyService) {}

  ngAfterViewInit(): void {
    this.tooltip.show.subscribe((e) => {
      const dataItem = e.target.context.$implicit;
      this.getLastEditorName(dataItem).then((name) => {
        this.tooltip.content = `${name}`;
      });
    });
  }

  private getLastEditorName(dataItem: any): Promise<string> {
    // Llama a tu API del backend para obtener el nombre del último editor para el elemento de datos especificado
    return this.myService.getLastEditorName(dataItem.id);
  }
}

    En este ejemplo, usamos ViewChild para obtener una referencia a kendoTooltipDirective de la celda, para que podamos adjuntar el evento show a ella en el método ngAfterViewInit().

    Dentro del manejador del evento show, usamos la propiedad dataItem del objetivo del evento para obtener el elemento de datos que corresponde a la celda. Luego llamamos a getLastEditorName() para obtener el nombre del último editor para el elemento de datos desde el backend y lo usamos para establecer el contenido del tooltip.

    Ten en cuenta que getLastEditorName() es un método que debes implementar en tu servicio, para llamar a tu API del backend y obtener el nombre del último editor para el elemento de datos especificado.

Comments are closed.