Manually adding item to grid datasource

[Michael]

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]

Forgot the attachment.

[Michael]

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);

[Dimitar]

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

[Michael]

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]

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

[Wayne Hiller]

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"});

 

[Dimitar]

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

[Arnaud]

Hi !

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

Thank you !

[Dimitar]

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