Add Selected Kendo Grid items to another Grid

Question

I have two Kendo Grids in my Page. One of them is bound to ASP.NET MVC action. Multiple Section is enable. I want to Add Selected Grid items to my Second Grid.

<div id="grid1"></div> -- This Grid holds Master Data
<div id="grid2"></div> -- This Grid should hold Selected items of Grid One

$("#grid1").kendoGrid({

    sortable: true,
    selectable: "multiple row",
    pageable: true,
    change: onchange  ,
    filterable: true,
    dataSource: {
        transport: {
            read: "/Home/getPeople",
            datatype: "json"
        },
        pageSize:10
    },
    columns: [
        { field: "Id", title: "Id", template: '<input id=\'#=Id#\' class="personId" type=\"checkbox\"/>' },
        { field:"FirstName", title:"First Name",sortable:true },
        { field:"MiddleName", title:"Middle Name", sortable:true },
        { field: "LastName", title: "LastName", sortable: true },
    ]
});

$("#grid2").kendoGrid({

    sortable: true,
    selectable: "multiple row",
    pageable: true,
    filterable: true,
    dataSource: { -- Here i need to bind it with the selected items of Grid1.

    },
    columns: [
        { field: "Id", title: "Id", template: '<input id=\'#=Id#\' class="personId" type=\"checkbox\"/>' },
        { field: "FirstName", title: "First Name", sortable: true },
        { field: "MiddleName", title: "Middle Name", sortable: true },
        { field: "LastName", title: "LastName", sortable: true },
    ]
});

function onchange() {   
    var text = "";
    var grid = this;                

    grid.select().each(function() {
        var dataItem = grid.dataItem($(this));
        text += "First Name is: " + dataItem.FirstName + "\n";

        alert(text);
    });



}   

    ----I am capturing onChange event to Alert it's value but could not firgure out how it can be added to Grid2 and how on Submit i can only POST items that exist in Grid

   </script>