check one or more rows from one GridView and display it/them in another GridView in the same page

[Wassim]

Hi,

In order to select one or more rows from one GridView and display it/them in another GridView to do some processing.

How can I handle this?

here is my code: 

@(Html.Kendo().Grid<mySolution.Models.EmployeeModel>()

                                                            .Name("EmployeeGrid")              

                                                            .Columns(columns =>

                                                            {

                                                                columns.Select();

                                                                columns.Bound(p => p.EMP_FIRSTNAME).Title("First Name");

                                                                columns.Bound(p => p.EMP_LASTNAME).Title("Last Name");

                                                                columns.Bound(p => p.EMP_AGE).Title("Age")

                                                                columns.Bound(p => p.EMP_CATREGORY).Title("Category");

                                      

                                                                    })

                                                            .ToolBar(toolbar =>

                                                            {

                                                                toolbar.Custom().Text("   Proceed").Action("TreatmentAction", "Employee").HtmlAttributes(new { id = "proceedBtn", @class = "btn btn-primary" });

                                                            })

                                                            .Resizable(resize => resize.Columns(true))

                                                            .Pageable()

                                                            .Sortable()

                                                            .DataSource(dataSource => dataSource

                                                            .Ajax()

                                                            .Batch(true)

                                                            .AutoSync(true)

                                                            .PageSize(5)

                                                            .Events(events => events.Error("error_handler"))

                                                            .Model(model => model.Id(p => p.EMP_ID))

                                                            .Read(read => read.Action("Employee_ReadAsync", "Employee"))

                                                            )

                      )


 

the other GridView is almost with the same columns but without "columns.Select();"

if I check one row or multiple rows  from the first GridView, it should be displayed in the second GridView

Also, if I uncheck one row or multiple rows  from the first GridView, it should be not displayed in the second GridView.

Any suggestions please to do this? 

Thanks.

[Wassim]

here is my second GridView:

@(Html.Kendo().Grid<mySolution.Models.EmployeeModel>()
                                                            .Name("EmployeeSecondGrid")
                                                            .Columns(columns =>
                                                            {
                                                                columns.Bound(p => p.EMP_FIRSTNAME).Title("First Name");
                                                                columns.Bound(p => p.EMP_LASTNAME).Title("Last Name");
                                                                columns.Bound(p => p.EMP_AGE).Title("Age")
                                                                columns.Bound(p => p.EMP_CATREGORY).Title("Category");

                                                                    })
                                                            .Resizable(resize => resize.Columns(true))
                                                            .Pageable()
                                                            .Sortable()
                                                            .DataSource(dataSource => dataSource
                                                            .Ajax()
                                                            .Batch(true)
                                                            .AutoSync(true)
                                                            .PageSize(5)
                                                            .Events(events => events.Error("error_handler"))
                                                            )
                      )

 

 

I added an event in my first Grid View:

 .Events(events => events
              .Change("gridRowChange")
)

In my script section: 

   function gridRowChange() {

        var grid = $('#EmployeeGrid').data('kendoGrid');
        var selectedRows = grid.select();

        var selectedDataItems = $.map(selectedRows, function (row) {
            //console.log(row);
            return grid.dataItem(row);
        });

//code to append checked rows from the first grid to the second ???

    }

with that I can retrieve rows but the worries I'am unable to add/remove rows in the second GridView.

 

 

[Eyup]

Hi Wassim,

 

This requirement is possible and you can use the following approach to achieve it:
https://stackoverflow.com/a/36090668/6509119

Alternatively, you can bind the same datasource to both of the grids and when the user makes a selection in the first one, you can traverse the second grid records and hide the non-selected ones:
https://api.jquery.com/hide/

Let me know if you prefer this approach and I will prepare a demonstration sample.

 

Regards,
Eyup
Progress Telerik

[Wassim]

Thanks for replying.

you will find attached my demonstration.
What I wanted to do is:
I have a grid master with some elements.
1- when I check one or more rows, these elements must be displayed in the second (while keeping these elements in the first grid)
2- if I uncheck one or more rows of the 1st, these elements must be disappear in the second (while keeping these elements in the first grid too)

that's what I would like to do.
I created a function which allows to retrieve the checked items from the 1st grid, but I can't handle to manage it.
Thank you to check out the example.

MyView.cshtml

<div class="row">
    <div class="col-12">
        <h3>My First Grid</h3>
        @(Html.Kendo().Grid<TelerikMvcApp.Models.EmployeeModel>()
                                    .Name("EmployeeGridMaster")
                                    .Events(events => events
                                        .Change("gridRowChange")
                                    )
                                    .Columns(columns =>
                                    {
                                        columns.Select();
                                        columns.Bound(p => p.EMP_FIRSTNAME).Title("First Name");
                                        columns.Bound(p => p.EMP_LASTNAME).Title("Last Name");
                                        columns.Bound(p => p.EMP_AGE).Title("Age");
                                        columns.Bound(p => p.EMP_CATREGORY).Title("Category");
                                    })
                                    .Resizable(resize => resize.Columns(true))
                                    .Pageable()
                                    .Sortable()
                                    .HtmlAttributes(new { style = "height:350px;" })
                                    .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Batch(true)
                                    .AutoSync(true)
                                    .PageSize(5)
                                    .Events(events => events.Error("error_handler"))
                                    .Model(model => model.Id(p => p.Emp_ID))
                                    .Read(read => read.Action("Employee_ReadAsync", "Employee"))
                                    )
        )
    </div>
</div>

<div class="row">
    <div class="col-12">
        <h3>My Second Grid</h3>
        @(Html.Kendo().Grid<TelerikMvcApp.Models.EmployeeModel>()
                                            .Name("EmployeeGridSlave")
                                            .Columns(columns =>
                                            {
                                                columns.Bound(p => p.EMP_FIRSTNAME).Title("First Name");
                                                columns.Bound(p => p.EMP_LASTNAME).Title("Last Name");
                                                columns.Bound(p => p.EMP_AGE).Title("Age");
                                                columns.Bound(p => p.EMP_CATREGORY).Title("Category");
                                            })
                                            .Resizable(resize => resize.Columns(true))
                                            .Pageable()
                                            .Sortable()
                                            .HtmlAttributes(new { style = "height:250px;" })
                                            .DataSource(dataSource => dataSource
                                            .Ajax()
                                            .Batch(true)
                                            .AutoSync(true)
                                            .PageSize(5)
                                            .Events(events => events.Error("error_handler"))
                                            )
        )
    </div>
</div>




<script type="text/javascript">

    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    function gridRowChange() {

        var grid = $('#EmployeeGridMaster').data('kendoGrid');
        var selectedRows = grid.select();

        var selectedDataItems = $.map(selectedRows, function (row) {
            return grid.dataItem(row);
        });

        // How can I add checked rows from the first grid to the second grid
        //OR remove unchecked rows of the first grid in the second grid ??

    }


</script>

 

EmployeeModel.cs

public class EmployeeModel
   {
       public int Emp_ID  { get; set; }
       public string EMP_FIRSTNAME { get; set; }
       public string EMP_LASTNAME { get; set; }
       public int EMP_AGE { get; set; }
       public string EMP_CATREGORY { get; set; }
   }

 

EmployeeConroller.cs

public partial class EmployeeController : Controller
    {
public ActionResult Employee_ReadAsync([DataSourceRequest]DataSourceRequest request)
{
var result = Enumerable.Range(0, 50).Select(i => new EmployeeModel
{
Emp_ID = i,
EMP_FIRSTNAME = "First Name " + i,
EMP_LASTNAME ="Last Name "+ i,
EMP_AGE = i * 10,
                EMP_CATREGORY = "Category " + i
});

return Json(result.ToDataSourceResult(request));
}
    }

 

 

 

 

[Eyup]

Hello Wassim,

 

I can prepare a working sample to achieve this entirely on client-side (without going to the server) and send it to you. Let me know if a full client-side solution is suitable for your project and I will proceed with creating the sample.

 

Regards,
Eyup
Progress Telerik

[Wassim]

Hi Eyup,

Yes. it suits me much. It would be much appreciated.

Thanks.

[Wassim]

Hello Eyup,

I'm still waiting for your sample.

Thanks!

Regards.

[Eyup]

Hi Wassim,

 

Here is the working solution:
https://dojo.telerik.com/amUVireZ/9

The JavaScript logic would be the same for your MVC projec. Feel free to give it a try and let me know about the result.

 

Regards,
Eyup
Progress Telerik

[Wassim]

Hi Eyup,
Thanks for replying. But this is not what i'm looking for as a result.

Please check what I put as an explanation.

I want a Telerik UI for asp.net mvc sample same as this logic: https://jsfiddle.net/u9tcz6s0/1/

[Eyup]

Hello Wassim,

 

I see. I will prepare a runnable working sample in MVC as depicted and send it to you in the upcoming days.

Thank you for your patience in advance.

 

Regards,
Eyup
Progress Telerik

[Eyup]

Hi Wassim,

 

I've prepared a full working MVC sample with checkboxes. Feel free to run it and verify that it works as expected on your side.

Do not hesitate to share any comments or additional instructions.

 

Regards,
Eyup
Progress Telerik