將選定的行從一個Kendo UI Grid添加到另一個

Question

在我的asp.net MVC 4應用程序中，我有一個包含兩個Kendo UI網格的View。其中一個包含產品列表及其屬性。我希望另一個具有完全相同的列，但是是空的。

當我在第一個Grid上選擇一行時，我希望它從第一個Grid上移除並添加到第二個Grid上。我也希望能夠從第二個刪除行並將它們添加回第一個行。我不知道該怎麼做。這裏是有一個回答我的問題，但我希望能夠實現這個使用劍道UI asp.net MVC包裝：

Kendo UI copying data through controls

我有一個視圖模型是這樣的：

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

你可以做到這一點通過添加兩個按鈕，一個是將產品添加到selectedproductsgrid，另一個從它刪除項目，並將其命名addProduct命令，RemoveProduct，使電網多選再加入下面的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 2

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