Add selected rows from one Kendo UI Grid to another

Question

In my asp.net MVC 4 application, I have a View with two Kendo UI Grids. One of them contains a list of Products with their attributes. I want the other one to have the exact same columns, but empty.

When I select a row on the first Grid, I want it to be removed from the first one and added to the second one. I also want to be able to remove rows from the second one and add them back to the first one. I don't know how to accomplish that. Here is there is an answer to my question, but I want to be able to implement this using Kendo UI asp.net MVC wrappers:

Kendo UI copying data through controls

I have a ViewModel like this:

public class SelectProductsViewModel
{
    public IEnumerable<Product> Products { get; set; }
    public IEnumerable<Product> SelectedProducts { get; set; }
}

My Controller Action looks like this:

public ActionResult SelectProducts()
{
    var viewModel = new SelectProductViewModel
    {
        Products = GetProducts(), // Get Products form the database
        SelectedProducts = new List<Product>()
    }

    return View(viewModel);
}

And, here is what I have in my View:

@(Html.Kendo().Grid(Model.Products)
    .Name("productsgrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.Color);
        columns.Bound(p => p.Size);
        columns.Bound(p => p.Price);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetProducts", "Product"))
        .Model(model =>
        {
            model.Id("ProductID");
        })
    )
)

@(Html.Kendo().Grid(Model.SelecteProducts)
    .Name("selectedproductsgrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.Color);
        columns.Bound(p => p.Size);
        columns.Bound(p => p.Price);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => new DataSource())
)

Answer 1

var userListGrid = $("#grid1").data("kendoGrid");
var selectedUserListGrid = $("#grid2").data("kendoGrid");

//Clear data.
$("#grid2").data('kendoGrid').dataSource.data([]);

for (var i = 0; i < userListGrid._data.length; i++) {

    var dataitem = userListGrid._data[i];
    //Some condition before add [IsChecked is a model property]
    if (dataitem.IsChecked == true) {
        selectedUserListGrid.dataSource.add(dataitem);
    }
}

Answer 2

You can do it by add two buttons one for add products to selectedproductsgrid and another to remove items from it and name them AddProduct, RemoveProduct and enable multiselect in grid then add the following javascript code:

function moveTo(from, to) {
var selecteddataset = to.dataSource._data;
var selected = $.map(from.select(), function (item) {
    var curuid = $(item).data("uid");
    var item = from.dataSource.getByUid(curuid);
    var isFound = false;
    for (var i = 0; i < selecteddataset.length; i++) {
        if (selecteddataset[i].uid == curuid) {
            isFound = true;
            break;
        }
    }
    if (isFound == false) {
        to.dataSource.add(item);
        //To add the selected one to SelectedProducts list in server code.
        var url = '@Url.Action("AddSelectedProduct", "Home")';
        $.post(url, { ProductName: item.ProductName, Color: item.Color, Size: item.Size }, function (result) {
        });
    }
});}

$("#AddProduct").click(function (e) {
    var productsList = $("#productsgrid").data("kendoGrid");
    var productsSelectedList = $("#selectedproductsgrid").data("kendoGrid");
    moveTo(productsList , productsSelectedList );
    e.preventDefault();
});

$("#RemoveProduct").click(function (e) {
    var productsSelectedList = $("#selectedproductsgrid").data("kendoGrid");
    var selected = $.map(productsSelectedList .select(), function (item) {
        var curuid = $(item).data("uid");
        var item = productsSelectedList.dataSource.getByUid(curuid);
        productsSelectedList .dataSource.remove(item);
        //To remove the selected from SelectedProducts datasource in server code
        var url = '@Url.Action("RemoveSelectedProduct", "Home")';
        $.post(url, { ProductName: item.ProductName }, function (result) {
        });

    });

    e.preventDefault();
});

The actions functions:

public ActionResult AddSelectedProduct(string ProductName, string Color, string Size)
    {
        //Some functions to add to SelectedProducts list.
        return Content("");
    }

public ActionResult RemoveSelectedProduct(string ProductName)
    {
        //Search by product name in SelectedProducts and remove it.
        return Content("");
    }

and the var curuid = $(item).data("uid"); will get the id of every selected row

Answer 3

I've had same case may be. I've solved with this code below:

 var selectedDepartments = [];
    $('#dptSelect').click(function (e) {
        var rows = $("#department").data("kendoGrid").select();

        rows.each(function () {
            var grid = $("#department").data("kendoGrid");
            var dataItem = grid.dataItem(this);
            if (!selectedDepartments.includes(dataItem)) {
                 selectedDepartments.push(dataItem);
            }
            console.log(dataItem);
        })

        var selDpt = new kendo.data.DataSource({
            data: selectedDepartments,
        });

        var selGrid = $("#selected_department").data("kendoGrid");
        selGrid.setDataSource(selDpt);


    });

    $('#dptDeselect').click(function (e) {
        var rows = $("#selected_department").data("kendoGrid").select();

        rows.each(function () {
            var grid = $("#selected_department").data("kendoGrid");
            var dataItem = grid.dataItem(this);

            var idx = selectedDepartments.indexOf(dataItem);
            selectedDepartments.splice(idx, 1);
            console.log(dataItem);
        })

        var selDpt = new kendo.data.DataSource({
            data: selectedDepartments,
             });
        var selGrid = $("#selected_department").data("kendoGrid");
        selGrid.setDataSource(selDpt);
    });