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

问题描述 投票：1回答：1

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

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

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

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

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

Kendo自己，不可否认的是，有一段时间回来说这不支持，但产生了一个小提琴，允许拖放细胞重新排序行，这就是它。

他们也从未为ASP.Net MVC制作过任何场景。

javascript jquery asp.net-mvc kendo-ui kendo-grid
1个回答
1
投票

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

由于我的项目是如何组织的并且正在使用Typescript，因此MVC版本不会精确到1：1，但会足够接近某人。

关于这一点的一些注意事项是，当您拿起物品时，您可以点击该行的任何位置。 （如果有人可以改进这个，请发一个答案，我会测试，如果它有效，我会upvote并将你的答案与工作代码结合起来。

除了上述内容之外，您拾取的dataItem将在相对于鼠标所在位置拾取。这个我会随着时间的推移而修复，但如果有人在我之前得到这个，请按上述方式自由。

第一，

最后

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 Razor Partial

<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>

有序线\ Dropping \ Droppable Grid

@(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)
      ))

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

            }
        });

    }

希望这篇文章可以帮助一些人。请随时留下积极的评论，可以帮助改善这篇文章。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.