Manually adding item to grid datasource

3 Answers 949 Views
Michael
Top achievements
Rank 1
Michael asked on 20 Apr 2018, 03:01 PM

I'm trying to manually add an item to my grid's datasource, and can't seem to get it to work, but I may just be missing something fundamental with Vue components.

My grid is located in a child Vue component template, where the datasource is given to it by the parent (it's an array of objects).  When it binds, it does display my two sample rows from the array, but can't get a new row to be added dynamically.

Grid:

                    <kendo-grid v-once ref="diagnosisCodes" :data-source="dataSource.DiagnosisCodes" :selectable="true" :scrollable="false">
                        <kendo-grid-column field="SequenceNumber" title="@Localizer["Sequence"]" :width="100"></kendo-grid-column>
                        <kendo-grid-column field="DiagnosisCode" title="@Localizer["Diagnosis Code"]" :width="140"></kendo-grid-column>
                        <kendo-grid-column field="Description" title="@Localizer["Description"]"></kendo-grid-column>
                        <kendo-grid-column :command="['destroy']" title="&nbsp;" :width="120"></kendo-grid-column>
                    </kendo-grid>

In a method of my child component, I'm basically trying to do this, just to see if I can get a new row to appear in the grid:

                    const dc = <Vue>this.$refs.diagnosisCodes;

                    const item: any = { SequenceNumber: 3, DiagnosisCode: "M225.7", Description: "Fingers crossed" };

                    dc.$props.dataSource.push(item);

The console error is attached, but the error is "[Vue warn]: Error in callback for watcher "dataSource": "TypeError: dataSource.fetch is not a function".  I'm new to using Kendo Vue, so if I'm doing this wrong, how can I dynamically add to my Vue grid datasource, in order to get new rows to appear?

 

Michael
Top achievements
Rank 1
commented on 20 Apr 2018, 03:02 PM

Forgot the attachment.
Michael
Top achievements
Rank 1
commented on 20 Apr 2018, 03:36 PM

So if I rework my template, so the grid is bound to an actual kendo-datasource, instead of a primitive array, then it works.  The "push" was adding to the datasource before (saw that in the F12 tools), but the grid seems to think it is bound to a kendoDatasource, as the error said it was trying to call "fetch", which doesn't exist on my array.  Maybe the grid was supposed to automatically wrap up my array into a kendodatasource, but it didn't, or some binding code needs to change, but it feels like it might be a bug to me.

Working version of template:

                    <kendo-datasource ref="diagnosisCodesDataSource"
                                      :data="dataSource.DiagnosisCodes"
                                      :server-filtering="false">
                    </kendo-datasource>
                    <kendo-grid v-once ref="diagnosisCodes" :data-source-ref="'diagnosisCodesDataSource'" :selectable="true" :scrollable="false">
                        <kendo-grid-column field="SequenceNumber" title="@Localizer["Sequence"]" :width="100"></kendo-grid-column>
                        <kendo-grid-column field="DiagnosisCode" title="@Localizer["Diagnosis Code"]" :width="140"></kendo-grid-column>
                        <kendo-grid-column field="Description" title="@Localizer["Description"]"></kendo-grid-column>
                        <kendo-grid-column :command="['destroy']" title="&nbsp;" :width="120"></kendo-grid-column>
                    </kendo-grid>

Working sample code:

                    const ds = <Vue>this.$refs.diagnosisCodesDataSource;
                    const item: any = { SequenceNumber: 3, DiagnosisCode: "M225.7", Description: "Fingers crossed" };
                    ds.$props.data.push(item);


3 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 24 Apr 2018, 10:26 AM
Hello Michael,

On the following plunkr you could find a simple Grid that is bound to local data. By clicking the "Add new item" button, a new row will be dynamically added to the Grid through the dataSource's add() method:
<script>
  new Vue({
    el: '#vueapp',
    methods: {       
      onAddItemClick: function (ev) {
        const grid = this.$refs.diagnosisCodes.kendoWidget();
           
        grid.dataSource.add({
          "ProductID": 4,
          "ProductName": "Cheese",
          "UnitPrice": 55,
          "UnitsInStock": 100,
          "Discontinued": false,
        });
      }
    }
 })
</script>

With the above example I did not manage to reproduce the described issue and therefore I assume that I am missing some important details. Could you modify the example accordingly, so that the issue is reproduced?

Regards,
Dimitar
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Michael
Top achievements
Rank 1
commented on 24 Apr 2018, 01:39 PM

Hey, thanks for the response, and the sample.  It sure does appear to work fine in yours.  We are slammed at the moment, but I hope to get time later to try and see why it won't work in our setup.  For now, the separate data-source is working for me.  One thing we are doing different than this is that our page is broken up into child custom Vue components, where the data flows down from the root Vue component.  My child gets that array from the parent as a prop, which the grid was then binding to.  It's the first time we have tried that type of setup, so we may just have something wrong. I'll add to this thread, if I get more information for it.
Dimitar
Telerik team
commented on 25 Apr 2018, 06:08 AM

Hi Michael,

Take your time testing the example. In case other issues arise with the implementation, I would be happy to assist you further.

Regards,
Dimitar
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Wayne Hiller
Top achievements
Rank 1
Veteran
Iron
commented on 30 May 2018, 06:43 PM

I am getting this error as well. It happens when the grid is bound to an Array directly :data-source="someArray".  And the you call someArray.push({ name: "test"});

 

0
Dimitar
Telerik team
answered on 01 Jun 2018, 01:38 PM
Hello Wayne,

I have investigated the described scenario further and managed to pin-down the exact cause for the issue. The problem is in the Grid's setDataSource() method, which is being called internally. I have logged this as a bug in the Kendo UI GitHub repository. You can start tracking the progress that we make on it from issue #8602.

As a workaround you could use the dataSource.add() method as demonstrated in the following Plunkr.

I have updated the Telerik Points of both @Michael Stuart and @Wayne Hiller as gratitude for helping us discover this issue.

Regards,
Dimitar
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Arnaud
Top achievements
Rank 1
commented on 19 Jun 2018, 08:48 AM

Hi !

Issue #8602 (https://github.com/telerik/kendo/issues/8602) give me a 404. Where can i track this issue ?

Thank you !

0
Dimitar
Telerik team
answered on 19 Jun 2018, 11:28 AM
Hello Arnaud,

I can confirm that the issue has been successfully resolved. The fix will be included in the next official Service Pack 2018 R2 SP1 which is scheduled to be released at the end of this month.

Regards,
Dimitar
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Michael
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or