CODEWITHSUNDEEP
javascripthtmlkendo-ui
ckv
ckv

Reputation: 10830

Dragging individual element of KENDO UI Listview using KENDO Draggable

Below is my template code of each list item. I want only the particular list item to be selected when i drag. Right now the entire list view itself is selected. What filter should i apply to my draggable kendo source?

<script type="text/x-kendo-tmpl" id="template">
    <div class="DeviceList" id="draggable"> 
        #:Name#<br/>
        #:HDate#<br/>
        #:IsAnnual#<br/>
        #:Type#<br/>
        </div>
</script>

And below is my kendo list view init call:

 var list =   $("#listView").kendoListView({
            autoBind: true,
            dataBound: function (e) {
                if (dataSource.total() == 0) {
                    $("#listView").html('<tr><td>There are no members at this time.</td></tr>');
                };
            },
            dataSource: dataSource,
            selectable: "single",
            template: kendo.template($("#template").html()),
            change: function (e) {
                var index = this.select().index();
                var dataItem = this.dataSource.at(index); 
            }

      });
 list.kendoDraggable({

          hint: function (row) {
              return row.clone();  //returns the same mark up as the template <li>some name</li>
          }
      });

Upvotes: 0

Views: 500

Answers (1)

OnaBai
OnaBai

Reputation: 40897

You should do:

list.kendoDraggable({
    filter: ".DeviceList",
    hint  : function (row) {
        return row.clone();  //returns the same mark up as the template <li>some name</li>
    }
});

Taking advantage that you set a class DeviceList for each item.

Upvotes: 2

Related Questions