How do you get the selected rows?

[Eddy Ng]

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>

[Nikolay Rusev]

Hello Eddy,

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

Regards,
Nikolay Rusev
the Telerik team

[Eddy Ng]

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.

[Eddy Ng]

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?

[Sylvain]

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>

[Nikolay Rusev]

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

[Sylvain]

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

[Eddy Ng]

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?

[Sylvain]

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);

        }

[Joe]

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!

[Joe]

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;

}

[J]

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

[Dylan]

Confronted with same issue - Telerik?

[Abhiraj]

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>

[K.Ramadan]

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

[Petar]

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