Search code examples
angularjsangular-ui-grid

angular ui-grid cell template issue


I am using angular ui-grid currently I am having all rows in which qty cell is editable by double clicking on it. I need to place input type text there and always editable, I am trying like this but when i I am submitting I am not getting values of this for post processes

 vm.gridColumnDefs = [
    {field: 'barcode', name: 'Barcode'},
    {field: 'productname', name: 'Product Name'},
    {field: 'categoryname', name: 'Category Name'},
    {field: 'suppliername', name: 'Supplier Name'},
    {field: 'sticks', name: 'sticks'},
    //{field: 'qty', name: 'quantity', enableCellEdit: true} // this is working fine
    {field: 'qty', name: 'quantity', type:'text', editableCellTemplate: '<input type="text" ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" />'} 

  ];

Solution

  • In ui-grid you will get field value in row.entity.fieldname in your case you will get qty field value in row.entity.qty. so,bind model like below code, you will get value of qty too. to show input box always use cellTemplate instead of editableCellTemplate.

    vm.gridColumnDefs = [
        {field: 'barcode', name: 'Barcode'},
        {field: 'productname', name: 'Product Name'},
        {field: 'categoryname', name: 'Category Name'},
        {field: 'suppliername', name: 'Supplier Name'},
        {field: 'sticks', name: 'sticks'},
        //{field: 'qty', name: 'quantity', enableCellEdit: true} // this is working fine
        {field: 'qty', name: 'quantity', type:'text',enableCellEdit: true, cellTemplate: '<input type="text" ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="row.entity.qty" />'} 
    
      ];