Post
Ask Question

Get Selected Row Value In Kendo Grid From The External Button Click Event

Introduction

This blog tells you how to get the selected row data item from the Grid using external button click event. Fetching the data item from the selected row of Kendo Grid can be easily done using the select function in Kendo Grid. Let us see how.

Please refer to this link to get the basic idea about KendoGrid and its events.

Prerequisites

  1. Basic knowledge in Kendo UI framework
  2.  jQuery

Select function in kendo Grid

I have created one sample Grid to demonstrae how to fetch the selected row dataItem using Select function.

Create one new HTML page. In my case, I named it as GridSelect.html. Write the code given below in it.

GridSelect.html 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8"/>  
  5.     <title>Kendo UI Snippet</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>  
  14. </head>  
  15. <body>  
  16.     
  17. <div id="grid"></div>  
  18. <br/>  
  19.   <button type="button" id="btnSelectRow" value="GetValue" class="k-button">Get Row Value</button>  
  20.   <br/>  
  21.   <br/>  
  22.  <b> Product Name:</b> <label id="lblProductName" ></label>  
  23.   <br/>  
  24.   <br/>  
  25.  <b> Category:</b><label id="lblCategoryName"></label>  
  26. <script>  
  27. $("#grid").kendoGrid({  
  28.     selectable: "true",  
  29.     allowCopy: true,  
  30.     columns: [  
  31.         { field: "productName" },  
  32.         { field: "category" }  
  33.     ],  
  34.     dataSource: [  
  35.         { productName: "Tea", category: "Beverages" },  
  36.         { productName: "Coffee", category: "Beverages" },  
  37.         { productName: "Ham", category: "Food" },  
  38.         { productName: "Bread", category: "Food" }  
  39.     ]  
  40. });  
  41.   $("#btnSelectRow").click(function(){  
  42.       
  43.     var grid = $("#grid").data("kendoGrid");  
  44.         var selectedItem = grid.dataItem(grid.select());  
  45.      
  46.     $("#lblProductName").text(selectedItem.productName);  
  47.     $("#lblCategoryName").text(selectedItem.category);  
  48.       
  49.   })  
  50. </script>  
  51. </body>  
  52. </html>  

From the above code, you can observe that the button click event is written where we have fetched the data item of the selected row in the Kendo Grid using Select function. From the data item, we have extracted the product name and category and set it to the Product Name and Category Label respectively.

Result
 
 
I hope you have enjoyed this blog. Your valuable feedback, questions, or comments about this blog are always welcome.
Next Recommended Reading Getting Text and Value From Selected Item in Kendo ComboBox using JQuery