@{
    ViewBag.Title = "Home Page";
}

<div class="row">
    <div class="col-12">
        @(Html.Kendo().Grid<KendoGridMasterDetailGridsCheckBoxSelection.Models.OrderViewModel>()
            .Name("grid1")
            .Columns(columns =>
            {
                columns.Select();
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.Freight);
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity);
            })
            .Height(250)
            .Selectable(s=>s.Mode(GridSelectionMode.Multiple))
            .Events(e => e.Change("hideItems"))
            .Sortable()
            .Scrollable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Orders_Read", "Grid"))
            )
        )
        <br />
        <br />
        @(Html.Kendo().Grid<KendoGridMasterDetailGridsCheckBoxSelection.Models.OrderViewModel>()
            .Name("grid2")
            .Columns(columns =>
            {
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.Freight);
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity);
            })
            .Height(250)
            .Selectable(s=>s.Mode(GridSelectionMode.Multiple))
            .Events(e => e.DataBound("hideItems"))
            .Sortable()
            .Scrollable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Orders_Read", "Grid"))
            )
        )
    </div>
</div>
<script>
    function hideItems(e) {
        var grid1 = $("#grid1").data().kendoGrid;
        var grid2 = $("#grid2").data().kendoGrid;

        var selectedItems = $("#grid1").data().kendoGrid.select();
        var grid2Items = $("#grid2").data().kendoGrid.items();

        for (var i = 0; i < grid2Items.length; i++) {
            grid2Items.eq(i).hide();

            selectedItems.each(function (index, el) {
                var grid1Item = grid1.dataItem(this);
                var grid2Item = grid2.dataItem(grid2Items[i]);

                if (grid1Item.OrderID == grid2Item.OrderID) {
                    grid2Items.eq(i).show();
                    return false;
                }
            });
        }
    }
</script>
