using checkboxes for row selection

26 posts, 1 answers
  1. Joe
    Joe avatar
    220 posts
    Member since:
    May 2012

    Posted 31 Jan 2017 Link to this post

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

  2. Answer
    Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 02 Feb 2017 Link to this post

    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.
  3. Joe
    Joe avatar
    220 posts
    Member since:
    May 2012

    Posted 02 Feb 2017 in reply to Dimo Link to this post

    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.

  4. pogula
    pogula avatar
    17 posts
    Member since:
    Jul 2017

    Posted 01 Aug 2017 in reply to Dimo Link to this post

    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.

  5. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 01 Aug 2017 Link to this post

    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.
  6. pogula
    pogula avatar
    17 posts
    Member since:
    Jul 2017

    Posted 01 Aug 2017 in reply to Dimo Link to this post

    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>

  7. pogula
    pogula avatar
    17 posts
    Member since:
    Jul 2017

    Posted 01 Aug 2017 in reply to pogula Link to this post

    i am using the Kendo MVC version 2017.2.621.545
  8. pogula
    pogula avatar
    17 posts
    Member since:
    Jul 2017

    Posted 01 Aug 2017 in reply to pogula Link to this post

    UI is looking as atatched, please find
  9. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 02 Aug 2017 Link to this post

    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.
  10. pogula
    pogula avatar
    17 posts
    Member since:
    Jul 2017

    Posted 04 Aug 2017 in reply to Dimo Link to this post

    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.

     

     

  11. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 04 Aug 2017 Link to this post

    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.
  12. pogula
    pogula avatar
    17 posts
    Member since:
    Jul 2017

    Posted 10 Aug 2017 in reply to Dimo Link to this post

    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.
  13. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 10 Aug 2017 Link to this post

    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.
  14. pogula
    pogula avatar
    17 posts
    Member since:
    Jul 2017

    Posted 18 Aug 2017 in reply to Dimo Link to this post

    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.

     

  15. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 22 Aug 2017 Link to this post

    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.
  16. pogula
    pogula avatar
    17 posts
    Member since:
    Jul 2017

    Posted 31 Aug 2017 Link to this post

    please let me know, how can i start new thread for other questions, i am not able to find that option
  17. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 01 Sep 2017 Link to this post

    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.
  18. pogula
    pogula avatar
    17 posts
    Member since:
    Jul 2017

    Posted 01 Sep 2017 in reply to Dimo Link to this post

    Yes, i am able see, Thank you
  19. Sampathkumar
    Sampathkumar avatar
    23 posts
    Member since:
    Feb 2018

    Posted 11 Jun 2018 in reply to Dimo Link to this post

    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

  20. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 11 Jun 2018 Link to this post

    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.
  21. Sampathkumar
    Sampathkumar avatar
    23 posts
    Member since:
    Feb 2018

    Posted 11 Jun 2018 in reply to Dimo Link to this post

    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

     

  22. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 12 Jun 2018 Link to this post

    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.
  23. Sampathkumar
    Sampathkumar avatar
    23 posts
    Member since:
    Feb 2018

    Posted 14 Jun 2018 in reply to Dimo Link to this post

    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

     

     

     

  24. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 15 Jun 2018 Link to this post

    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.
  25. Sampathkumar
    Sampathkumar avatar
    23 posts
    Member since:
    Feb 2018

    Posted 15 Jun 2018 in reply to Dimo Link to this post

    Hi Dimo,

    Thanks for the Reply!

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

    Thanks,

    Sampath

     

  26. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 18 Jun 2018 Link to this post

    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.
Back to Top