Vue 2.6 Grid Component Editable

1 Answer 61 Views
Grid
Sangamitra
Top achievements
Rank 1
Sangamitra asked on 28 Sep 2021, 06:54 PM | edited on 28 Sep 2021, 08:14 PM

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
Top achievements
Rank 1
commented on 28 Sep 2021, 07:07 PM

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.

1 Answer, 1 is accepted

Sort by
0
Accepted
Plamen
Telerik team
answered on 29 Sep 2021, 06:36 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Sangamitra
Top achievements
Rank 1
commented on 29 Sep 2021, 02:41 PM

Thank you so much. That's very helpful.
Sangamitra
Top achievements
Rank 1
commented on 04 Oct 2021, 07:19 PM | edited

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
Telerik team
commented on 05 Oct 2021, 08:34 AM

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
Top achievements
Rank 1
commented on 05 Oct 2021, 11:47 AM

Thank you. 
Tags
Grid
Asked by
Sangamitra
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Share this question
or