Inline Editing For Angular

gunseli

Hi,

I am using a datatable in Angular as shown below. I want to implement inline editing for the **Description **field. However, I couldn't figure out how to do it for Angular.

this.dtOptions = {
      ajax: async (dataTablesParameters: any, callback) => {
        // Servisten veri alın
        try {
          const response = this.Inputrows;
          console.log(response);
          // DataTables için uygun formata dönüştürün ve geri çağırın
          callback({
            data: response,
            // Diğer DataTables seçeneklerini buraya ekleyebilirsiniz
          });
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      },
      columns: [
        { title: 'Nr', data: 'number' },
        { title: 'itemCode', data: 'itemCode' },
        { title: 'description', data: 'description' },
        { title: 'unit', data: 'unit' },
        { title: 'qtty', data: 'qtty' },
        { title: 'price', data: 'price' },
        { title: 'altUnit', data: 'altUnit' },
        { title: 'aQtty', data: 'altQtty' },
        { title: 'aPrice', data: 'altPrice' },
        { title: 'remark', data: 'remark' },
        { title: 'itemNote', data: 'itemNote' },
        { title: 'whI.', data: 'warehouseInfo' },
        { title: 'S.Name', data: 'selectedSupplierName' },
        { title: 'C.Price', data: 'selectedSupplierCalculatedPrice' },
        { title: 'S.Remark', data: 'selectedSupplierRemark' },
        { title: 'Cost', data: 'cost',className:'editable'},
        {
          title: '',
          data: '',
          createdCell: (cell: any, cellData: any, rowData: any, rowIndex: any, colIndex: any) => {
            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(TechnicalSupplierAndWarehouseDataComponent);
            const componentRef = componentFactory.create(this.injector);
            componentRef.instance.inputrow = rowData;
            componentRef.instance.inputRows = this.Inputrows;
            componentRef.instance.inputIsOrderStage = false;
            const componentView = componentRef.hostView;
            this.renderer.appendChild(cell, (componentView as EmbeddedViewRef<any>).rootNodes[0]);
          }
        }
      ],
    rowCallback: (row: Node, data: any[] | Object, index: number) => {
        const self = this;
        // Unbind first in order to avoid any duplicate handler
        // (see https://github.com/l-lin/angular-datatables/issues/87)
        // Note: In newer jQuery v3 versions, unbind and bind are
        // deprecated in favor of off and on
        $('td', row).off('click');
        $('td', row).on('click', () => {
          console.log(data);
        });
        return row;
      },
      paging: false,
      language: {
        info: '',
        zeroRecords: '' // Hiçbir kayıt bulunamadı mesajını kapatır
      }

    };

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

Possibly you could incorporate the use of the Editor into your Angular Datatables project. See this thread. You will probably need to refer to the docs and support for the Angular Datatables library you are using to learn how to incorporate the Editor. See the inline editing examples.

Otherwise if you want to create your own then you would use APIs like cell().data() to retrieve and update the cells. Full API docs can be found here. Let us know if you have specific questions about using the API.

Kevin