0

Estoy Trabajando con ag-grid-angular tengo entendido que para para hacer editable una celda, se hace el llamado de el evento cellEditingStarted con algo como (cellEditingStarted)="function($event)" dentro de los tags ag-grid-angular-material, dejo un ejemplo.

      <div class="full-container">
    <ag-grid-angular style="width: 100%; height: 900px;" class="full-grid ag-theme-material" [rowData]="rowData" [columnDefs]="columnDefs" [singleClickEdit]="true" (cellEditingStarted)="onRowClicked($event)">
    </ag-grid-angular>
  </div>

Otro Evento que me ayuda a hacer una celda editable con un solo click es [singleClickEdit]="true"

Sin embargo agregando todo eso, la celda no es editable.

En el controlador tengo lo siguiente:

 // Angular Core
 import { Component, Input, OnInit, ViewChild } from '@angular/core';

 // Forms
 import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatStepper } from "@angular/material/stepper";

 // Services
 import { CategoriesService } from "../../../services/form-wizard/categories/categories.service";
 import { TemplateService } from "../../../services/form-wizard/template/template.service";

 import { category } from '../interfaces/category';

 @Component({
   selector: 'app-form-wizard',
   templateUrl: './form-wizard.component.html',
   styleUrls: ['./form-wizard.component.css']
 })

 export class FormWizardComponent implements OnInit {

   @Input() model: string;
   @ViewChild('stepper') stepper: MatStepper;

   public isLinear = false;
   public firstFormGroup: FormGroup;
   public secondFormGroup: FormGroup;
   public categories: any;
   public categorySelected: string;
   public columnDefs: any[];
   public rowData: any[];
   public categoriesFModel: any;


   constructor(
     private _formBuilder: FormBuilder,
     private categoriesService: CategoriesService,
     private _templateS: TemplateService
   ) {
     this.categorySelected = null;
   }

   ngOnInit() {
     this.firstFormGroup = this._formBuilder.group({
       firstCtrl: ['', Validators.required]
     });
     this.secondFormGroup = this._formBuilder.group({
       secondCtrl: ['', Validators.required]
     });

     this.categoriesService.getCategories(this.model).subscribe(success => {
       this.categories = this.categoriesService.categoriesTransform(success);
     }, error => {
       console.log('error: ', error);
     });
     this.columnDefs = this.createHeaders();
   }

   /**
    * [receiveMessage description]
    * @param  selected [description]
    * @return          [description]
    */
   public receiveMessage = (selected: string) => {
     this.categorySelected = selected;

     let p = this.getIdFromCategory(this.categories, this.categorySelected);
     let id = this.categories[p].id;

     this.categoriesService.getCategoriesFromModel(this.model,           id).subscribe(success => {
       this.categoriesFModel = success;
       this.rowData = this.createRowData(this.categoriesFModel);
     }, error => {
       console.log('error: ', error);
     });

     this.stepper.next();
   }

   /**
    * [getIdFromCategory description]
    * @param  categories [description]
    * @param  selected   [description]
    * @return            [description]
    */
   public getIdFromCategory = (categories: any, selected: string) => {
     return this.categories.findIndex(x => x.name === selected);
   }

   /**
    * Function to create the headers of the ad-grid
    * @return [A array with the headers]
    */
   private createHeaders = () => {
     const columnDefs = [
       { headerName: "Name", field: "Field" },
       { headerName: "Required", field: "Required" },
       { headerName: "Label", field: "Label" },
       { headerName: "Hidden", field: "Hidden" },
       { headerName: "ACL", field: "ACL" }
     ];

     return columnDefs;
   }

   /**
    * Function to Create the rowData of categories of a Model
    * @return [Return a Array with the rowData]
    */
   private createRowData = (categoriesModel: any = null) => {
     var rowData: any = [];
     if (categoriesModel !== null) {
       for (var key in categoriesModel) {
         if (categoriesModel[key].hasOwnProperty('StandardName')) {
           rowData.push({
             Field: categoriesModel[key]['StandardName'],
             Required: true,
             Label: 'Hola',
             Hidden: true,
             ACL: 0
           });
         }
       }
     } else {
       console.log('Dont have Categories');
     }

     return rowData;
   }
   public onRowClicked = (event) => {
     console.log(event);
   }
 }

Una muestra de como se esta viendo la vista: introducir la descripción de la imagen aquí

Que estoy haciendo mal?

1 respuesta 1

0

Usando [singleClickEdit]="true" Me funciono, coloco la respuesta por si a alguien en el futuro tiene mi misma duda. Link: Documentacion Oficial

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.