Question

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

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

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

我现在需要用网格B中单元格Y的数据填充网格A中的单元格x。在当前的Windows（WinForms）应用程序中，用户可以使用拖放功能。

问题： Kendo Grids不容易提供拖放功能。

肯多（Kendo）自己，很久以前说过，它不受支持，但是产生了一个提琴，它允许拖放单元格来对行进行重新排序，仅此而已。

他们也从未为ASP.Net MVC编写过任何方案。

Answer 1

因为这是我需要的东西，而且似乎也是其他人可能正在搜索的东西，所以您将在此处下面的代码中看到该信息，以帮助\处于我位置的人以及Kendo UI的摆弄。，以及MVC示例。

由于我的项目的组织方式和使用Typescript的原因，MVC版本不会精确到1：1，但足够接近以供其他人关注。

关于此的一些注意事项是，当您拿起物品时，可以单击行上的任何位置。（如果有人可以对此进行完善，请发布答案，我会进行测试，如果可以，我会投票赞成，还将您的答案与工作代码合并。

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

首先

Kendo用户界面代码

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);
                        }
                    });

            }
        });

    }

希望这篇文章可以对一些人有所帮助。请随时发表正面评论，这可能有助于改善此帖子。

Kendo Grid：将单元格数据从一个网格拖放到另一个网格

1 个答案: