1. Home
  2. Forum
  3. Vue
  4. Datagrid, Inline edit with autocomplete and update row with autoselect selected value

Datagrid, Inline edit with autocomplete and update row with autoselect selected value

Hi team,

I am working on a requirement where I want to use your vue grid components.

  1. Need to load empty row with two autocomplete inputs in columns  (cursor in first column), autocomplete fetch results from API call. I don't want to use toolbar
  2. Row data must be updated after user selecting an item from autocomplete
  3. How to pass row data to custom template and bind updated value (ItemPriceEditTemplate) back to row data
Now I am able to place autocomplete component in column but unable to bind its value to the gird. I am also supposed to update the whole row with autocomplete's selected value.


Grid HTML
<ejs-grid :dataSource="dataGrid" :editSettings="editSettings" :toolbar="toolbar">
          <e-columns>
            <e-column
              field="ItemCode"
              headerText="Item Code"
              textAlign="center"
              :editTemplate="itemCodeTemplate"
            ></e-column>
            <e-column field="ItemDescription" headerText="Item Description"></e-column>
            <e-column field="subCode" headerText="subCode"></e-column>
            <e-column field="BaseItemQuantity" headerText="BaseItemQuantity"></e-column>
            <e-column
              field="ItemPrice"
              headerText="ItemPrice"
              :editTemplate="ItemPriceEditTemplate"
              :template="ItemPriceViewTemplate"
            ></e-column>
            <e-column field="ItemExciseTax" headerText="ItemExciseTax"></e-column>
            <e-column field="LineNetAmount" headerText="LineNetAmount"></e-column>
          </e-columns>
        </ejs-grid>

Script Part
import Vue from 'vue'
import api from '../service'
import { AutoCompletePlugin } from '@syncfusion/ej2-vue-dropdowns'
import { GridPlugin, Edit, Toolbar } from '@syncfusion/ej2-vue-grids'
Vue.use(GridPlugin)
Vue.use(AutoCompletePlugin)
export default {
  name: 'SalesOrderFormV1',
  provide: {
    grid: [Edit, Toolbar]
  },
  data() {
    return {
      // grid properties starts here
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
      editSettings: { allowEditing: true, allowAdding: true, newRowPosition: 'Bottom' },
      ItemPriceEditTemplate: function() {
        return {
          template: Vue.component('columnTemplate', {
            template: `
          <input class="tr_text_field text-right left" id="1_ItemQuantity1" maxlength="8" v-model="data.ItemPrice">
          <span class="left"><span class="inline-uom " id="1_UOM1">{{ data.BaseUOM }}</span><span class="tr_text_field ">{{ data.BaseItemQuantity }}</span></span>
          `
          })
        }
      },
      ItemPriceViewTemplate: function() {
        return {
          template: Vue.component('columnTemplate', {
            template: `
            <p> {{ data.ItemPrice }} </p>
            <span class="left"><span class="inline-uom" id="1_UOM1">{{ data.BaseUOM }}</span><span class="tr_text_field ">{{ data.BaseItemQuantity }}</span></span>
          `
          })
        }
      },
      itemCodeTemplate: function() {
        return {
          template: Vue.component('itemcodeTemplate', {
            template: `<ejs-autocomplete
                :dataSource="itemCodeOptions"
                :filtering="getProducts"
                @change="changeSelectedProduct"
                ref="sideBarSearchInline"
                :value="data.ItemCode"
              ></ejs-autocomplete>`,
            data() {
              return {
                data: {},
                itemCodeOptions: []
              }
            },
            methods: {
              changeSelectedProduct(event) {
                //  need to update bind autocomplete value and update whole row
                console.log('autocomplete value', event)
              },
              getProducts(searchText) {
                console.log(searchText, 'autocomplete')
                if (!searchText || searchText.text === '' || !searchText.text) {
                  return
                }
                this.itemCodeOptions = []
                const client = api()
                client
                  .get('/products', {
                    params: {
                      requesttype: 16,
                      CustomerID: this.selectedOutlet, // need to pass value from main component to custom template
                      WarehouseID: this.selectedWarehouse, // need to pass value from main component to custom template
                      DivisionID: this.selectedDivision // need to pass value from main component to custom template
                    }
                  })
                  .then(response => {
                    this.itemCodeOptions = response.data
                  })
              }
            }
          })
        }
      },
      // grid properties ends here
dataGrid: [],
      rowData: { // each row has these fields
        sr: '',
        ItemCode: '',
        ItemDescription: '',
        subCode: '',
        UOM0: '',
        UOM1: '',
        UOM2: '',
        UOM3: '',
        UOM4: '',
        ItemQuantity1: '',
        ItemQuantity2: '',
        ItemQuantity3: '',
        ItemQuantity4: '',
        ItemQuantity5: '',
        BaseUOM: '',
        Conversion1: '',
        Conversion2: '',
        Conversion3: '',
        Conversion4: '',
        LineNetAmount: '',
        SubHierarchyCode: '',
        BUOMConversion: '',
        ItemQuantity: '',
        MRP: '',
        ItemPrice: '',
        Discount: '',
        tax: [],
        free: '',
        amount: '',
        ItemNumber: null,
        PrincipalPrice: 0,
        SalesPrice: 0,
        SubDTMargin: 0,
        ItemExciseTax: null,
        BaseItemQuantity: '',
        CESS: null,
        CESSPerc: null,
        CGST: null,
        CGSTPerc: null,
        FreeGood: '',
        IGST: null,
        IGSTPerc: null,
        IsFreeGood: null,
        ItemTotalPromotion: null,
        PromotionDiscount: null,
        SGST: null,
        SGSTPerc: null,
        SalesLineID: null,
        SalesTax: null,
        StorageBinID: null,
        TaxAttributes: '',
        UTGST: null,
        UTGSTPerc: null,
        UnitsOfMeasure: '',
        VAT: null,
        VATPerc: null
      } }
},



Please help me with this. Thanks in advance

Regards,
Sandeep G


3 Replies
SK Sujith Kumar Rajkumar Syncfusion Team September 3, 2021 12:05 PM UTC

Hi Sandeep, 
 
Greetings from Syncfusion support. 
 
Based on the query we suspect that your requirement is to update the selected auto complete(rendered using edit template) value in the corresponding Grid row cell. If so, we would like to let you know that the updated cell values will be retrieved from the edit form based on its control name which matches with the Grid’s data field name. The default rendered edit control elements will have the column field as its name. Now since you are rendering auto complete as a custom edit control using edit template, you need to set the corresponding column field name as the edit control’s ‘name/id’ in order for it to be fetched and updated in Grid on save. 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
 
If we misunderstood your query or if you require any further assistance, then please get back to us. 
 
Regards, 
Sujith R  


SG Sandeep G September 6, 2021 11:34 AM UTC

Hi Sujith,

Thanks for you reply. I am able to render autocomplete component inside custom template. Can you help me with how to set select data from autocomplete component to datagrid.

<ejs-grid
          :dataSource="dataGrid"
          :editSettings="editSettings"
          :toolbar="toolbar"
          :dataSourceChanged="dataSourceChanged"
        >
          <e-columns>
            <e-column
              field="ItemCode"
              headerText="Item Code"
              textAlign="center"
              :editTemplate="itemCodeTemplate"
            ></e-column>
            <e-column field="ItemDescription" headerText="Item Description"></e-column>
            <e-column field="subCode" headerText="subCode"></e-column>
            <e-column field="BaseItemQuantity" headerText="BaseItemQuantity"></e-column>
            <e-column
              field="ItemPrice"
              headerText="ItemPrice"
              :editTemplate="ItemPriceEditTemplate"
              :template="ItemPriceViewTemplate"
            ></e-column>
            <e-column field="ItemExciseTax" headerText="ItemExciseTax"></e-column>
            <e-column field="LineNetAmount" headerText="LineNetAmount"></e-column>
          </e-columns>
        </ejs-grid>


Template: added v-model and id as suggested

      itemCodeTemplate: function() {
        return {
          template: Vue.component('itemcodeTemplate', {
            template: `<ejs-autocomplete
                :dataSource="itemCodeOptions"
                :filtering="getProducts"
                @change="changeSelectedProduct"
                ref="sideBarSearchInline"
                v-model="data.ItemCode"
                id='ItemCode'
              ></ejs-autocomplete>`,
            data() {
              return {
                data: {},
                itemCodeOptions: []
              }
            },



In the below image, using example provided by you I have updated first row values but unable to see updated values in vue-dev tools. Vue dev tools still show old values. How to update values in :datasource="gridData" variable?



Regards,
Sandeep G


SK Sujith Kumar Rajkumar Syncfusion Team September 7, 2021 09:22 AM UTC

Hi Sandeep, 
 
Based on the query we could understand that your requirement is to get the updated data source from the Grid. You can achieve it by retrieving the same from the Grid’s dataSource property as demonstrated in the below code snippet, 
 
onClick: function() { 
    console.log('Grid data - ' + JSON.stringify(this.$refs.grid.ej2Instances.dataSource)); 
} 
 
With this you will be able to retrieve the updated data source as shown in the below image, 
 
 
 
Please find the below updated sample prepared based on this for your reference, 
 
 
If we misunderstood your query or if you require any further assistance, then please get back to us. 
 
Regards, 
Sujith R 


Loader.
Up arrow icon