Calling destroy from a binded datasource

[danparker276]

So I have a myViewModel.js that I read in. which has the datasource, but I doesn't seem to call destroy.
Also the kendo.data.ObservableObject.fn.init.apply(that, []);  confuses me.  I wish there were more mvvm examples that are read in from a js file.

in my html I got:

$("#dgGrid").kendoGrid({
      groupable: false,
      sortable: true,

      editable: "inline",
      columns: [
              {
                  field: "accountId",
                  title: "User #",
                  width: "50px"

              },

          {
              field: "currentAmt",
              title: "Amount",
              width: "100px"

          },
     { command: [{ name: "destroy", template: "<div class='k-button'><span class='k-icon k-delete'></span></div>" }], title: " ", width: 40 }



      ]
  });

<div id="dgGrid" data-role="grid" style="width:340px; font-size:9px; height:250px"

     data-bind="source: userAccountsDataSource">
    <style type="text/css">
        .k-grid tbody .k-button {
            min-width: 12px;
            width: 30px;
        }
    </style>
</div>

(function (global) {
    var FlossViewModel,
        app = global.app = global.app || {};

    FlossViewModel = kendo.data.ObservableObject.extend({

        acountId: "",
        accountNick: "",
        newbcId: "q",
        userId: "0",
        checkDate: "",
        errorMsg: "",
        accountsVis: true,


        userAccountsDataSource: "",




        refreshAccount: function(){
            this.populateAccounts();

        },
        populateAccounts: function(){
            var that = this;

           // kendo.data.ObservableObject.fn.init.apply(that, []);
            var dataSourceaa = new kendo.data.DataSource({

                transport: {

                    read: {
                                type: "GET",
                                dataType: "jsonp",
                                url: '/api/FlossAccount/'
                                    },

                    destroy: {
                        type: "DELETE",
                        url: function (options) {
                            return '/api/FlossAccount/1';
                        },

                        dataType: "jsonp",
                        data: {'' : '333'}, //i'm just putting any data for now
                        cache: false



                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return { models: kendo.stringify(options.models) };
                        }
                    }
                },

                error: function (e) {
                    that.set("errorMsg", "Error: Check Connection ");
                    dataSourceaa.cancelChanges();

                }
            });

          that.set("userAccountsDataSource", dataSourceaa);


            dataSourceaa.read();
         //  this.set("userAccountsDataSource", dataSourceaa);

        },

         .....

    });

    app.flossService = {
        viewModel: new FlossViewModel()
    };
})(window);

[Alexander Valchev]

Hi Dan,

The problem might be related to the custom command template that you use or to the missing model ID.
Please try the following:

1. Add class "k-grid-delete" and change the 'div' tag into 'a' in the command template.

template: "<a class='k-button k-grid-delete'><span class='k-icon k-delete'></span></a>"

On a side note - why you are using template? It seems that you are not changing the command UI much, if your aim is to remove the text you can set it to empty string.

2. Add schema.model with ID to the dataSource configuration.

• http://docs.telerik.com/kendo-ui/api/framework/datasource#configuration-schema.model

Regards,
Alexander Valchev
Telerik

 

 

[danparker276]

Thank you that all worked.

But when do I use:  kendo.data.ObservableObject.fn.init.apply(that, []);  ?

[Alexander Valchev]

Hello Dan,

It is unclear to me why you need kendo.data.ObservableObject.fn.init.apply(that, []);? If I understood correctly your scenario is working without it now, isn't it?

Regards,
Alexander Valchev
Telerik

 

 

[danparker276]

[quote]Alexander Valchev said:Hello Dan,

It is unclear to me why you need kendo.data.ObservableObject.fn.init.apply(that, []);? If I understood correctly your scenario is working without it now, isn't it?

Regards,
Alexander Valchev
Telerik

 

 

[/quote]

Yeah, I don't need it here, but sometimes I do.  It's used a lot in the mobile app samples, in the Platform app builder.  I'm just thinking, since they're doing it, I better do it too.  I just couldn't find out what it does.

[Alexander Valchev]

Hello Dan,

This is a way of initializing an ObservableObject - the apply() method calls a function with a given 'this' value and arguments provided as an array (or an array-like object).
There is no need to call this unless you have any particular reason to do so. In most cases the MVVM framework will automatically transform JavaScript objects into observable ones when that is required.

Regards,
Alexander Valchev
Telerik