-1

KendoUI MVVM を使用してこれに関する解決策を探す: 2 つのグリッドがあります。最初のグリッドのデータは、GetData() などのコントローラーのアクションから返されます。このグリッドには、チェックボックス付きの列があります。ユーザーは、チェックボックスをオンにして、最初のグリッドの行を選択できます。ボタンをクリックすると、最初のグリッドから選択されたすべての行が 2 番目のグリッドに追加されます。2 番目のグリッドにはさらに 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
4

1 に答える 1

0

このようにしてみてください。これは単なる例です

私の見解

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

New Grid は、Buttonclick ではなく checkBox Check にバインドされます。

于 2013-09-16T07:54:38.163 に答える