Getting the Selected Row from a KendoGrid

There are several ways to accomplish this.

I’ve got a grid with 2 columns defined:

  this.gridOptions = {                 
                dataSource: this.mydata,              
                columns: [
                    { field: "office_group_id", title: "ID" },
                    { field: "group_name", title: "Group Name" }  
                ]
            }
        }

With Kendo Grids, you can get the data from a grid like this:

with the javascript event here:

 SelectGrid(data: any, dataItem: kendo.data.ObservableObject, columns: any) {
            console.log(data);
            console.log(dataItem);
            console.log(columns);          
            console.log(dataItem.get("office_group_id"))


        }

you can also do it like this, where you define the event in the grid options.

  this.gridOptions = {                 
                dataSource: this.mydata,  
                change: this.SelectGrid2,            
                columns: [
                    { field: "office_group_id", title: "ID" },
                    { field: "group_name", title: "Group Name" }  
                ]
            }
        }

and in Javascript:

 SelectGrid2(e: kendo.ui.GridChangeEvent){          
            let grid = e.sender;  
            let currentDataItem = grid.dataItem(grid.select());             
            let groupName = currentDataItem.get("group_name")
            let id = currentDataItem.get("office_group_id")
            console.log(groupName);
            console.log(id);


/*  this is also a nice way to get the data, because it will return multiple rows if you have multi-row turned on */
            var selected = $.map(grid.select(), function (item) {
                return $(item).text();
            });
            console.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");

            
        }

While I used to prefer to keep my events all in the “code behind” and my templates all nice and clean with pure HTML, with the new component structure, I’ve flipped to the dark side.

You see, in the past, I would define all my event functions nice and cleanly at the top of the Javascript file rather than dig down through pages and pages of HTML to figure out where in the world that script is. With the structure being “component” style, it’s actually easy to read the HTML. Keeping the events defined there is actually easier. Once the component gets too big, you’re going to break it down, and having all the events there is actually nicer.

Still, it’s a matter of preference. With AngularJS and Angular2, we’ll be keeping the events in the HTML templates wherever it makes sense to do so.