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

[Solved] Bind Kendo Grid with Json data

1 Answer 1093 Views

Grid

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

HyJoe asked on 01 Apr 2015, 07:26 AM

Url https://api.github.com/users/sam

I am trying to bind the Kendo grid with above json but its showing an empty result
any help

<div class="row">

<h2>Getting started</h2>

@(Html.Kendo().DatePicker().Name("datepicker"))

<div id="example">

<div id="grid"></div>

</div>

@section scripts

{

<script>

$(document).ready(function () {

var sharedDataSource = new kendo.data.DataSource({

transport: {

read: {

url: "https://api.github.com/users/sam",

dataType: "json"

}

});

$("#grid").kendoGrid({

dataSource: sharedDataSource,

columns: [

{

field: "name",

title: "Name"

},

{

field: "location",

title: "Location",

//template: '#= kendo.toString(sales, "N0") #'

}]

});

</script>

}

and here is the html markup

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Home Page - My ASP.NET Application</title>

<link href="/Content/bootstrap.css" rel="stylesheet"/>

<link href="/Content/site.css" rel="stylesheet"/>

<link href="/Content/kendo/kendo.common.min.css" rel="stylesheet"/>

<link href="/Content/kendo/kendo.default.min.css" rel="stylesheet"/>

<script src="/Scripts/modernizr-2.6.2.js"></script>

</head>

<body>

<div class="navbar navbar-inverse navbar-fixed-top">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="/">Application name</a>

</div>

<div class="navbar-collapse collapse">

<ul class="nav navbar-nav">

<li><a href="/">Home</a></li>

<li><a href="/Home/About">About</a></li>

<li><a href="/Home/Contact">Contact</a></li>

</ul>

<ul class="nav navbar-nav navbar-right">

<li><a href="/Account/Register" id="registerLink">Register</a></li>

<li><a href="/Account/Login" id="loginLink">Log in</a></li>

</ul>

</div>

<div class="container body-content">

<div class="row">

<h2>Getting started</h2>

<input id="datepicker" name="datepicker" type="date" /><script>

jQuery(function(){jQuery("#datepicker").kendoDatePicker({"format":"dd/MM/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});

</script>

<div id="example">

<div id="grid"></div>

</div>

<hr />

<footer>

</footer>

</div>

<script src="/Scripts/jquery-1.10.2.js"></script>

<script src="/Scripts/bootstrap.js"></script>

<script src="/Scripts/respond.js"></script>

<script src="/Scripts/kendo/kendo.all.min.js"></script>

<script>

$(document).ready(function () {

var sharedDataSource = new kendo.data.DataSource({

transport: {

read: {

url: "https://api.github.com/users/sam",

dataType: "json"

}

});

$("#grid").kendoGrid({

dataSource: sharedDataSource,

columns: [

{

field: "name",

title: "Name"

},

{

field: "location",

title: "Location",

//template: '#= kendo.toString(sales, "N0") #'

}]

});

</script>

<script type="application/json" id="__browserLink_initializationData">

{"appName":"Chrome","requestId":"a785208ca163492292ddb01345b58dbd"}

</script>

<script type="text/javascript" src="http://localhost:52006/d7ca75890aae4892b1dba947ed0f37bd/browserLink" async="async"></script>

</body>

</html>

[Solved] Bind Kendo Grid with Json data

1 Answer, 1 is accepted