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

Sortable Handler inside kendo template

6 Answers 63 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Tony
Top achievements
Rank 1
Tony asked on 30 Apr 2015, 07:00 PM
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.

6 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 04 May 2015, 11:02 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Tony
Top achievements
Rank 1
answered on 07 May 2015, 05:45 PM

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!

0
Alexander Valchev
Telerik team
answered on 11 May 2015, 10:58 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Tony
Top achievements
Rank 1
answered on 11 May 2015, 06:48 PM

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

0
Tony
Top achievements
Rank 1
answered on 11 May 2015, 11:14 PM

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

0
Alexander Valchev
Telerik team
answered on 13 May 2015, 11:22 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Sortable
Asked by
Tony
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Tony
Top achievements
Rank 1
Share this question
or