Question

在我的asp.net MVC 4应用程序中，我有一个带有两个Kendo UI网格的视图。其中一个包含具有其属性的产品列表。我希望另一个拥有完全相同的列，但是为空。

当我在第一个网格上选择一行时，我希望将其从第一个网格中删除并添加到第二个网格中。我还希望能够从第二个中删除行并将它们添加回第一个行。我不知道如何做到这一点。这里有我的问题的答案，但我希望能够使用Kendo UI asp.net MVC包装器实现这一点：

Kendo UI copying data through controls

我有一个像这样的ViewModel：

public class SelectProductsViewModel
{
    public IEnumerable<Product> Products { get; set; }
    public IEnumerable<Product> SelectedProducts { get; set; }
}

我的控制器操作如下所示：

public ActionResult SelectProducts()
{
    var viewModel = new SelectProductViewModel
    {
        Products = GetProducts(), // Get Products form the database
        SelectedProducts = new List<Product>()
    }

    return View(viewModel);
}

而且，我的观点中有以下内容：

@(Html.Kendo().Grid(Model.Products)
    .Name("productsgrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.Color);
        columns.Bound(p => p.Size);
        columns.Bound(p => p.Price);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetProducts", "Product"))
        .Model(model =>
        {
            model.Id("ProductID");
        })
    )
)

@(Html.Kendo().Grid(Model.SelecteProducts)
    .Name("selectedproductsgrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.Color);
        columns.Bound(p => p.Size);
        columns.Bound(p => p.Price);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => new DataSource())
)

Answer 1

var userListGrid = $("#grid1").data("kendoGrid");
var selectedUserListGrid = $("#grid2").data("kendoGrid");

//Clear data.
$("#grid2").data('kendoGrid').dataSource.data([]);

for (var i = 0; i < userListGrid._data.length; i++) {

    var dataitem = userListGrid._data[i];
    //Some condition before add [IsChecked is a model property]
    if (dataitem.IsChecked == true) {
        selectedUserListGrid.dataSource.add(dataitem);
    }
}

Answer 2

你可以通过添加两个按钮来添加产品到selectedproductsgrid，另一个用于从中删除项目并将它们命名为AddProduct，RemoveProduct并在网格中启用multiselect，然后添加以下javascript代码：

function moveTo(from, to) {
var selecteddataset = to.dataSource._data;
var selected = $.map(from.select(), function (item) {
    var curuid = $(item).data("uid");
    var item = from.dataSource.getByUid(curuid);
    var isFound = false;
    for (var i = 0; i < selecteddataset.length; i++) {
        if (selecteddataset[i].uid == curuid) {
            isFound = true;
            break;
        }
    }
    if (isFound == false) {
        to.dataSource.add(item);
        //To add the selected one to SelectedProducts list in server code.
        var url = '@Url.Action("AddSelectedProduct", "Home")';
        $.post(url, { ProductName: item.ProductName, Color: item.Color, Size: item.Size }, function (result) {
        });
    }
});}

$("#AddProduct").click(function (e) {
    var productsList = $("#productsgrid").data("kendoGrid");
    var productsSelectedList = $("#selectedproductsgrid").data("kendoGrid");
    moveTo(productsList , productsSelectedList );
    e.preventDefault();
});

$("#RemoveProduct").click(function (e) {
    var productsSelectedList = $("#selectedproductsgrid").data("kendoGrid");
    var selected = $.map(productsSelectedList .select(), function (item) {
        var curuid = $(item).data("uid");
        var item = productsSelectedList.dataSource.getByUid(curuid);
        productsSelectedList .dataSource.remove(item);
        //To remove the selected from SelectedProducts datasource in server code
        var url = '@Url.Action("RemoveSelectedProduct", "Home")';
        $.post(url, { ProductName: item.ProductName }, function (result) {
        });

    });

    e.preventDefault();
});

动作功能：

public ActionResult AddSelectedProduct(string ProductName, string Color, string Size)
    {
        //Some functions to add to SelectedProducts list.
        return Content("");
    }

public ActionResult RemoveSelectedProduct(string ProductName)
    {
        //Search by product name in SelectedProducts and remove it.
        return Content("");
    }

，var curuid = $(item).data("uid");将获取每个选定行的ID

Answer 3

我有同样的情况。我已经用下面的代码解决了：

 var selectedDepartments = [];
    $('#dptSelect').click(function (e) {
        var rows = $("#department").data("kendoGrid").select();

        rows.each(function () {
            var grid = $("#department").data("kendoGrid");
            var dataItem = grid.dataItem(this);
            if (!selectedDepartments.includes(dataItem)) {
                 selectedDepartments.push(dataItem);
            }
            console.log(dataItem);
        })

        var selDpt = new kendo.data.DataSource({
            data: selectedDepartments,
        });

        var selGrid = $("#selected_department").data("kendoGrid");
        selGrid.setDataSource(selDpt);


    });

    $('#dptDeselect').click(function (e) {
        var rows = $("#selected_department").data("kendoGrid").select();

        rows.each(function () {
            var grid = $("#selected_department").data("kendoGrid");
            var dataItem = grid.dataItem(this);

            var idx = selectedDepartments.indexOf(dataItem);
            selectedDepartments.splice(idx, 1);
            console.log(dataItem);
        })

        var selDpt = new kendo.data.DataSource({
            data: selectedDepartments,
             });
        var selGrid = $("#selected_department").data("kendoGrid");
        selGrid.setDataSource(selDpt);
    });

将选定的行从一个Kendo UI Grid添加到另一个

3 个答案: