Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Sortable wrapping editable Listview causing issues

2 Answers 86 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Lisa
Top achievements
Rank 1
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>
 
 
  <script src="http://code.jquery.com/jquery-1.9.1.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>
    </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

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 19 May 2014, 10:43 AM
Hi Salvador,

In order to get the editing to work as expected with the Sortable widget you should filter out the currently edited row. For more information please check the second important box of the Sortable-ListView integration:
This should sort both issues that you encountered.

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
Lisa
Top achievements
Rank 1
answered on 19 May 2014, 05:49 PM
Works perfectly!  Thank you!
Tags
Sortable
Asked by
Lisa
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Lisa
Top achievements
Rank 1
Share this question
or