Sortable Handler inside kendo template

7 posts, 0 answers
  1. George
    George avatar
    49 posts
    Member since:
    Apr 2014

    Posted 30 Apr 2015 Link to this post

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

    Posted 04 May 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. George
    George avatar
    49 posts
    Member since:
    Apr 2014

    Posted 07 May 2015 in reply to Alexander Valchev Link to this post

    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!

  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 11 May 2015 Link to this post

    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!
     
  6. George
    George avatar
    49 posts
    Member since:
    Apr 2014

    Posted 11 May 2015 in reply to Alexander Valchev Link to this post

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

  7. George
    George avatar
    49 posts
    Member since:
    Apr 2014

    Posted 11 May 2015 in reply to George Link to this post

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

  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 13 May 2015 Link to this post

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