How to get selected row and its DataItem

[Indy]

How do I get the grid's selected row and its DataItem.?

After searching around since I couldn't find any sample from any of the Grid demo samples, I also consulted the documentation.
But still not clear on how to do it.

Do I need to subscibe to the change event?
.Events(events => events.Change("GSSelectionChange")

Or can I directly get the selected row and its DataItem like the following
var grid = $("#usersGrid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());

So far, getting the selected row and its DataItem directly (w/out subscribing to the Change event) doesn't work.

I would appreciate any help or tip on how to get this done.

[Dimiter Madjarov]

Hi Indy,


The change event of the Grid is fired when the selection has changed. I don't know if handling this is required in the current scenario.

Besides of that, you could retrieve the selected row and it's dataItem exactly as you specified in your post.

var grid = $("#usersGrid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());

This code snippet assumes that the current Grid is using an Ajax dataSource, row selection type (not cell) and that there is actually a selected row at the moment of executing it.

Please let me know if this information was helpful or I could assist you further.

Regards,
Dimiter Madjarov
Telerik

[Sampath]

hi, I have a kendo UI grid in which I am using an entity framework data source to bind the data. I have enabled the multi select option in the grid. Now I want to pass the selected row ID's to the server side function for processing. How can I do this?

I am new to Kendo UI and MVC developments. I didn't come across proper documentation which does this for server bound Kendo grids.

Here is my grid, in index.cshtml

@model IEnumerable<CPMS.Models.CPMS_Daily>
@{
    ViewBag.Title = "Proactive Measures for Critical Events";
}

<h2>Proactive Measures for Critical Events</h2>
@(Html.Kendo().Grid(Model)
      .Name("Grid")
      .Columns(columns =>
          {
              columns.Command(command => { command.Edit(); command.Destroy().Text("Complete"); }).Width(100);
              columns.Bound(pro => pro.Schedule_Number__Color).Title("Schedule::Color");
              columns.Bound(pro => pro.CO_Number).Title("CO Number");
              columns.Bound(pro => pro.Plant).Title("Plant").Width(50);
              columns.Bound(pro => pro.Planning_Board).Title("Planning Board");
              columns.Bound(pro => pro.Style__Color).Title("Style::Color");
              columns.Bound(pro => pro.Event).Title("Event");
              columns.Bound(pro => pro.VTM_event).Title("VTM").Width(50);
              columns.Bound(pro => pro.Retain_target_date).Title("Retain TargetDate").Format("{0:dd/MM/yyyy}");
              columns.Bound(pro => pro.Current_target_date).Title("Current TargetDate").Format("{0:dd/MM/yyyy}");
              columns.Bound(pro => pro.Event_Responsible).Visible(false);
              columns.Bound(pro => pro.Event_notes).Title("Note").Width(200);
              columns.Bound(pro => pro.Order_Quantity).Title("Order Quantity");
              columns.Bound(pro => pro.Expected_Date).Title("Expected Date").Format("{0:dd/MM/yyyy}").EditorTemplateName("Date");
              columns.Bound(pro => pro.Days_Late).Title("Days Late").Width(20);
              columns.Bound(pro => pro.PackageExecutedDate).Visible(false);

          })
      .Pageable()
      .Sortable()
      .Filterable()
      .Scrollable(scr => scr.Height(500))
      .Groupable()
      .Selectable(s => s.Mode(GridSelectionMode.Multiple))
      .Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation(false))
      .DataSource(dataSource => dataSource
        .Server()
        .PageSize(20)
            .Model(model =>
            {
                model.Id(r => r.RowID);
                model.Field(f => f.Schedule_Number__Color).Editable(false);
                model.Field(f => f.CO_Number).Editable(false);
                model.Field(f => f.Plant).Editable(false);
                model.Field(f => f.Planning_Board).Editable(false);
                model.Field(f => f.Style__Color).Editable(false);
                model.Field(f => f.Event).Editable(false);
                model.Field(f => f.VTM_event).Editable(false);
                model.Field(f => f.Retain_target_date).Editable(false);
                model.Field(f => f.Current_target_date).Editable(false);
                model.Field(f => f.Order_Quantity).Editable(false);
                model.Field(f => f.Days_Late).Editable(false);
                model.Field(f => f.Event_Responsible).Editable(false);
            }
            )
            .Read(read => read.Action("Index", "ProactiveKendo"))
            .Update(update => update.Action("Update", "ProactiveKendo"))
            .Destroy(destroy => destroy.Action("Destroy", "ProactiveKendo"))
    )
)

<script type="text/javascript">

    function Save() {
        var gridData = $("#Grid").data("kendoGrid").dataSource.data();;
        $.ajax({
            type: "POST"
            , url: "/ProactiveKendo/SaveGridData"
            , data: JSON.stringify({ model: gridData })
            , contentType: "application/json"
            , success: function (result) {
                alert(result.count + " record(s) found");
            }
        });

    }

</script>

<input type="button" onclick="Save()" value="Post Grid Data" />

And here is the code in my controller -(ProactiveKendoController)

using CPMS.Models;
using Kendo.Mvc.Extensions;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using System.Web.Routing;

namespace CPMS.Controllers
{
    public class ProactiveKendoController : Controller
    {
        //private CPMSEntities db = new CPMSEntities();
        private Entities db = new Entities();

        // GET: /ProactiveKendo/
        public ActionResult Index()
        {
            try
            {
                return View(db.CPMS_Daily.Where(e => e.Days_Late >= 0 && e.Event_Responsible == "SANJAYAS"));
            }
            catch (Exception ex)
            {
                return View("Error");
            }
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Update([Bind(Include = "RowID,Schedule_Number__Color,CO_Number,Plant,Planning_Board,Style__Color,Schedule_Number,Event,VTM_event,Retain_target_date,Current_target_date,Event_Responsible,Event_notes,Order_Quantity,Expected_Date,Days_Late,PackageExecutedDate")]CPMS_Daily cpmsdaily)
        {
            if (ModelState.IsValid)
            {
                CPMS_Daily rowId = db.CPMS_Daily.Single(r => r.RowID == cpmsdaily.RowID);
                rowId.Event_notes = cpmsdaily.Event_notes;
                rowId.Expected_Date = cpmsdaily.Expected_Date;
                db.SaveChanges();

                RouteValueDictionary routeValues = this.GridRouteValues();
                return RedirectToAction("Index", routeValues);
            }

            return View(db.CPMS_Daily.Where(e => e.Days_Late >= 0 && e.Event_Responsible == "SANJAYAS"));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Destroy(CPMS_Daily cpmsdaily)
        {
            if (ModelState.IsValid)
            {
                CPMS_Daily rowId = db.CPMS_Daily.Single(r => r.RowID == cpmsdaily.RowID);
                rowId.Event_Status = true;
                db.SaveChanges();

                RouteValueDictionary routeValues = this.GridRouteValues();
                return RedirectToAction("Index", routeValues);
            }

            return View(db.CPMS_Daily.Where(e => e.Days_Late >= 0 && e.Event_Responsible == "SANJAYAS"));
        }

        public ActionResult SaveGridData()
        {
            return View();
        }
        [HttpPost]
        public JsonResult SaveGridData(List<CPMS_Daily> users)
        {
            // Here i am not implementing all
            // I am interested to show controller is getting data from view
            var count = 0;
            if (users != null)
            {
                count = users.Count;
            }
            //Returns how many records was posted
            return Json(new { count = count });
        }
    }
}

When i run this code I'm getting 0 records found. Please help. Any assistance is much appreciated. :)

[Dimiter Madjarov]

Hi Sampath,


The current Grid is using a server dataSource. In this case no data is stored on the client side, so the following expression won't work

var gridData = $("#Grid").data("kendoGrid").dataSource.data();

If retrieving the data is required, you should switch to Ajax dataSource instead.

Regards,
Dimiter Madjarov
Telerik

 

 

[Ronan]

This option don't work if you using  ClientTemplate  and html button like:

"<input type='button' class='k-button k-grid-btn-order-details' onclick='OrderDetail'  name 'order'  value='Order' />​"

 Is there other way to get the selected row DataItem? 

[Dimiter Madjarov]

Hello Ronan,

It is not clear what issue are you experiencing with the current approach. Please elaborate further and demonstrate the problem.

Regards,
Dimiter Madjarov
Telerik

 

 

[Hari]

 Its simple

//Add this line of code to the grid
columns.Command(command => command.Custom("Remove").Click("removeItem"));
//Java script function to remove
       function removeItem(e) {
        //Get the instance of the grid
        var grid = $("#grid").data("kendoGrid");
        //Get the selected grid
        var tr = $(e.target).closest("tr");
        //Get the item from the grid
        var data = this.dataItem(tr);
        //Remove the item from the datasource
        grid.dataSource.remove(data);
        //Sync it with the grid
        dataSource.sync();
   }

[Tom]

I personally think this is better than any solution I have seen across the internet.

var grid = $('#Grid').data('kendoGrid');
var selectedRow = grid.dataItem('tr.k-grid-edit-row');

selectedRow.FieldName

[Stefan]

Hello, Tom,

Thank you for sharing the solution with the community.

Based on the code, I can assume that this approach can be used to retrieve the dataItem of the edited item instead of the selected one.

Also, the dataItem of the edited row can be easily retrieved on the edit event of the Grid:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

Regards,
Stefan
Progress Telerik

[Noah]

How would I go about this if I wanted to select a whole row as stated above, but instead of sending all of the rows content I would only send content from one of the columns?

[Tsvetomir]

Hi Noah,

The approach that you refer to is the one which calls the sync() method of the data source, is that correct? This method actually would make a request to the remote service with the contents of the modified rows only. Therefore, it would like to send only the contents of one column, then, you would have to create a custom $.ajax() request. 

An example of how to get the dirty models would be:

var data = $("#grid").getKendoGrid().dataSource.data();

var dirty = $.grep($($0).getKendoGrid().dataSource.data(), function(item) {
    return item.dirty
});

Now "dirty" would be a collection with the modified models only. Within its properties there is one called "dirtyFields". It is an object which contains only the modified fields. 

After retrieving the dirty fields, you can initiate a custom ajax request and send the modified fields. It is important to point out that you would have to send the ID of the item as well.

Another option, actually, is to configure the update transport function of the grid to be a custom one. More information could be found in the article below. And more specifically under the "Specify update as a function" example:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.update

Let me know in case further assistance is required.


Best regards,
Tsvetomir
Progress Telerik