Question

使用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; }
    }

GRID1

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

GRID2

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

Answer 1

试试这个，这只是一个例子

我的观点

 @(Html.Kendo().Grid<TwoModelInSinglePageModel.SampleModel>()
    .Name("grid12")
    .Columns(columns =>
    {
        columns.Bound(p => p.studentclass).HeaderTemplate("<input id='selectall' class='chkbxq' type='checkbox'  />").ClientTemplate("<input id='checkbox_#=inx#' class='chkbxq' type='checkbox' />");
        columns.Bound(p => p.SampleDescription);
        columns.Bound(p => p.SampleCode);
        columns.Bound(p => p.SampleItems);
    })
     // .ClientDetailTemplateId("client-template")
        // .AutoBind(true)
        .Pageable()
            .Navigatable()
        //.Filterable()
             .Sortable()
             .Groupable()
        //.Events(events => events.DataBound("_GridItemDataBound"))
       .DataSource(dataSource => dataSource
        .Ajax()
            .Model(model => model.Id(p => p.inx))
           //.PageSize(1)
            .Read(read => read.Action("Read", "Test"))
     )
  )


 <div id="divasd">
    </div>

<强>脚本

<script type="text/javascript">
    $(document).ready(function () {

 $('#grid12').on("click", ".chkbxq", function (e) {
                    var selectedTd = $(this).is(':checked');

                    var rowIndex = $(this).parent().index();
                    var cellIndex = $(this).parent().parent().index();
                    var grid = $("#grid12").data("kendoGrid");
                    var datatItem = grid.dataItem(grid.tbody.find('tr:eq(' + cellIndex + ')'));

                    if (selectedTd == true) {
                        sampleItem = datatItem.SampleItems;
                        sampleCode = datatItem.SampleCode;
                        sampledescription = datatItem.SampleDescription;

                        datavalueitem = sampleItem + "--" + sampleCode + "--" + sampledescription;

                        $.ajax({
                            url: '@Url.Action("NewGridView", "Test")',
                            type: "Post",
                            data: { sampleItem: sampleItem, sampleCode: sampleCode, sampledescription: sampledescription },
                            dataType: 'json',
                            success: function (result) {

                                $("#mygrid").val(null);
                                var customDataList = $('#grid');
                                customDataList.empty();
                                customDataList.append(result.Data);
                                customDataList.append(result.Data);
                                $("#divasd").html('');
                                $("#divasd").append(result.Data);



                                $('#grid12').data("kendoGrid").dataSource.read();
                                $('#grid12').data("kendoGrid").refresh();
                                                                $("#divasd").kendoGrid({
                                                                    dataSource: result,
                                                                    sortable: true,
                                                                    pageable: {
                                                                        refresh: true,
                                                                        pageSizes: true
                                                                    },
                                                                    columns: [{
                                                                        field: "SampleDescription",
                                                                        width: 90,
                                                                    }, {
                                                                        field: "SampleCode",
                                                                        width: 90,
                                                                    }, {
                                                                        width: 100,
                                                                        field: "SampleItems"
                                                                    }
                                                                ]
                                                                });


                            }
                        });
                    }


                });

   });
</script>

<强>模型

 public class SampleModel
    {
        public int inx { get; set; }
        public bool studentclass { get; set; }
        public string SampleDescription { get; set; }
        public string SampleCode { get; set; }
        public string SampleItems { get; set; }
}

新网格在checkBox上绑定检查不在Buttonclick中。

使用MVVM，AJAX的Kendo Grid - 使用网格进行操作

1 个答案: