Telerik Forums / UI for ASP.NET MVC Forum / Grid /

How do you get the selected rows?

Telerik UI for ASP.NET MVC
Resources Buy Try

16 posts, 0 answers

Eddy Ng

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>
Nikolay Rusev
Admin

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!
Eddy Ng

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

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?
Sylvain

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>
Nikolay Rusev
Admin

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!
Sylvain

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
Eddy Ng

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?
Sylvain

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

        }
Joe

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!
Joe

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;

}
J

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
Dylan

3 posts

Member since:
Jan 2011

Posted 05 Oct 2012 Link to this post

Confronted with same issue - Telerik?
Abhiraj

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

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
Petar
Admin

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.

How do you get the selected rows?

Eddy Ng

Nikolay Rusev

Eddy Ng

Eddy Ng

Sylvain

Nikolay Rusev

Sylvain

Eddy Ng

Sylvain

Joe

Joe

J

Dylan

Abhiraj

K.Ramadan

Petar