Vue 2.6 Grid Component Editable

[Sangamitra]

Hello. I am using a vue class component to create a Vue Grid in Vue 2.6.10 as per the project requirement. It uses typescript. 

My issue is with the "Edit" button in the slot that updates dataItem.inEdit.

The emit is happening from the slot to the parent component.  But the child component i.e the slot is not dynamically updating the "Edit" button to show Update/Cancel based on the changed dataItem.inEdit = true value. When i checked in vue dev tool, the slot inEdit value gets updated only when i click on the parent component and click back on the child component.

Basically it's not reloading the slot section based on the updated value of inEdit. This is only happening in Vue 2. I tried the same in vue3 and it works fine with class component and typescript libraries. Can you please help. I attached my code to the link below. It's not compilable since the stackblitz is not set up for my requirements but you can see the code.

https://stackblitz.com/edit/vue-r9u8vg?file=src/components/HelloWorld.vue

 

 

[Sangamitra]

Also, if you could share the links if any to your documentation (especially related to grid component samples in Vue 2), that is pertinent to Vue 2.x version. that would be very helpful.

[Plamen]

Hello,

Yes indeed - we have currently translated all out demos to Vue 3 and currently there are not Vue 2 examples in our online demos yet we kendo Vue Grid supports Vue2. I have created an equivalent of our Inline editing demo in Vue 2 for you - https://codesandbox.io/s/elated-chihiro-wdn5y

Basically the only difference in the code is the different way items are updated in Vue 2 and Vue 3.

Hope this information will be helpful. If you have further questions please let me know.

Regards,
Plamen
Progress Telerik

[Sangamitra]

Thank you so much. That's very helpful.

[Sangamitra]

Hi Plamen! Where is the best place/best way to make an axios call for to Update the grid data (on pressing the 'Update' button on existing item in this example. I am looking at using native grid not grid data source. Do you have a sample in Vue2?

[Petar]

Hi, Sangamitra.

The example Plamen has sent you uses the Native Grid(Not Wrapper Grid that uses DataSource) in Vue 2 context.

Talking about the place to make the Axios call, you can do it in the "save" method in the HelloWorld.vue component from the sample. The updated dataItem of the edited Grid row is available through the code in yellow below.

save: function (e) {
  console.log("DataItem: ", e.dataItem);
  .......................................
  .......................................
}

We don't have a runnable example that uses Axios, but the place you are searching for is the discussed above "save" method.

I hope the above will help you implement what you need in your application.

[Sangamitra]

Thank you.