using checkboxes for row selection

1 Answer 2250 Views
Grid
Joe
Top achievements
Rank 1
Joe asked on 31 Jan 2017, 07:42 PM

I'm putting together a grid which displays results for a document search.  In the grid itself, instead of showing the row Id, I have a checkbox.  What I'd like to do is twofold:

1. Add a check box column header that'll select all rows when checked (I've seen examples that use a specific boolean field, which my grid doesn't have nor use...  I just want to go through each row displayed and check the checkbox, but it is not dependent upon any other column.

2. Get all the selected row IDs to pass into a controller.  Not really pertinent, but what that controller will do is look for corresponding rows in the database, extract the document information in order to zip them all up together.

Any help would be greatly appreciated...

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 02 Feb 2017, 03:52 PM
Hi Joe,

An example showing a header cell checkbox is available at:

http://demos.telerik.com/aspnet-mvc/grid/headertemplate

My understanding is that the checked rows will also be selected. From this point of view, you can obtain the selected rows, obtain the underlying data item for each of them, and finally, get the desired IDs.

- how to obtain the selected rows
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-select

- how to obtain the data item for a specific table row
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem

- how to get a data field value from a data item object
http://docs.telerik.com/kendo-ui/api/javascript/data/model#methods-get


Regards,
Dimo
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Joe
Top achievements
Rank 1
commented on 02 Feb 2017, 04:01 PM

Thank you...  this was exactly what I was looking for...

$("#docResults tbody input:checkbox").prop("checked", this.checked);

 

Everything else I had, but this one this eluded me...  Unfortunately I'm not a javascript expert, so trying to determine the class name of CSS tags of nested components to get what I need sometimes eludes me...

Thank you again.

pogula
Top achievements
Rank 1
commented on 01 Aug 2017, 09:51 AM

Hi, Check boxes are not displaying for rows, It is displaying for only Header Cloumn.

i have used the below code.

 

.Columns(columns =>
                    {
                        columns.Select().Width(50);

     }

 

Please let me know, why it is not coming for rows.

 

Thanks,

Phani.

Dimo
Telerik team
commented on 01 Aug 2017, 11:48 AM

Hi Phani,

My assumption is that you are using the latest UI for ASP.NET MVC version (2017.2.621) and the Kendo UI CSS and JavaScript files belong to that version as well. Can you please compare your implementation with the following online demo (you can check the offline demo site in the UI for ASP.NET MVC installer as well):

http://demos.telerik.com/aspnet-mvc/grid/checkbox-selection

Please compare the code in the view as well as the rendered HTML output in the browser's DOM inspector.

If nothing pops up as the apparent cause of the issue, please send us a runnable test page for review.

Regards,
Dimo
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
pogula
Top achievements
Rank 1
commented on 01 Aug 2017, 12:17 PM

Hi i have compared the code, i didn't found any difference, Please find the code below.

 

<div id="tabstrip">
    <ul>
        <li id="Alarm">Alarm</li>
        <li id="Config">Config</li>
       
    </ul>
    
   <div>
             <div id="mylist" style="width:98%;overflow:auto;padding: 10px 0px 0px 40px;">

                 <table style="border-collapse: separate;border-spacing: 5px;">
                     <tr id="pane">
                         <td id="td1">
                             <div id="#b1" class="post" style="width:600px">

                                 @(Html.Kendo().Grid<G3MSRemCityViewModel.AlarmData>()
                    .Name("Alarmgrid_performance")
                    // .Events(ev => ev.Change("onChange"))
                    .Columns(columns =>
                    {
                        columns.Select().Width(50);
                        columns.Bound(p => p.AlarmAttributeId).Title("AlarmID").Width("140px");//.ClientTemplate("<input type='checkbox' \\#= Discontinued ? checked='checked' :'' \\# />");
                        columns.Bound(p => p.AlarmAttributeName).Title("AlarmName").Width("170px");
                        columns.Bound(p => p.AlarmType).Title("AlarmType").Width("150px");
                        //columns.Bound(p => p.ElevatorUnitId).Hidden(true);
                    })
                                .HtmlAttributes(new { style = "height: 100%;" })
                                // .Pageable()
                                //.Selectable()
                                .Scrollable(scrollable => scrollable.Virtual(true))
                                //.Events(ev => ev.Change("onChange"))
                                .PersistSelection()
                                .AutoBind(false)
                                .Filterable()
                                .Sortable()
                                .DataSource(dataSource => dataSource
                                .Ajax()
                                //.Model(model => model.Id(p => p.AlarmAttributeId))
                                .PageSize(1000)
                                .Read(read => read.Action("GetAlarmData", "RCData"))

                                )
                                 )
                             </div>

                         </td>
                     </tr>
                 </table>
             </div>

        </div>
</div>
    <div style="display:none">Not Implemented</div>

pogula
Top achievements
Rank 1
commented on 01 Aug 2017, 12:17 PM

i am using the Kendo MVC version 2017.2.621.545
pogula
Top achievements
Rank 1
commented on 01 Aug 2017, 12:22 PM

UI is looking as atatched, please find
Dimo
Telerik team
commented on 02 Aug 2017, 01:25 PM

Hi Phani,

The provided code looks OK and works on my test page. Please find it attached and let me know how it goes.

Regards,
Dimo
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
pogula
Top achievements
Rank 1
commented on 04 Aug 2017, 12:11 PM

Hi Thank you, it is working for me now.

But i need some more information on this, When user click on the check box in first,second, third rows etc..

how can i get the information and the on which row, he gets selected and how to get that row information.

 

For simple grid we can get data by using 'this.dataitem(this.select())'.

 

how about check box grid?

i am using like this, but i didn't get any information.

this.selectedKeyNames();

 

please provide information.

 

 

Dimo
Telerik team
commented on 04 Aug 2017, 01:46 PM

Hi Phani,

The selectedKeyNames method requires the ID field to be defined in the model of the Grid DataSource. Please make sure this is the case in your scenario, as demonstrated in the online demo.

http://demos.telerik.com/aspnet-mvc/grid/checkbox-selection

Also, another way to extract information about the selected items is this:

- retrieve the selected items with the select() method
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-select

- iterate the rows returned by the select() method and use the dataItem method to obtain the Kendo UI Model object
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem

- use the get() method of the data item (Kendo UI Model) to obtain a specific data item value
http://docs.telerik.com/kendo-ui/api/javascript/data/model#methods-get
http://docs.telerik.com/kendo-ui/api/javascript/data/observableobject#methods-get

Regards,
Dimo
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
pogula
Top achievements
Rank 1
commented on 10 Aug 2017, 10:02 AM

Now I got a new requirement to use Kendo grid to bound local data:

I have an object like this:

var myobject = new Object ();

myobject.AlarmID = alarms. Slice (0, Number (alarms. Length));
myobject.IterationCount = 0;
myobject. Sent = 0;
myobject. Acknowledged = 0;

Where the first parameter assigning to an array, which contains the array of integers (alarms []).

I am trying to assign this object to data source of kendo grid, but nothing is displaying on UI, May I know the reason for this?

$("#pane").append('<td><div id="gridPerf" class="post" style="width:500px;height:90vh;"><table><th style="width:100px">AlarmID</th><th>IterationCount</th><th>Sent</th><th>Acknowledged</th><table></td>');
    $("#gridPerf").kendoGrid ({
        dataSource: {
           data: myobject,
            schema: {
                model:
                    {
                        fields: {
                            AlarmID: {type: “int”},
                            IterationCount: {editable: true, type: "int" },
                            Sent: {type: "int”},
                            Acknowledged: {type: "int”},

                        }
                    }
            },
            pageSize: 100
        },
        //height: "85%",

        columns: [

            {
                field: "AlarmID", width: "80px", attributes: {“class": "decclass”}
                , headerAttributes: {
                    style: "display: none"
                }
            },
            {
                field: "IterationCount", width: "50px"
                , headerAttributes: {
                    style: "display: none;"
                }
            },
            {
                field: "Sent", width: "50px"
                , headerAttributes: {
                    style: "display: none"
                }
            },
            {
                field: "Acknowledged", width: "50px"
                , headerAttributes: {
                    style: "display: none"
                }
            },
        ]

    });


And my UI is looking like as attached.

And also, I need the second cell need to be editable.

Please suggest.
Dimo
Telerik team
commented on 10 Aug 2017, 11:54 AM

Hi Phani,

The myobject variable should be a JavaScript array of plain objects. Currently it seems to be a single object.

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-data

// ...
dataSource: {
  data: myobject,
  // ...
}
// ...


On a side note, please open new threads for topics that are unrelated to the original discussion. This will make the conversation concise and streamlined. Thank you.


Regards,
Dimo
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
pogula
Top achievements
Rank 1
commented on 18 Aug 2017, 02:23 PM

HI,

Using SelectedKeyNames(), i am able to get the selected row of the particular ID information, which we given in Model ID.

can i get next column data also ? for ex: i have a table with Col1   Col2  Col3

                                                                                      Row1   1       2      3

                                                                                      Row2    4      5       6

if i give Model.ID(p=>p.col1)  i am able to get col1 information for every row selection, But i need col2 information also when i selected Row.

 

Please suggest.

 

Dimo
Telerik team
commented on 22 Aug 2017, 07:46 AM

Hello Phani,

It is possible to obtain any data item value from any selected row. Plese check one of my previous responses in this thread, which explains what API methods are used for this. Let me know if you need more information.

http://www.telerik.com/forums/using-checkboxes-for-row-selection#fbzy-wqX0kmkf_VrXDenag

Regards,
Dimo
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
pogula
Top achievements
Rank 1
commented on 31 Aug 2017, 12:31 PM

please let me know, how can i start new thread for other questions, i am not able to find that option
Dimo
Telerik team
commented on 01 Sep 2017, 07:30 AM

Hello Phani,

There is a "New Thread" button in each forum section (screenshot attached). Can you confirm if you see it?

Regards,
Dimo
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
pogula
Top achievements
Rank 1
commented on 01 Sep 2017, 07:34 AM

Yes, i am able see, Thank you
Sampathkumar
Top achievements
Rank 1
commented on 11 Jun 2018, 09:07 AM

Hi Dimo,

I want some what updated with the current requirement,suppose i have 1-100 records with paging 10 records for page when i select a checkbox in header which should select all the 100 records but currently its selecting 10 records.Kindly help me in achieving the current requirement.

Thanks & Regards,

Sampath

Dimo
Telerik team
commented on 11 Jun 2018, 11:00 AM

Hello Sampath,

(updated)

It is possible to achieve the desired behavior with some custom coding, that will vary, depending on your Kendo UI version. Please take a look at the following examples:

For Kendo UI versions older than R2 2017 SP1 you need a template column with checkboxes and manual selection persistence implementation:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/select-deselect-all-checkbox

In the above example, to select all rows from all pages, you need to know the IDs of all data items from all pages, so that you can populate the checkedIds array.

===

Since R2 2017 SP1 there is a built-in selection column and selection persistence across pages, so you only need to select all rows on all pages via the Grid API:

https://docs.telerik.com/kendo-ui/knowledge-base/checkbox-selection-select-all-rows-all-pages

===

Both scenarios require client-side data operations, which allows all data items to be avaialble on the client (even if they are not rendered).

Regards,
Dimo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Sampathkumar
Top achievements
Rank 1
commented on 11 Jun 2018, 02:38 PM

Hello Dimo,

Before posting the question I had gone through the links which you shared tried but did not get the exact output that was the reason i posted in forums.

We are trying to achieve the selecting all rows in all pages when we click select all checkbox in Kendo grid header in MVC. But i was able to achieve the selection in only one page.

Please help me in this regard.

Thanks & Regards,

Sampath

 

Dimo
Telerik team
commented on 12 Jun 2018, 08:47 AM

Hello Sampath,

In order to check what is the cause of the unexpected behavior, I will need to review your implementation. Please provide an isolated runnable sample with some dummy data. Thank you in advance.

Regards,
Dimo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Sampathkumar
Top achievements
Rank 1
commented on 14 Jun 2018, 07:10 AM

Hello Dimo,

Sorry we could not create a sample but we are sending the .cstml file and controllerclass .cs file .Please find the attached file.

Issue:

When i click on selectall checkbox in grid it calls the controller method GetLeadCampaignAssignments (suppose i have 200 records per page 10 records)I was able to select only current active page records only when i navigate to second page again it calls controller method GetLeadCampaignAssignments where i get 11-20 records which are not selected.I need to select all the records across all pages in the grid when i check selectall checkbox .

Thanks & Regards,

Sampath

 

 

 

Dimo
Telerik team
commented on 15 Jun 2018, 12:16 PM

Hi Sampath,

I reviewed the provided code and there seem to be two things to do:

1. Enable client-side data operations:

https://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding#enable-client-data-processing

2. Attach a click handler to the header cell checkbox, which will select the rows on the other pages. This is demonstrated in the previously provided example:

https://docs.telerik.com/kendo-ui/knowledge-base/checkbox-selection-select-all-rows-all-pages

The idea is that a row can be selected only if it is rendered. So the trick is to increase the page size, select all rows, and then restore the page size to its original size.

For your convenience, I have copy-pasted the important bits below. Let me know if you need further clarifications.


var grid = $("#memberAttritionLeadsByCampaignGrid").data("kendoGrid");
 
grid.thead.on("click", ".k-checkbox", onClick);


var oldPageSize = 0;
 
function onClick(e) {
    var grid = $("#memberAttritionLeadsByCampaignGrid").data("kendoGrid");
 
    oldPageSize = grid.dataSource.pageSize();
    grid.dataSource.pageSize(grid.dataSource.data().length);
 
    if (grid.dataSource.data().length === grid.select().length) {
        grid.clearSelection();
    } else {
        grid.select("tr");
    };
 
    grid.dataSource.pageSize(oldPageSize);
};


Regards,
Dimo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Sampathkumar
Top achievements
Rank 1
commented on 15 Jun 2018, 01:36 PM

Hi Dimo,

Thanks for the Reply!

Is there anyway to reach on phone to discuss my issue.

Thanks,

Sampath

 

Dimo
Telerik team
commented on 18 Jun 2018, 07:16 AM

Hello Sampath,

We provide phone assistance to Ultimate license holders and Ultimate support package holders. Currently your account is associated with a DevCraft Complete license, so you might want to consider upgrading.

On the other hand, can you describe what have you tried so far and what is the observed behavior? Can you send an updated version of your code, so that I can take a look? Also, what is the UI for ASP.NET MVC version that you are using? Can you verify that the Kendo UI script files' version corresponds to the Kendo.Mvc.dll version?

Let me know how it goes.

Regards,
Dimo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Joe
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or