Calling destroy from a binded datasource

6 posts, 1 answers
  1. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 09 May 2014 Link to this post

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

  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 13 May 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 20 May 2014 in reply to Alexander Valchev Link to this post

    Thank you that all worked.

    But when do I use:  kendo.data.ObservableObject.fn.init.apply(that, []);  ?
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 20 May 2014 Link to this post

    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!
     
  6. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 21 May 2014 in reply to Alexander Valchev Link to this post

    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!
     


    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.
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 23 May 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready