剑道网格：将单元格数据从一个网格拖放到另一个网格答案

【问题标题】：Kendo Grid: Drag and Drop Cell Data From One Grid Into another剑道网格：将单元格数据从一个网格拖放到另一个网格
【发布时间】：2018-11-13 12:39:31
【问题描述】：

我最近遇到了 Kendo MVC 问题，我需要将产品代码从一个 Kendo Grid 拖到另一个单元格值为空的 Kendo Grid 中。

场景：网格 A，订购的产品，其中发送产品列表的供应商没有完整的产品列表和 90% 准确的描述。

网格 B，产品，包含完整的\正确描述和产品代码。

我现在需要用网格 B 中单元格 Y 的数据填充网格 A 中的单元格 x。在当前窗口 (WinForms) 应用程序中，用户可以使用拖放操作。

问题：剑道网格不容易提供拖放功能。

Kendo 自己，诚然不久前说这不受支持，但产生了一个小提琴，允许拖放一个单元格来重新排序行，仅此而已。

他们也从未为 ASP.Net MVC 生成任何场景。

【问题讨论】：

标签： javascript jquery asp.net-mvc kendo-ui kendo-grid

【解决方案1】：

因为这是我需要的东西，而且似乎也是其他人可能已经搜索过的东西，所以您将在此处看到下面的代码，以帮助在我的位置上的人，以及 Kendo UI 的小提琴，以及 MVC 示例。

由于我的项目的组织方式和使用 Typescript 的方式，MVC 版本不会是 1:1 精确的，但会足够接近以供某人遵循。

需要注意的是，当您拿起物品时，您可以点击该行的任意位置。（如果有人可以对此进行改进，请发布答案，我将进行测试，如果可行，我将投票赞成并将您的答案与工作代码合并。

除了上述之外，您拾取的数据项是在相对于鼠标所在位置的位置拾取的。我会随着时间的推移解决这个问题，但如果有人在我之前解决这个问题，请如上所述。

首先，

剑道用户界面代码

HTML

<html>
<head>
    <title>KendoUI Test Page</title>

<link href="//kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css" rel="stylesheet" />


    <script src="//code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid"></div>    
    <div id="grid2"></div>


</body>
</html>

CSS

 .hint {
    padding: 7px 10px;
    background-color: #FFFFFF;
 }

**JavaScript \ JQuery **

var data = [
        { id: 1, text: "text 1", position: 0 },
        { id: 2, text: "text 2", position: 1 },
        { id: 3, text: "text 3", position: 2 }
    ]

var data2 = [
        { id: 4, text: "", position: 0 },
        { id: 5, text: "", position: 1 },
        { id: 6, text: "", position: 2 }
    ]

    var dataSource = new kendo.data.DataSource({
        data: data,        
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number" },
                    text: { type: "string" },
                    position: { type: "number" }
                }
            }
        }
    });

    var dataSource2 = new kendo.data.DataSource({
        data: data2,        
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number" },
                    text: { type: "string" },
                    position: { type: "number" }
                }
            }
        }
    });

    var grid = $("#grid").kendoGrid({
        dataSource: dataSource,  
        scrollable: false,    
        columns: ["id", "text"]            
    }).data("kendoGrid");

    var grid2 = $("#grid2").kendoGrid({
        dataSource: dataSource2,  
        scrollable: false,    
        columns: ["id", "text"]            
    }).data("kendoGrid");

    grid.table.kendoDraggable({
        filter: "tbody > tr",
        group: "gridGroup",
        threshold: 100,
        hint: function(e) {
            var dataItem = grid.dataItem(e);
            return $('<div class="hint">' + dataItem.text + '</div>').css({ marginLeft: e.clientX, marginTop: e.clientY });
        }
    });


    grid2.table.kendoDropTarget({
        group: "gridGroup",
        drop: function(e) {        
            e.draggable.hint.hide();

            var dest = $(document.elementFromPoint(e.clientX, e.clientY));
            var row = dest.closest('tr')
            var uid = row[0].dataset.uid
            var originalVal = dest[0].innerHTML
            var target = dataSource2.getByUid(uid)
            var g = $("#grid2").data("kendoGrid")
            $.each(g.dataSource.data(), function(idx, gridrow){
                if(gridrow.uid === uid){
                var dataItem = g.dataSource.get(gridrow.id)
                dataItem.set("text", e.draggable.hint[0].innerHTML);
              }
            })

        }
    });

小提琴 https://jsfiddle.net/SimonPrice/t2aju3c6/77/

MVC 5 剃刀部分

<div class="row">
    <div id="divOrderedLines" class="col-md-6 col-sm-6 col-xs-6" hidden>
        <div class="panel panel-default">
            <div class="panel-heading">OrderedLines</div>
            <div class="panel-body">
                @Html.Partial("_orderedLines")
            </div>
        </div>
    </div>

    <div id="divProductLines" class="col-md-12 col-sm-12 col-xs-12">

        <div class="panel panel-default">
            <div class="panel-heading">Product Lines</div>
            <div class="panel-body">
                @Html.Partial("_productLines")
            </div>
        </div>
    </div>

</div>

有序行\拖放\可拖放网格

@(Html.Kendo().Grid<zzzViewModel>
      ()
      .Name("epsGrid")
      .Columns(columns =>
      { 
          //Columns removed 
          columns.Bound(c => c.ProductCode).HtmlAttributes(new { @class = "drop-target" });
      })
      .Events(evt => evt.DataBound("fe_rxManager.SetEpsTableOptions"))
      .Events(evt => evt.Change("fe_rxManager.styleColumn"))
      .Pageable(pageable => pageable
          .Refresh(true)
          .PageSizes(true)
          .ButtonCount(5)
      )
      .ToolBar(toolbar =>
      {
          toolbar.Template(@<text><button id="btnNewOrder" class="btn btn-default" disabled="disabled">New Order <i class="fa fa-plus"></i></button></text>);
      })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Ordered_Read", "RxManager"))
            .PageSize(20)
        )
)

产品线\可拖动网格

@(Html.Kendo().Grid<xxxViewModel>
      ()
      .Name("rxGrid")
      .Columns(columns =>
      {
          columns.Bound(c => c.OrderId).Visible(false);
          columns.Bound(c => c.LineID).Visible(false);
          columns.Bound(c => c.ProductCode).HtmlAttributes(new { @class= "product-code" });
          columns.Bound(c => c.Quantity);
          columns.Bound(c => c.CPQuantity);
          columns.Bound(c => c.PQuantity);
          columns.Bound(c => c.Description);
          columns.Bound(c => c.OnHandQuantity);
      })
      .Events(evt => evt.DataBound("fe_rxManager.rxLinesDataChanged"))
      .Pageable(pageable => pageable
          .Refresh(true)
          .PageSizes(true)
          .ButtonCount(5)
      )
      .Editable(m => m.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
      //.BindTo(@Model.xxxLines)
      .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Product_Read", "RxManager").Data("fe_rxManager.xxxLines_Read_AdditionalData"))
                .Model(model =>
                {
                    model.Id(l => l.xxxLineID);
                    model.Field(p => p.ProductCode).Editable(false);
                    model.Field(p => p.Description).Editable(false);
                    model.Field(p => p.Quantity).Editable(false);
                    model.Field(p => p.CPQuantity).Editable(false);
                    model.Field(p => p.PQuantity).Editable(true);
                    model.Field(p => p.PQuantityPrice).Editable(false);
                    model.Field(p => p.OnHandQuantity).Editable(false);

                })
          .PageSize(20)
      ))

Typscript \ JavaScript \ JQuery

SetEpsTableOptions = (e: any) => {
        this.dragAndDrop();
        this.hideLastColumn(); // Dont worry about this
        this.styleColumn(e);   // Dont worry about this 
    }

    dragAndDrop = () => {

        var rxGrid = $("#rxGrid").data("kendoGrid") as any;
        rxGrid.table.kendoDraggable({
            filter: "tbody > tr",
            group: "gridGroup",
            threshold: 100,
            hint(e) {
                var dataItem = rxGrid.dataItem(e);
                return $('<div class="hint">' + dataItem.ProductCode + '</div>').css({ marginLeft: e.clientX, marginTop: e.clientY });
            }
        });

        var epsGrid = $("#epsGrid").data("kendoGrid") as any;
        epsGrid.table.kendoDropTarget({
            group: "gridGroup",
            drop(e) {
                e.draggable.hint.hide();

                var dest = $(document.elementFromPoint(e.clientX, e.clientY));
                var row = dest.closest('tr');
                var uid = row[0].dataset.uid;
                $.each(epsGrid.dataSource.data(),
                    (idx, gridrow) => {
                        if (gridrow.uid === uid) {
                            var dataItem = epsGrid.dataSource.get(gridrow.id);
                            dataItem.set("ProductCode", e.draggable.hint[0].innerHTML);
                        }
                    });

            }
        });

    }

希望这篇文章可以帮助一些人。请随时留下积极的 cmets，这可能有助于改进这篇文章。

【讨论】：