drag and drop from listview to grid

3 posts, 1 answers
  1. Answer
    Mirza
    Mirza avatar
    7 posts
    Member since:
    May 2013

    Posted 30 May 2013 Link to this post

    Hi,
    i need to drag from list and drop to grid, but i have problem with refreshing grid list:

    This is code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Your Website</title>

    <link href="styles/kendo.common.min.css" rel="stylesheet">
    <link href="styles/kendo.default.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/kendo.web.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <style>
    html,body {
           padding:0;
           margin:0;
           height:100%;
           max-height:100%;
         }
    .articles-list, .articles-grid {
    border: 1px solid #CCC;
    height: 40%
    }
    #list {
    padding: 10px
    }
    #grid {
    height: 200px;
    background: #FF0;
    }
    .product {
       float: left;
       position: relative;
       width: 111px;
       height: 170px;
       margin: 0;
       padding: 0;
    }
    .product img {
       width: 110px;
       height: 110px;
    }
    .product h3 {
       margin: 0;
       padding: 3px 5px 0 0;
       max-width: 96px;
       overflow: hidden;
       line-height: 1.1em;
       font-size: .9em;
       font-weight: normal;
       text-transform: uppercase;
       color: #999;
    }
    .k-listview:after, .product dl:after {
       content: ".";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
    }

    </style>
    </head>
    <body>


    <ul id="menu" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal" tabindex="0" role="menubar">
    <li class="k-item k-state-default k-first" role="menuitem">
    <span class="k-link">Menu item</span>
    </li>
    </ul>

    <div class="articles-list">
    <div id="list"></div>
    </div>

    <div class="articles-grid">
    <div id="grid"></div>
    </div>


        <script type="text/x-kendo-tmpl" id="template">
            <div class="product">
                <img src="http://placehold.it/100x100" alt="${name} image" />
                <h3>#:name#</h3>
                <input type="hidden" value="#:id#">
            </div>
        </script>

    <script>
            $(document).ready(function() {
            var list = $("#list");
    var grid = $("#grid");

                var data = [
                { id: 1, name: "Jane Doe", quantity: 30 },
        { id: 2, name: "John Doe", quantity: 33 }
                ];

                var grid_data = new kendo.data.DataSource({
       data: []
    });

                list.kendoListView({
                    dataSource: data,
                    template: kendo.template($("#template").html())
                });

                grid.kendoGrid({
                dataSource: {
                data: []
                },
                    sortable: true,
                    columns: [ {
                            field: "name",
                            width: 90,
                            title: "Naziv"
                        } , {
                            field: "quantity",
                            width: 90,
                            title: "Kolicina"
                        }
                    ]
                });

                list.kendoDraggable({
                filter: ".product",
                    hint: function(row) {
                        return row.clone();
                    }
                });

                grid.kendoDropTarget({
                drop: function(row) {
                var tempData = row.draggable.currentTarget.context.children;
                grid_data.add({ id: tempData[2].value, name: tempData[1].innerHTML, quantity: '2' });
                }
                });
            });
        </script>
    </body>
    </html>


    Can you tell me if this is correct way doing it, and how should i refresh grid on drop?
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 03 Jun 2013 Link to this post

    Hello Mirza,

    You should set the "grid_data" dataSource to the Grid in order to update the Grid when using the dataSource add method:

    var grid_data = new kendo.data.DataSource({
       data: []
    });
    grid.kendoGrid({
    dataSource: grid_data,
    Regards,
    Daniel
    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. Mirza
    Mirza avatar
    7 posts
    Member since:
    May 2013

    Posted 06 Jun 2013 Link to this post

    Thanks, it works.
Back to Top