Inline Editing For Angular

Inline Editing For Angular

gunseligunseli Posts: 14Questions: 8Answers: 0
edited March 16 in Free community support

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.

Answers

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944
    edited March 16

    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

Sign In or Register to comment.