This is a migrated thread and some comments may be shown as answers.

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

10 Answers 13 Views
Checkbox
This is a migrated thread and some comments may be shown as answers.
Wassim
Top achievements
Rank 1
Veteran
Iron
Wassim asked on 30 Dec 2020, 09:34 AM

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.

10 Answers, 1 is accepted

Sort by
0
Wassim
Top achievements
Rank 1
Veteran
Iron
answered on 30 Dec 2020, 12:36 PM

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.

 

 

0
Eyup
Telerik team
answered on 01 Jan 2021, 08:47 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Wassim
Top achievements
Rank 1
Veteran
Iron
answered on 01 Jan 2021, 12:30 PM

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));
}
     }
 

 

 

 

 

0
Eyup
Telerik team
answered on 05 Jan 2021, 11:13 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Wassim
Top achievements
Rank 1
Veteran
Iron
answered on 05 Jan 2021, 11:21 AM

Hi Eyup,

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

Thanks.

0
Wassim
Top achievements
Rank 1
Veteran
Iron
answered on 06 Jan 2021, 04:12 PM

Hello Eyup,

I'm still waiting for your sample.

Thanks!

Regards.

0
Eyup
Telerik team
answered on 07 Jan 2021, 07:54 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Wassim
Top achievements
Rank 1
Veteran
Iron
answered on 07 Jan 2021, 08:05 AM

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/


0
Eyup
Telerik team
answered on 11 Jan 2021, 05:40 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Accepted
Eyup
Telerik team
answered on 14 Jan 2021, 04:37 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Checkbox
Asked by
Wassim
Top achievements
Rank 1
Veteran
Iron
Answers by
Wassim
Top achievements
Rank 1
Veteran
Iron
Eyup
Telerik team
Share this question
or