or
using KendoFilters.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace KendoFilters.Controllers
{
public class HomeController : Controller
{
public ActionResult Index(string nameDD)
{
var listFruits = new List<
Fruit
>
{
new Fruit { Name="Apple", Organic=true },
new Fruit { Name="Orange", Organic=true },
new Fruit { Name="Pear", Organic=true },
new Fruit { Name="Plum", Organic=false }
};
ViewBag.MyNameDDValue = nameDD;
return View(listFruits);
}
}
}
@model IEnumerable<
KendoFilters.Models.Fruit
>
@{
Layout = null;
}
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
name
=
"viewport"
content
=
"width=device-width"
/>
<
title
>Index</
title
>
<!-- Kendo References -->
<
link
rel
=
"stylesheet"
href
=
"~/Content/kendo.common.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"~/Content/kendo.default.min.css"
>
<
link
href
=
"~/Content/kendo.dataviz.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"~/Scripts/jquery.min.js"
></
script
>
<
script
src
=
"~/Scripts/kendo.all.min.js"
></
script
>
<
script
src
=
"~/Scripts/kendo.aspnetmvc.min.js"
></
script
>
</
head
>
<
body
>
<
div
>
<
table
>
@using (Html.BeginForm("Index", "Home", FormMethod.Get))
{
<
tr
>
<
td
>Environment
</
td
>
<
td
>
@(Html.Kendo().DropDownList()
.Name("nameDD")
.DataTextField("Name")
.DataValueField("Name")
.BindTo(Model)
)
</
td
>
<
td
style
=
"width: 10px;"
></
td
>
<
td
>
<
input
type
=
"submit"
value
=
"Run Report"
/>
</
td
>
</
tr
>
}
</
table
>
<
br
/><
br
/>
You Chose: @ViewBag.MyNameDDValue
</
div
>
</
body
>
</
html
>
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
/>
<
meta
name
=
"format-detection"
content
=
"telephone=no"
/>
<
meta
name
=
"viewport"
content
=
"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"
/>
<
link
rel
=
"stylesheet"
href
=
"styles/kendo.mobile.all.min.css"
/>
<
style
>
body, html {
margin:0;
height:100%;
width:100%;
}
</
style
>
<
title
>Hello World</
title
>
</
head
>
<
body
>
<
div
id
=
"tabletApp"
style
=
"display:none;"
>
<
div
data-role
=
"splitview"
>
<
div
data-role
=
"pane"
id
=
"left"
data-layout
=
"leftLayout"
>
<
div
data-role
=
"view"
>
LEFT
</
div
>
<
div
data-role
=
"layout"
data-id
=
"leftLayout"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
TEST APP
</
div
>
</
div
>
</
div
>
</
div
>
<
div
data-role
=
"pane"
id
=
"right"
data-layout
=
"rightLayout"
>
<
div
data-role
=
"view"
>
RIGHT
</
div
>
<
div
data-role
=
"layout"
data-id
=
"rightLayout"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
id
=
"phoneApp"
style
=
"display:none;"
>
<
div
data-role
=
"view"
>
<
h1
>Phone Home</
h1
>
</
div
>
<
div
data-role
=
"view"
id
=
"about"
>
<
h1
>Phone About</
h1
>
</
div
>
<
div
data-role
=
"layout"
data-id
=
"phoneDefault"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
Phone App
</
div
>
</
div
>
<!--Content-->
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
href
=
""
data-icon
=
"home"
>Home</
a
>
<
a
href
=
"#about"
data-icon
=
"info"
>About</
a
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
src
=
"cordova-2.2.0.js"
></
script
>
<!-- This combo fixes the status bar height offset... Taken from Telerik forum answer post. -->
<
script
>
if (typeof window._nativeReady === "undefined")
window._nativeReady = true;
</
script
>
<
script
src
=
"js/jquery.min.js"
></
script
>
<
script
src
=
"js/kendo.all.min.js"
></
script
>
<
script
>
$(function() {
var app,
//Must be mobile and tablet
isTablet = kendo.support.mobileOS && kendo.support.mobileOS.tablet,
appElement = null,
appLayout = null;
console.log("mobileOS Info/isTablet", kendo.support.mobileOS, isTablet);
appElement = (isTablet) ? $("#tabletApp") : $("#phoneApp");
appLayout = (isTablet) ? null : "phoneDefault";
app = new kendo.mobile.Application(appElement, {
layout: appLayout,
transition: 'slide'
});
//Adjust visibility of proper app container
appElement.show();
});
</
script
>
</
body
>
</
html
>