使用 KendoUI MVVM 寻找解决方案: 有两个网格 - 第一个网格中的数据从控制器的操作返回,例如 GetData()。该网格有一列带有复选框。用户可以通过选中复选框来选择第一个网格中的行。单击按钮时 - 从第一个网格中选择的所有行都应添加到第二个网格。第二个网格多出 3 列,其他列与第一个网格中的列非常相似。请有人对此发布解决方案。相当紧急。
public class MyModel
{
public string CustomerID { get; set; }
public string CustomerName { get; set; }
public bool? ChooseItem { get; set; }
public int Quantity{ get; set; }
}
网格1
@(Html.Kendo().Grid<MyModel>
()
.Name("grid1")
.Columns(columns =>
{
columns.Bound(p => p.CustomerID).Filterable(false).Title("<b>CustID</b>").Width(170);
columns.Bound(p => p.CustomerName).Title("<b>Description</b>").Width(250);
columns.Bound(p => p.ChooseItem)
.ClientTemplate("<input type='checkbox' id='rowSelected' />");
})
.Selectable()
.Pageable()
.Sortable(x => x.SortMode(GridSortMode.SingleColumn))
.Scrollable()
.HtmlAttributes(new Dictionary<string, object> { { "data-bind", "source: gridSource1" } })
.EnableCustomBinding(true)
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(15)
.Read(read => read.Action("GetData", "Home"))
)
)
<button id="btnAddMulti" type="button">Add LineItem </button>
网格2
@(Html.Kendo().Grid<MyModel>
()
.Name("grid2")
.Columns(columns =>
{
columns.Bound(p => p.CustomerID).Filterable(false).Title("<b>CustID</b>").Width(170);
columns.Bound(p => p.CustomerName).Title("<b>Description</b>").Width(250);
columns.Bound(p => p.Quantity)
.ClientTemplate("<input type='text' id='itemQty' />");
columns.Bound(p => p.CustomerID)
.ClientTemplate("<input type='button' id='btnAdd' />");
columns.Bound(p => p.CustomerID)
.ClientTemplate("<input type='button' id='btnDelete' />");
})
.Scrollable()
.HtmlAttributes(new Dictionary<string, object> { { "data-bind", "source: gridSource2" } })
.EnableCustomBinding(true)
)
)
var viewModel = kendo.observable({
gridSource1: [],
gridSource2: [],
})
$('#btnAddMulti').click(function () {
var sourcegrid = $('#grid1').data('kendoGrid');
var destinationgrid = $('#grid2').data('kendoGrid');
//ToDo: copy all the rows in destinationgrid which are marked checked in sourcegrid