CODEWITHSUNDEEP
javascriptdrag-and-dropkendo-ui
tkauran
tkauran

Reputation: 135

Bind Kendo Web Draggable to Dynamically generated div

I have searched through Telrik forums and Stackoverflow forums for the past few hours and cannot find a solution to my issue.

My issue is as follows...

On loading the web page, I am making an ajax call to obtain data from a database, then using javascript to dynamically load that data (after formatting it, adding div's, tables etc) and then I wish to make the div's containing that newly generated data draggable and droppable using the kendo web UI library.

The issue I am having is that kendo is not recognising the new content. I tried using code like this, it does allow me to drag the content after it's dynamically loaded, however it will not allow me to drop it onto another dynamically loaded div.

So I am wondering, is there a way I can bind the events with kendo to dynamically generated content instead of using jquery .on event? (the code below doesn't allow the draggable div to be dropped onto the dropable div).

If you need more information, please let me know and I will try to provide as much as I can.

$("#draggable-container").on("mouseover", '.available', function() {
    $(".available").kendoDraggable({
        hint: function(event) {
            return $("#" + $(event).attr("id")).clone();
        }
    });
});

$("#droppable-container").on("mouseover", '.vacant', function() {

    $(".vacant").kendoDropTarget({
         drop: function(e){          
            $("#" + e.dropTarget.attr("id")).toggle("clip");
         }
     });
});

The dynamically generated html for draggable looks like this.

<div id="draggable">
<div id="3" class="available">
    <table class="table twelve">
        <tbody>
            <tr>
                <th>Example data</th>
                <td>Example data</td>
            </tr>
            <tr>
                <th>Example data</th>
                <td>Example data</td>
            </tr>
            <tr>
                <th>Example data</th>
                <td>Example data</td>
            </tr>
            <tr>
                <th>Example data</th>
                <td>08:00:00 - 2013-10-11</td>
            </tr>
            <tr>
                <th>Example data</th>
                <td>16:00:00 - 2013-10-11</td>
            </tr>
        </tbody>
    </table>
</div> 
</div>

The dynamically generated html for dropable looks like this.

<div id="dropable">
<div id="1" class="vacant">
    <table class="table twelve">
        <tbody>
            <tr>
                <th>Example data</th>
                <td>Example data</td>
            </tr>
            <tr>
                <th>Example data</th>
                <td>Example data</td>
            </tr>
            <tr>
                <th>Example data</th>
                <td>Example data</td>
            </tr>
            <tr>
                <th>Example data</th>
                <td>08:00:00 - 2013-10-11</td>
            </tr>
            <tr>
                <th>Example data</th>
                <td>16:00:00 - 2013-10-11</td>
            </tr>
        </tbody>
    </table>
</div> 
</div>

EDIT : changed a class name (was a mistake on writing the code on SO)

Upvotes: 2

Views: 908

Answers (1)

tkauran
tkauran

Reputation: 135

After researching and further testing, I found the solution to my issue.

I hope this will help others, whom may come across the same issue.

    $("#drggable-container").kendoDraggable({
        filter: ".available",
        hint: function(event) {
            return $("#" + $(event).attr("id")).clone();
        }
    });


    $("#dropable-container").kendoDropTargetArea({
       filter: ".vacant",
       drop: function(e){          
           e.dropTarget.toggle("clip");
       }
    });

Upvotes: 3

Related Questions