Sortable wrapping editable Listview causing issues

3 posts, 1 answers
  1. Lisa
    Lisa avatar
    20 posts
    Member since:
    Feb 2014

    Posted 15 May 2014 Link to this post

    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. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 19 May 2014 Link to this post

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

    Posted 19 May 2014 in reply to Alexander Valchev Link to this post

    Works perfectly!  Thank you!
Back to Top