or
<a href="#moreModalView" data-rel="modalview" id="moreButton" data-role="button">More...</a>
<div data-role="modalview" id="hoursModalView"> <div data-role="header" class> <div data-role="navbar"> <span>More Info</span> </div> </div> <p style="text-align:center; margin-top:10px;">Hours</p> <a data-click="closeModalView" data-role="button" data-align="right">Close</a></div>
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>