This is a migrated thread and some comments may be shown as answers.

Calling destroy from a binded datasource

5 Answers 196 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
danparker276
Top achievements
Rank 2
danparker276 asked on 09 May 2014, 03:01 PM
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);

5 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 13 May 2014, 10:54 AM
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.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
danparker276
Top achievements
Rank 2
answered on 20 May 2014, 03:26 PM
Thank you that all worked.

But when do I use:  kendo.data.ObservableObject.fn.init.apply(that, []);  ?
0
Alexander Valchev
Telerik team
answered on 20 May 2014, 04:12 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
danparker276
Top achievements
Rank 2
answered on 22 May 2014, 02:04 AM
[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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
[/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.
0
Alexander Valchev
Telerik team
answered on 23 May 2014, 04:38 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
MVVM
Asked by
danparker276
Top achievements
Rank 2
Answers by
Alexander Valchev
Telerik team
danparker276
Top achievements
Rank 2
Share this question
or