Data doesn't changed using editTemplate.

[Minkyu]

Hello.

I'm new to use Vue UI components. 

I tried to implement `editTemplate` followed an example. (https://ej2.syncfusion.com/vue/documentation/grid/edit/?no-cache=1#cell-edit-template)

It shows well, however, it doesn't changes data source. I have no idea what was wrong.

Here's my source code. 

<template>

<CRow>

<CCol col="12">

<ejs-grid :dataSource="data"

:editSettings="editSettings" :toolbar="toolbar">

<e-columns>

<e-column field='OrderID' headerText='주문번호' textAlign="Left" :isPrimaryKey="true" width="100">e-column>

<e-column field='CustomerID' headerText='고객코드'>e-column>

<e-column field='Freight' headerText='운임료'

format='C2' editType='numericedit' width="200">e-column>

<e-column field='UseFlag' headerText='사용여부'

:editTemplate="editTemplate" width="200">e-column>

e-columns>

ejs-grid>

CCol>

CRow>

template>

<script>

import Vue from 'vue'

import { Toolbar, Edit } from '@syncfusion/ej2-vue-grids'

export default {

name: 'Notice',

provide: {

grid: [Toolbar, Edit]

},

data: function () {

return {

toolbar: [

'Add',

'Edit',

'Delete',

'Update',

'Cancel'

],

editSettings: { allowAdding: true, allowEditing: true, allowDeleting: true, mode: 'Normal'},

data: [

{ OrderID: 10248, CustomerID: 'VINET', Freight: 32.38, UseFlag: 'Y' },

{ OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61, UseFlag: 'Y' },

{ OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83, UseFlag: 'Y' },

{ OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34, UseFlag: 'Y' },

{ OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3, UseFlag: 'Y' },

{ OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17, UseFlag: 'Y' },

{ OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98, UseFlag: 'Y' },

{ OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33, UseFlag: 'Y' },

{ OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97, UseFlag: 'Y' }

]

}

},

methods: {

editTemplate () {

return {

template: Vue.component('eTemplate', {

template: `<input type="text" v-model="data.UseFlag">`,

data: function () {

return {data:{}}

}

})

}

}

}

}

script>

<style scoped>

style>

And I have another question.

When using editType as `dropdownedit`, how can I declare options in dropdown list?

Thanks for your help. 

Regards. 

[Tomasz Bednarek]

Hi Minkyu,

You probably need to add the id attribute to the input. Unfortunately that's something that cost me a few hours to figure out:

`<input id="UseFlag" type="text" v-model="data.UseFlag">`

Hope it helps.

Regards

Tomasz

[Minkyu]

Hi Minkyu,

You probably need to add the id attribute to the input. Unfortunately that's something that cost me a few hours to figure out:

`<input id="UseFlag" type="text" v-model="data.UseFlag">`

Hope it helps.

Regards

Tomasz

Thank you for your answer. However, unfortunately, it doesn't effect. 

[Balaji Sekar]

Hi Minkyu, 

 

Greetings from the syncfusion support. 

 

We have validated your query with provided the information and we can bind dropdownlist with custom option using cellEditTemplate feature in the EJ2 Grid. Please refer the below code example, sample for more information. 

[index.js] 

<ejs-grid> 

      <e-columns> 

       .    .    .    .  

       <e-column 

          field="ShipCity" 

          headerText="Ship City" 

          editType="dropdownedit" 

          :edit="dpParams" 

          :allowFiltering="false" 

          width="120" 

        ></e-column> 

 

      </e-columns> 

    </ejs-grid> 

 

import { DropDownList } from "@syncfusion/ej2-dropdowns"; 

 

export default { 

  data() { 

    return {        

      filterSettings: { type: "Menu" }, 

      dpParams: { 

        create: function() { 

          elem = document.createElement("input"); 

          return elem; 

        }, 

        read: () => { 

          return dropdownObj.value; 

        }, 

        destroy: () => { 

          dropdownObj.destroy(); 

        }, 

        write: args => { 

         dropdownObj = new DropDownList({ 

            dataSource: data, 

            value: args.rowData["ShipCity"], 

            fields: { text: "ShipCity", value: "ShipCity" } 

          }); 

          dropdownObj.appendTo(elem); 

        } 

      } 

    }; 

  }, 

  provide: { 

    grid: [Page, Filter, Toolbar, Edit] 

  }, 

 

 

 

 

Sample link: https://codesandbox.io/s/vue-template-3mgyh?file=/src/App.vue 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar. 

[Minkyu]

Dear Sekar.

Thank you for your answer. It was helpful. 

But I asked 2 things, first, my `editTemplate` dosen't work properly. second, How can I add options in DropdownEdit what you responded.

The first question that I stucked in a problem, here's my another source.

<ejs-grid height="250" width="100%" :dataSource="commodities"

:toolbar="toolbar" :toolbarClick="clickHandler"

:editSettings="editSettings"

@rowSelected="rowSelected" @rowDeselected="rowDeselected">

<e-columns>

<e-column field="cmdtyCode" width="130" headerText="상품코드" :isPrimary="true"></e-column>

<e-column field="cmdtyNm" width="250" headerText="상품명"></e-column>

<e-column field="cmdtyOrderCategory" width="100" headerText="카테고리"></e-column>

<e-column field="cmdtyTreatmentType" width="100" headerText="취급구분"

:template="ttTemplate"></e-column>

<e-column field="purchaseCmdtyAt" width="100" headerText="구매여부" :template="ynTemplate"></e-column>

<e-column field="saleCmdtyAt" width="100" headerText="판매여부" :template="ynTemplate"></e-column>

<e-column field="inventoryCmdtyAt" width="100" headerText="재고여부" :template="ynTemplate"></e-column>

<e-column field="useAt" width="100" headerText="사용여부" :template="useYnTemplate" :editTemplate="useYnEditTemplate"></e-column>

<e-column width="100" headerText="유통구분"></e-column>

</e-columns>

</ejs-grid>

const useYnEditTemplate = function () {

return {

template: Vue.component('eUseYnEditTemplate', {

template: `<select v-model="data.useAt" class="form-control">

<option value="Y">Use</option>

<option value="N">No use</option>

</select>`,

data: function () {

return {

}

},

mounted () {

console.log('data', this.$data.data)

console.log('data', this.data)

}

})

}

}

Some errors occurs following.

[Vue warn]: Property "data" must be accessed with "$data.data" because properties starting with "$" or "_" are not proxied in the Vue instance to prevent conflicts with Vue internals. See: https://vuejs.org/v2/api/#data

(found in <Root>)

     

And

vue.esm.js?a026:1897 TypeError: Cannot read property 'useAt' of undefined

    at Proxy.eval (eval at createFunction (vue.esm.js:NaN), <anonymous>:3:88)

    at Vue._render (vue.esm.js?a026:3557)

    at Vue.updateComponent (vue.esm.js?a026:4064)

    at Watcher.get (vue.esm.js?a026:4488)

    at new Watcher (vue.esm.js?a026:4477)

    at mountComponent (vue.esm.js?a026:4082)

    at Vue.$mount (vue.esm.js?a026:9063)

    at Vue.$mount (vue.esm.js?a026:11974)

    at eval (template.js?ce56:19)

    at eval (template-engine.js?d9ef:24)

So I tried to change `data.useAt` to `$data.data.useAt` then the cell edit template shows well, however, data doesn't applied to changed value.

I don't know what's the problem. I need your help again.

Regards. 

[Minkyu]

I solved one problem that `data` is undefined. 

I forgot declare `data` in data section. 

But, I couldn't solve another problem yet.

[Balaji Sekar]

Hi Minkyu, 

 

Query: How can I add options in DropdownEdit what you responded? 

Before proceeding further, we need to clarify that you want to adding new values in dropdown editing or search option from existing value of dropdownlist. 

For your reference, we have shared a demo sample for search option in dropdownlist 

https://ej2.syncfusion.com/vue/demos/#/material/drop-down-list/filtering.html 

Regards, 

Balaji Sekar