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

Sortable wrapping editable Listview causing issues

2 Answers 134 Views

Sortable

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

Lisa asked on 15 May 2014, 11:35 PM

Hello,

I am trying to build a UI which is basically an editable version of the Kendo Web Demo for Sortable ==> Handlers. However, attaching the Sortable to the editable Listview seems to disrupt the datasource detection and management of the create and update conditions. I've done a snippet at trykendoui.com but can't figure out how to save/share it. The complete code is below.

Forget the actual actions in the transport specification -- I just want to see that I can trap the events and get the IDs and Names as required -- I will be building up REST call URLs. Everything is fine while the list view is not a Sortable. However, when you remove the comments around the Sortable specification, then the following problems occur.

(1) on edit, the name field is not editable (or on my system, is somewhat editable but when the checkmark is clicked to save, the updated product name isn't available),

(2) on add new, the new product name doesn't appear to be available.

Delete still seems to work.

We're designing this functionality into several places in our UI, so an answer or workaround is really key. Thank you in advance!

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled</title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.default.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>

</head>

<body>

<div style="width: 600px;">

<div>

<a id="btnAdd" class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>

</div>

<div>

<div id="listView"></div>

</div>

<script type="text/x-kendo-tmpl" id="listTemplate">

<div class="item">

<span class="handler"> </span>

<span>#:ProductName#</span>

<a class="k-button k-button-icontext k-edit-button rfm" href="\\#"><span class="k-icon k-edit"></span></a>

<a class="k-button k-button-icontext k-delete-button rfm" href="\\#"><span class="k-icon k-delete"></span></a>

</div>

</script>

<script type="text/x-kendo-tmpl" id="editTemplate">

<div class="item">

<span class="handler"> </span>

<input type="text" class="k-textbox" data-bind="value:ProductName" name="ProductName" required="required" validationMessage="required" />

<span data-for="ProductName" class="k-invalid-msg"></span>

<a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>

<a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>

</div>

</script>

<script>

var products = [{

ProductID : 1,

ProductName : "Chai"

}, {

ProductID : 2,

ProductName : "Chang"

}, {

ProductID : 3,

ProductName : "Aniseed Syrup"

}, {

ProductID : 4,

ProductName : "Chef Anton's Cajun Seasoning"

}];

$(document).ready(function() {

var dataSource = new kendo.data.DataSource({

transport: {

create: function(options) {

console.log("datasource create :: ", options);

console.log("data :: ", options.data);

alert("datasource create: New product name = " + options.data.ProductName );

options.success(products);

},

read: function(options) {

console.log("datasource read", options);

options.success(products);

},

update: function(options) {

console.log("datasource update", options);

console.log("data :: ", options.data);

alert("datasource update: Altered product name = " + options.data.ProductName + " for product id "  + options.data.ProductID );

options.success(products);

},

destroy: function(options) {

console.log("datasource destroy", options);

console.log("data :: ", options.data);

alert("datasource destroy: Deleted product id = " + options.data.ProductID );

options.success(products);

}

},

schema: {

model: {

id: "ProductID",

fields: {

ProductName : { type: "string" },

}

});

var listView = $("#listView").kendoListView({

dataSource: dataSource,

template: kendo.template($("#listTemplate").html()),

editTemplate: kendo.template($("#editTemplate").html())

}).data("kendoListView");

/* REMOVE COMMENT TO SEE ISSUES WITH MAKING THE LISTVIEW SORTABLE

$("#listView").kendoSortable({

cursor: "move",

handler: ".handler",

hint:function(element) {

return element.clone().addClass("hint");

},

placeholder: function(element) {

return element.clone().css("opacity", 0.1);

},

change: function(e) {

console.log("You sorted me!");

}

});

END OF COMMENT */

$("#btnAdd").click(function(e) {

listView.add();

e.preventDefault();

});

</script>

<style scoped>

.rfm {

float:right;

margin-right: 5px;

margin-top: 5px;

}

span.k-invalid-msg

{

position: absolute;

margin-left: 6px;

}

.item {

margin: 15px;

padding: 0 10px 0 0;

min-width: 200px;

background-color: #fff;

border: 1px solid rgba(0,0,0,.1);

border-radius: 3px;

font-size: 1.3em;

line-height: 2.5em;

}

.handler {

display: inline-block;

width: 30px;

margin-right: 10px;

border-radius: 3px 0 0 3px;

background: url('http://demos.telerik.com/kendo-ui/content/web/sortable/handle.png') no-repeat 50% 50% #ccc;

}

.handler:hover {

background-color: #2db245;

}

.placeholder {

width: 298px;

border: 1px solid #2db245;

}

.hint {

border: 2px solid #2db245;

border-radius: 6px;

width: 400px;

}

.hint .handler {

background-color: #2db245;

}

</style>

</body>

</html>

2 Answers, 1 is accepted

Accepted