How do you get the selected rows? in UI for ASP.NET MVC

This is a migrated thread and some comments may be shown as answers.

How do you get the selected rows?

15 Answers 2626 Views

Grid

This is a migrated thread and some comments may be shown as answers.

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

15 Answers, 1 is accepted

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>

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

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?

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

}

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>