using checkboxes for row selection

[Joe]

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...

[Dimo]

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

[Joe]

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]

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]

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

[pogula]

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]

i am using the Kendo MVC version 2017.2.621.545

[pogula]

UI is looking as atatched, please find

[Dimo]

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

[pogula]

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]

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

[pogula]

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]

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

[pogula]

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]

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

[pogula]

please let me know, how can i start new thread for other questions, i am not able to find that option

[Dimo]

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

[pogula]

Yes, i am able see, Thank you

[Sampathkumar]

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]

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

[Sampathkumar]

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]

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

[Sampathkumar]

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]

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

[Sampathkumar]

Hi Dimo,

Thanks for the Reply!

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

Thanks,

Sampath

 

[Dimo]

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