or
@using Kendo.Mvc.UI
@using MvcApplication2.Models
@{
ViewBag.Title = "Index";
}
<
h2
>Index</
h2
>
@(Html.Kendo().Grid<
MerchantStore
>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.MerchantStoreId);
columns.Bound(p => p.Name);
columns.Bound(p => p.Address1);
columns.Bound(p => p.TelephoneNumber);
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
// .HtmlAttributes(new { style = "height:1430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.MerchantStoreId))
.Read(read => read.Action("Read", "Home"))
)
)
<
script
type
=
"text/javascript"
>
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function() {
message += this + "\n";
});
}
});
alert(message);
}
}
</
script
>
public ActionResult Read([DataSourceRequest]DataSourceRequest request)
{
var client = new WebClient();
return View("Index", Json(
client.DownloadString("http://localhost:11462/Service1.svc/rest/ListMerchantStore" +
"?merchantId=10000"), JsonRequestBehavior.AllowGet));
}
{"d":[{"__type":"MerchantStoreData:#WcfServiceLibrary1","Address1":"Add1","Address2":null,"Address3":null,"CountryId":826,"CountyState":"","Deleted":false,"EmailAddress":null,"MerchantId":10000,"MerchantIndustryId":1001,"MerchantStoreId":10213,"MerchantStoreKey":"654321","Name":"TEST","PostZipCode":null,"StatusId":0,"TelephoneNumber":null,"TownCity":"City"},{"__type":"MerchantStoreData:#WcfServiceLibrary1","Address1":"Add1","Address2":"Add2","Address3":"Add3","CountryId":826,"CountyState":"","Deleted":false,"EmailAddress":"a@a.a","MerchantId":10000,"MerchantIndustryId":1001,"MerchantStoreId":10214,"MerchantStoreKey":"654321","Name":"TEST","PostZipCode":"","StatusId":1,"TelephoneNumber":"123456","TownCity":"City"}]}
<!--left-drawer-->
<
div
data-role
=
"drawer"
id
=
"left-drawer"
data-title
=
"Global Menu"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
<
ul
data-role
=
"listview"
data-type
=
"group"
>
<
li
>Global Menu
<
ul
>
<
li
data-icon
=
"share"
><
a
href
=
"#drawer-home"
data-transition
=
"none"
>Inbox</
a
></
li
>
<
li
data-icon
=
"share"
><
a
href
=
"#drawer-starred"
data-transition
=
"none"
>Starred Items</
a
></
li
>
</
ul
>
</
li
>
<
li
>Sub Menu
<
ul
id
=
"ResultDiv2"
>
</
ul
>
</
li
>
</
ul
>
</
div
>
<!--//left-drawer-->
<
div
data-role
=
"view"
id
=
"about"
data-layout
=
"drawer-layout"
data-title
=
"About"
>
about dummy text
</
div
>
<
script
>
new kendo.mobile.Application();
</
script
>
$(document).ready(
function
() {
After();
});
function
After() {
var
template = kendo.template(
'<li data-icon="share" onclick="After();"><a href="#:url#" data-transition="none"><span></span>#:name#</a></li>'
);
var
data = [
{ url:
'#about'
, name:
'Menu'
},
{ url:
'#about'
, name:
'Customer'
},
{ url:
'#about'
, name:
'Generate again'
}];
var
result = kendo.render(template, data);
//alert(result);
$(
"#ResultDiv2"
).append(result);
}