Kendo UI Grid: Check if grid is initialized

Direct OData binding with filtering in the header.

by Rahul Gupta

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css">
<script src="http://cdn.kendostatic.com/2015.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.flat.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.flat.min.css">
<h1> Kendo grid, basic example</h1>
<input type="button" value="Check if grid is initialized" id="btn" />
<div id="example">
	<div id="mygrid"></div>
</div>

CSS

html{
    font-size: 13px; 
    font-family: Tahoma, Verdana, Helvetica, sans-serif;   
    color: dimgrey;
}

JavaScript

$(document).ready(function () {
                    $("#mygrid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                            },
                            pageSize: 50
                        },
                        height: 850,
                        groupable: false,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 15
                        },
                        columns: [{
                            field: "ContactName",
                            title: "Contact Name",
                            width: 200
                        }, {
                            field: "ContactTitle",
                            title: "Contact Title"
                        }, {
                            field: "CompanyName",
                            title: "Company Name"
                        }, {
                            field: "Country",
                            width: 150
                        }]
                    });
					
					$('#btn').click(function() {
						commomMethod($('#mygrid'))
					});
                });
				
				function commomMethod(grid)
				{
					var kendoGrid = $(grid).data("kendoGrid");

					//Check if the element is already initialized with the Kendo Grid widget
					if (kendoGrid)//Grid is initialized
					{
					   alert("Yess, Kendo grid is initialized");
					}
					else
					{
						//grid is not initialized
						alert("Nopeee, Kendo grid not is initialized");
						
						//To verify, you amy change the id here  to  $("#mygrid1").kendoGrid({
					}
					//do something
				}