using checkboxes for row selection

14 posts, 1 answers
  1. Joe
    Joe avatar
    172 posts
    Member since:
    May 2012

    Posted 31 Jan 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
    8396 posts

    Posted 02 Feb 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
    172 posts
    Member since:
    May 2012

    Posted 02 Feb 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
    5 posts
    Member since:
    Jul 2017

    Posted 01 Aug 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
    8396 posts

    Posted 01 Aug 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
    5 posts
    Member since:
    Jul 2017

    Posted 01 Aug 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
    5 posts
    Member since:
    Jul 2017

    Posted 01 Aug in reply to pogula Link to this post

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

    Posted 01 Aug in reply to pogula Link to this post

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

    Posted 02 Aug 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
    5 posts
    Member since:
    Jul 2017

    Posted 04 Aug 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
    8396 posts

    Posted 04 Aug 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
    5 posts
    Member since:
    Jul 2017

    Posted 10 Aug 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
    8396 posts

    Posted 10 Aug 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
    5 posts
    Member since:
    Jul 2017

    Posted 44 minutes ago 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.

     

Back to Top