How do you get the selected rows?

16 posts, 0 answers
  1. Eddy Ng
    Eddy Ng avatar
    4 posts
    Member since:
    Jun 2012

    Posted 21 Jun 2012 Link to this post

    How do you get the selected rows in the grid? I found some articles that explained on how to do this. But none of them worked (it seemed like things changed in the latest beta).This is my grid:

    @(Html.Kendo().Grid(Model)
            //The grid will be bound to the Model which is the Products table     
    .Name("dg") //The name of the grid is mandatory. It specifies the "id" attribute of the widget.     
    .Columns(columns =>
        {       
            columns.Bound(dg => dg.Title);         
            columns.Bound(dg => dg.Version);
            columns.Bound(dg => dg.Created).Format("{0:d}");
            columns.Bound(dg => dg.CreatedBy);
            columns.Bound(dg => dg.Modified).Format("{0:d}");
            columns.Bound(dg => dg.ModifiedBy);
            columns.Bound(dg => dg.CheckedOutDateTime).Format("{0:d}");
        })
    .Sortable()
    .Pageable()
    .Navigatable()
    .Sortable()
    .Filterable()
    .Selectable(s => s.Mode(GridSelectionMode.Multiple))
    .DataSource(dataSource => dataSource
            .Server()
            .Model(model => model.Id(dg => dg.DocumentGroupID)))
    .Events(events => events.Change("dgChange"))       
    )

    <script>
        function dgChange()
        {
     // What should I put here to get the ID of the selected rows?
           
        }
    </script>

  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 21 Jun 2012 Link to this post

    Hello Eddy,

    this.select() in the scope of the event should give you the selected items.

    Regards,
    Nikolay Rusev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Eddy Ng
    Eddy Ng avatar
    4 posts
    Member since:
    Jun 2012

    Posted 21 Jun 2012 Link to this post

    Yes, I got that part. I understood that I can use this.Select() to get the selected rows. I should have made my question more clear. What should I do afterwards to be able to:
    1. Get the ID of the selected items?
    2. Get the value of the Title fields of the selected items?

    Thanks in advance.
  4. Eddy Ng
    Eddy Ng avatar
    4 posts
    Member since:
    Jun 2012

    Posted 21 Jun 2012 Link to this post

    This is additional information. I found this thread and followed the suggestion there:

    http://www.kendoui.com/forums/ui/grid/grid-select.aspx

    But I kept getting the following javascript error:

    Microsoft JScript runtime error: Unable to get value of the property '5': object is null or undefined

    Can somebody help me on how to do this without getting an error?
  5. Sylvain
    Sylvain avatar
    3 posts
    Member since:
    Apr 2012

    Posted 22 Jun 2012 Link to this post

    Hello,

    is it possible to have a clear code to get the selected row.

    Here is my not working code :
        @(Html.Kendo().Grid(Model.Children)
            .Name("objectGrid")
            .Columns(col => { col.Bound(p => p.Name); col.Bound(p => p.Category); col.Bound(p => p.ParentId); })
            .DataSource(dataSource => dataSource
            .Server()
            .Model(model => model.Id(p => p.Id)))
            .Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Single))
            .Sortable()
            .Pageable()
                    .Events(events => events.Change("dgChange"))
        )
     
    <script type="text/javascript">
        function dgChange() {
            var grid = $('#objectGrid').data('kendoGrid');
            var rows = grid.select();
            rows.each(
                function() {
                    var record = this.data();
                    alert('Selected : ' + record.Name);
                }
            )
     
        }
    </script>
  6. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 25 Jun 2012 Link to this post

    Hello Eddy,

    As you are using server binding  the datasource for the grid will no be available on client. In order to have the mentioned jsfiddle to work you will have to use ajax binding, i.e
    .DataSource(dataSource => dataSource
             .Ajax()...etc.


    Regards,
    Nikolay Rusev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Sylvain
    Sylvain avatar
    3 posts
    Member since:
    Apr 2012

    Posted 25 Jun 2012 Link to this post

    Hello,

    here is the working code :
    @(Html.Kendo().Grid<Noolibee.Entity.Poco.INV_Object>()
        .Name("objectsGrid")
         
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.Id))
            .Read(read => read.Action("GetObjects","Inventory").Data("getObjectId"))
        )
            .Columns(col =>
            {
                col.Bound(p => p.Name);
            })
        .Pageable()
        .Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Single))
            .Events(events => events.Change("dgChange"))
         
        )
     
    <script type="text/javascript">
     
        function getObjectId() {
            var model = @Html.Raw(Json.Encode(Model))
     
            return {
                id: model.TheGuid
            };
        }
     
        function dgChange() {
            var grid = $('#objectsGrid').data('kendoGrid');
            var rows = grid.select();
            rows.each(
                function() {
                    var record = $(this).data();
                    alert('Selected : ' + record);
                }
            )
     
        }
    </script>

    Thanks
    Sylvain
  8. Eddy Ng
    Eddy Ng avatar
    4 posts
    Member since:
    Jun 2012

    Posted 25 Jun 2012 Link to this post

    Thanks everybody for the answer. Unfortunately, I can't use the Ajax binding. I tried the Ajax binding in my application and it did not work. I need to bind over 1000 rows of information into the grid and the data did not show up when I use the Ajax binding. Please no need to suggest the paging either. It's a requirement that I have to display all rows in one page (I have another page that uses paging but I must have one page where the customer can display everything and print out all of the data all at once).

    So, my question is, is there a way to get the selected rows in the client side when I use the server binding?
  9. Sylvain
    Sylvain avatar
    3 posts
    Member since:
    Apr 2012

    Posted 25 Jun 2012 Link to this post

    Hello Eddy,

    does your ajax binding work with 2 or 3 rows ?

    I had some problems implementing the ajax binding until I found that I have to cast in my controller, my list of object to a Datasourceresult before sending it back to the webpage. Before doing that, I had no display in the grid.

    But it seems that ajax binding is slower than Server binding, so I'm still waiting for a server binding to construct a datagrid.

    BR

    Here is the code of the controller returning the list of objects:
    public ActionResult GetObjects([DataSourceRequest]DataSourceRequest request, string id)
            {
                IInventoryObjectService service = Business.ServiceBusinessFactory.Create<IInventoryObjectService>();
                List<INV_Object> currentObject = service.GetByPlace(new Guid(id));
     
                List<ObjectModel> objects = new List<ObjectModel>();
                foreach (INV_Object item in currentObject)
                {
                    if (item.ParentId == null)
                    {
                        objects.Add(new ObjectModel(item.Id));
                    }
                }
     
                var result = objects.ToDataSourceResult(request);
     
                return Json(result);
            }
  10. Joe
    Joe avatar
    34 posts
    Member since:
    Jul 2012

    Posted 13 Jul 2012 Link to this post

    Sorry to post onto the end of this thread and maybe I am missing something but I am still not seeing the answer to "How do I get the ID of the selected row on the change event". The dgChange event gets the grid, then gets the data item and simply alerts it (which is just an object). How do I actually get the ID from the data item?

    Thanks!
  11. Joe
    Joe avatar
    34 posts
    Member since:
    Jul 2012

    Posted 13 Jul 2012 Link to this post

    Figured it out so if anyone else wants to know:
    function item_selected(e) {
        var grid = $("#GridSearchResults").data("kendoGrid");
        var id;
                       
        grid.select().each(function() {
        var dataItem = grid.dataItem($(this));
        id = dataItem.InventoryItemId;
        });
     
        window.location.href = "@Url.Action( "ItemDetails", "Store")" + "?inventoryItemId=" + id;
    }

  12. J
    J avatar
    1 posts
    Member since:
    Apr 2009

    Posted 21 Aug 2012 Link to this post

    I have been searching all over the documentation and still cannot get past the same issue of using grid.dataItem returning Cannot Read Property something of undefined.
    I need to use Server as the datasource - there must be a way of getting the data out of the selected row in javascript when using server binding.

    Telerik - can you please advise - because when using .Server() in the datasource - and then calling  grid.dataItem via javascript - it throws an error.
    thanks
  13. Dylan
    Dylan avatar
    3 posts
    Member since:
    Jan 2011

    Posted 05 Oct 2012 Link to this post

    Confronted with same issue - Telerik?
  14. Abhiraj
    Abhiraj avatar
    1 posts
    Member since:
    Jul 2012

    Posted 18 Oct 2012 Link to this post

    Following code I am using for the selection of grid, when i am including the  .Events(events => events.Change("dgChange")) , i am not able to select any column,the desired column is not giving the alert.Can anybody help me out. 


     

    @(Html.Kendo().Grid((IEnumerable<MvcWebApplication.Models.CompanyDetailsModel>)
    Model.EntityDetails)
            .Name("CompanyDetails") 
            .Columns(columns =>
                 {
             columns.Bound(item => item.Name).Width("25%").Title("Name");
            columns.Bound(item => item.AddressLine1).Width("15%").Title("Address1");
            columns.Bound(item => item.AddressLine2).Width("15%").Title("Address2");
            columns.Bound(item => item.Notes).Width("31%").Title("Notes");
        })

           .HtmlAttributes(new { style = "max-height:50px;min-height: 0px;max-width:800px" }) 

           .Sortable()
                .Scrollable(scrolling => scrolling.Height("50px"))
                .Filterable(filtering => filtering.Enabled(true))
                       .Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Single))
                               .Scrollable(scrolling => scrolling.Height("150px"))
                           .Events(events => events.Change("dgChange"))
                .DataSource(dataSource => dataSource
                    .Ajax()
                      .ServerOperation(false)
                       .Model(model =>
                      {
                          model.Id(p => p.Id);
                          model.Field(p => p.Id).Editable(false);
                      })
                                   
                    )
                       )  
                
       
     
    <script type="text/javascript">

       function dgChange() {
            var grid = $('#CompanyDetails').data('kendoGrid');
            var rows = grid.select();
            rows.each(
                function () {
                    var record = this.data();
                    alert('Selected : ' + record.Name);
                }
            )


        }
    </script>
  15. K.Ramadan
    K.Ramadan avatar
    81 posts
    Member since:
    Feb 2020

    Posted 28 May 2020 Link to this post

    Hello ,

    Here you will find your answer .. just open the Dojo Example and then open the Inspector and then select one item .. it will consoleLog the whole item with all it's properties ..

    Here is the Link :

    https://docs.telerik.com/kendo-ui/knowledge-base/checkbox-selection-dataitems-selected-rows

  16. Petar
    Admin
    Petar avatar
    505 posts

    Posted 02 Jun 2020 Link to this post

    Hi Blackout,

    Thank you for replying to the current thread and sharing the example corresponding. Your post can be useful for someone who come across this page.

    Regards,
    Petar
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top