Sortable Handler inside kendo template

[Tony]

I was wondering if it is possible to use sortable handlers within a kendo template. Also, is it supported by mvvm? I'm having trouble finding documentation. Thanks in advance.

[Alexander Valchev]

Hi George,

Please check the following example: http://dojo.telerik.com/AnipI

In this case I am initializing the Sortable using JavaScript as it is not possible to use source binding with the Sortable widget. In case you want to initialize the Sortable widget using data attributes you will have to wrap the source and template bound element into div with data-role sortable. For example:

<div id="sortable" data-role="sortable" data-filter=".sortable" data-bind="events: { change: onChange }">
  <div data-template="tmp" data-bind="source: data"></div>
</div>

I hope this information will help.

Regards,
Alexander Valchev
Telerik

 

 

[Tony]

This is great! However, I am working with a complex JSON. I am bounding this complex JSON to a property inside my observable viewmodel. I am a little confused on how to reference the array i intend on being sortable within the onChange function. I have posted below some of viewmodel:

(function (global) {

    var servicesPlansViewModel,
        app = global.app = global.app || {};

    servicesPlansViewModel = kendo.data.ObservableObject.extend({
        servicePlans : "",
        getServicePlans: function (callback) {
            var that = this;

            $.ajax({
                url: 'services-data.json',
                type: 'get',
                dataType: 'json',
                error: function(response){
                    console.log('error')
                },
                success: function(response){
                    that.set("servicePlans", response.sPlans);
                    callback();
                }
            });
        }
 })

    app.servicesPlansData = {
        viewModel: new servicesPlansViewModel()
    };


 })(window);

 

 Here is a preview of basically how the JSON file looks like:

{
  "sPlans" : [
    {
      "pDetails":{
         "includedServices": [
          {
            "configID" : 0,
            "configName": "Config1",
              "wkd": true,
              "wke": false,
              "ah": false,
              "ho": false,
              "coI": 50,
              "coP": 200,
              "perPeriod": 500
          },
          {
            "configID" : 1,
            "configName": "Config2",
              "wkd": false,
              "wke": true,
              "ah": false,
              "ho": true,
              "coI": 2,
              "coP": 200,
              "perPeriod": 500
          }
        ]
      }
    }
  ]
}

 

Thanks for all the help!

[Alexander Valchev]

Hi George,

The ViewModel is part of the 'app' namespace. You may access it in the following way:

app.servicesPlansData.viewModel.servicePlans

Regards,
Alexander Valchev
Telerik

 

 

[Tony]

Hi Alexander,

I'm able to dial into the viewModel...however, I keep getting "Uncaught TypeError: Cannot read property 'splice' of undefined"

here is my code inside the viewModel for the onChange event:

 

onChange: function(){
           var that = this;

           var item = that.servicePlans.data.splice(e.oldIndex, 1)[0];
                that.servicePlans.data.splice(e.newIndex, 0, item);
                that.servicePlans.trigger("change", { field: "data" });

        }

[Tony]

Hi Alexander,

 I was able to update my code so that when a user sorts a row in my code, the data is correctly updated. I'm logging the changes to my console and can see everything showing up correctly. However, there seems to be a binding issue where the data in the html is not displaying correctly. Below is my updated code: 

 

onChange: function(e){
            var that = this,
                selectedItemUID = $(e)[0].item[0].attributes[0].value,
                planID = $("table[data-uid='" + selectedItemUID + "']").closest(".plan")[0].attributes[1].value,

           var item = that.servicePlans[planID].planDetails.includedServices.splice(e.oldIndex, 1)[0];
                that.servicePlans[planID].planDetails.includedServices.splice(e.newIndex, 0, item);

        }

[Alexander Valchev]

Hello George,

Could you please set up a small Dojo test page which isolates the issue so I can examine it and assist you further?

Regards,
Alexander Valchev
Telerik