CODEWITHSUNDEEP
javascriptjquerykendo-ui
Mark
Mark

Reputation: 3777

How can I make each list item draggable using kendo ui's control and framework

I am using version 2012.1.322 of Kendo UI.

I have a Kendo UI ListView. I am using a transport kendo data source (calling a web service using GET that returns JSON). I would like some javascript to run after the ListView has been bound.

My goal is to make each of the list items use the kendo drag and drop framework.

Is there an event like 'dataBound', 'success' or some sort of trick to make this to happen.

Here is the sample code

<script type="text/javascript">
  $(document).ready(function() {
    $("#fileAlist").kendoListView({
        template: "<li class=\"draggable\">${Name}</li>",
        dataSource:
            new kendo.data.DataSource({
                transport: {
                    read: {
                        url: 'http://www.somedomain.com/search',
                        dataType: "json",
                        type: "GET",
                        contentType: "application/json; charset=utf-8"
                    }
                }
            })
    });
  });
</script>

I want this to fire after the data has been bound through the async data source, so that each <li> becomes a draggable object.

$(".draggable").kendoDraggable();

some things ive tried

Upvotes: 2

Views: 3482

Answers (2)

Nasir Mahmood
Nasir Mahmood

Reputation: 1505

You can use kendoDraggable "filter" property it will accept any valid Jquery filter. Here is link with working example of kendo ui drag and drop between listviews. Kendo UI Drag & Drop between Listviews step by step tutorial

hope this will help you.

Upvotes: 0

Igorrious
Igorrious

Reputation: 1618

Give this a try:

Mark up for the list view, this will need styling changes as the border from list view will look odd in the middle of the bullet points. This will demonstrate the desired functionality either way.

<ul>
     <div id="contactList" style="width: 400px;"></div>
</ul>

Kendoui javascript

<script type="text/javascript" >
  $(document).ready(function () {
      var datasource = new kendo.data.DataSource({
          transport: {
              read: {
                  url: "...",  
                  dataType: "json",
                  contentType: "application/json; charset=utf-8",
                  type: "GET"
              }
          }
      });

      var contactsListView = $("#contactList").kendoListView({
          dataSource: datasource,
          template: '<li>${ Name }</li>'
      }); 

      contactsListView.kendoDraggable({
          filter: "div > li",  //select all li elements in the #contactList div
          hint: function(row) {
              return row.clone();  //returns the same mark up as the template <li>some name</li>
          }
      });
  });

</script>​

Upvotes: 2

Related Questions