6 Answers, 1 is accepted
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

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!
The ViewModel is part of the 'app' namespace. You may access it in the following way:
app.servicesPlansData.viewModel.servicePlans
Regards,
Alexander Valchev
Telerik

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

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