This is a migrated thread and some comments may be shown as answers.
How do you get the selected rows?
15 Answers 2626 Views
This is a migrated thread and some comments may be shown as answers.
Eddy Ng
Top achievements
Rank 1
Eddy Ng asked on 21 Jun 2012, 05:55 AM

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>

15 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 21 Jun 2012, 08:04 AM
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!
0
Eddy Ng
Top achievements
Rank 1
answered on 21 Jun 2012, 02:16 PM
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.
0
Eddy Ng
Top achievements
Rank 1
answered on 21 Jun 2012, 08:43 PM
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?
0
Sylvain
Top achievements
Rank 1
answered on 22 Jun 2012, 02:13 PM
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>
0
Nikolay Rusev
Telerik team
answered on 25 Jun 2012, 07:56 AM
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!
0
Sylvain
Top achievements
Rank 1
answered on 25 Jun 2012, 03:25 PM
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
0
Eddy Ng
Top achievements
Rank 1
answered on 25 Jun 2012, 04:52 PM
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?
0
Sylvain
Top achievements
Rank 1
answered on 25 Jun 2012, 06:54 PM
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);
        }
0
Joe
Top achievements
Rank 1
answered on 13 Jul 2012, 04:04 PM
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!
0
Joe
Top achievements
Rank 1
answered on 13 Jul 2012, 04:38 PM
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;
}

0
J
Top achievements
Rank 1
answered on 21 Aug 2012, 03:11 PM
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
0
Dylan
Top achievements
Rank 1
answered on 05 Oct 2012, 04:36 PM
Confronted with same issue - Telerik?
0
Abhiraj
Top achievements
Rank 1
answered on 18 Oct 2012, 03:58 PM
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>
0
K.Ramadan
Top achievements
Rank 2
answered on 28 May 2020, 08:42 AM

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

0
Petar
Telerik team
answered on 02 Jun 2020, 07:46 AM

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.
Tags
Grid
Asked by
Eddy Ng
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Eddy Ng
Top achievements
Rank 1
Sylvain
Top achievements
Rank 1
Joe
Top achievements
Rank 1
J
Top achievements
Rank 1
Dylan
Top achievements
Rank 1
Abhiraj
Top achievements
Rank 1
K.Ramadan
Top achievements
Rank 2
Petar
Telerik team
Share this question
or