Question

我正在使用kendo网格和kendo树视图控件。在kendo网格中我有一个HTML输入控件，我动态添加网格中的控件。另外，我在同一页面中有一个剑道树视图。当我将一个值从树视图拖放到网格中的输入控件时，第一个输入控件值被追加。我无法将值附加到其他行。

   <script>
         $(document).ready(function () {        
        $("#tree_view").kendoTreeView(
    {
    dragAndDrop: true,
    drag: function (e) {
        if (e.dropTarget.tagName == "INPUT") {
            e.setStatusClass('k-add');
        }
    },
    drop: function (e) {
        if (e.dropTarget.tagName == "INPUT") {
            var treeview = $("#tree_view").data("kendoTreeView");

          //  $("#tree_value").val(treeview.text(e.sourceNode));
        }
        e.setValid(false);
        delete treeview;
    },
    dataSource: [
    {
        text: "Roles", expanded: true, imageUrl: "../DefaultAssets/Images/folder.png", items: [
        { text: "HR (10)", imageUrl: "../DefaultAssets/Images/Single.png" },
        { text: "Engineer (30)", imageUrl: "../DefaultAssets/Images/Single.png" }
        ]
    },
    {
        text: "Groups", expanded: true, imageUrl: "../DefaultAssets/Images/folder.png", items: [
       { text: "Accounting (5)", imageUrl: "../DefaultAssets/Images/group.png" },
       { text: "Test Three(123)", imageUrl: "../DefaultAssets/Images/group.png" }]
    }
    ]
});
        var grid = $("#grid").kendoGrid({
            columns: [

                { field: "ProcessValue", title: "Process Instance Variable", template: "<input id='tree_value' class='tree_class' />" },
                { field: "Control", title: "Value" },               

                { template: '<button onclick="return up(\'#=uid#\')">Add</button>' },

                {
                    command: [                     
                        { "name": "destroy", title: "" }],
                },
            ],
            dataSource: {
                data: [
                  {
                      Control: "Hover to type or Drag Variable",
                      ProcessValue: "Drag & Drop Variable"

                  },
                ],
                schema: {
                    model: {
                        Control: "Hover to type or Drag Variable",
                        ProcessValue: "Drag & Drop Variable"

                    }
                }
            },
            editable: true,
            reorderable: true,
            editable: { createAt: "bottom" },
            remove: function (e) { }
        });           
        }

    });
    function up(uid) {
        var grid = $("#grid").data("kendoGrid");

        var dataItem = grid.dataSource.getByUid(uid);
        var index = grid.dataSource.indexOf(dataItem);
        var newIndex = Math.max(0, index);     
        if (newIndex != index) {
            grid.dataSource.remove(dataItem);
            grid.dataSource.insert(newIndex, dataItem);            
        }
        grid.addRow();

        console.log(dataItem.uid);
        console.log(index);

        return false;

    }

</script>
<body>
    <div style="width: 100%">
        <div class="view" style="width: 85%">
            <div id="grid" style="float: left;"></div>
        </div>
        <div id="tree_view" style="float: left;"></div>

    </div>
</body>
</html>

Drag and Drop Scree Shot attached

如何将kendo树值拖放到kendo网格输入控件？

0 个答案: