
ghd258 ghd258
Top achievements
Rank 1
ghd258 ghd258
asked on 03 Aug 2017, 12:23 AM
demo:
<div id="exampleWrap">
<script>$("#exampleWrap").css("visibility", "hidden");</script>
@{
<div id="example">
@RenderBody()
</div>
if (ViewBag.Description != null)
{
<div class="box demo-description wide">
<h4>Description</h4>
@Html.Raw(ViewBag.Description)
</div>
}
}
<script>
$(function(){ $("#exampleWrap").css("visibility", ""); });
</script>
</div>
But in the data show that before the emergence of white
How can you determine the data( @RenderBody()) before the end of the load with the progress bar displayed, the data hidden after the progress bar?
<div id="exampleWrap">
<script>$("#exampleWrap").css("visibility", "hidden");</script>
@{
<div id="example">
@RenderBody()
</div>
if (ViewBag.Description != null)
{
<div class="box demo-description wide">
<h4>Description</h4>
@Html.Raw(ViewBag.Description)
</div>
}
}
<script>
$(function(){ $("#exampleWrap").css("visibility", ""); });
</script>
</div>
But in the data show that before the emergence of white
How can you determine the data( @RenderBody()) before the end of the load with the progress bar displayed, the data hidden after the progress bar?
4 Answers, 1 is accepted
0

ghd258 ghd258
Top achievements
Rank 1
answered on 03 Aug 2017, 12:26 AM
demo:
<div id="exampleWrap">
<script>$("#exampleWrap").css("visibility", " ");</script>
@{
<div id="example">
@RenderBody()
</div>
if (ViewBag.Description != null)
{
<div class="box demo-description wide">
<h4>Description</h4>
@Html.Raw(ViewBag.Description)
</div>
}
}
<script>
$(function(){ $("#exampleWrap").css("visibility", ""); });
</script>
</div>
But in the data show that before the emergence of white
How can you determine the data( @RenderBody()) before the end of the load with the progress bar displayed, the data hidden after the progress bar?
<div id="exampleWrap">
<script>$("#exampleWrap").css("visibility", " ");</script>
@{
<div id="example">
@RenderBody()
</div>
if (ViewBag.Description != null)
{
<div class="box demo-description wide">
<h4>Description</h4>
@Html.Raw(ViewBag.Description)
</div>
}
}
<script>
$(function(){ $("#exampleWrap").css("visibility", ""); });
</script>
</div>
But in the data show that before the emergence of white
How can you determine the data( @RenderBody()) before the end of the load with the progress bar displayed, the data hidden after the progress bar?
0
Hi,
I am experiencing difficulties understanding the scenario and requirement. Can you please provide us with a detail explanation of the problem and expected behavior? Additionally I would kindly like to ask you to send us the entire code (it seems that a popup with editors is loaded but it does not become obvious when viewing the snippets).
Regards,
Angel Petrov
Progress Telerik
I am experiencing difficulties understanding the scenario and requirement. Can you please provide us with a detail explanation of the problem and expected behavior? Additionally I would kindly like to ask you to send us the entire code (it seems that a popup with editors is loaded but it does not become obvious when viewing the snippets).
Regards,
Angel Petrov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0

ghd258 ghd258
Top achievements
Rank 1
answered on 09 Aug 2017, 09:27 AM
Kendo.Mvc.Examples\Views\Shared/ExampleLayout.cshtml
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section HeadContent {
@RenderSection("HeadContent", false)
}
<script>
window.kendoTheme = "@ViewBag.Theme";
window.kendoCommonFile = "@ViewBag.CommonFile";
</script>
<script src="@Url.Content("~/Scripts/theme-chooser.js")"></script>
@Html.Partial("WebSearchScript")
<div id="example-sidebar">
<div id="example-search-wrapper" class="search-wrapper">
<div class="search">
<input id="example-search" placeholder="Search demos" />
</div>
</div>
<div id="example-nav-bar">
<a href="#" title="See all components" id="back-forward" class="back-nav">All Components</a>
</div>
<div id="nav-wrapper">
<div id="nav">
<div id="root-nav">
@foreach (IGrouping<string, NavigationWidget> category in ViewBag.WidgetCategories)
{
<ul class="root-nav-categories">
@if (category.Any(c => c.ShouldInclude()))
{
<li>
<h3>@category.Key</h3>
<ul class="root-nav-widgets">
@foreach (var widget in category)
{
if (widget.ShouldInclude())
{
<li>@Html.WidgetLink(widget, (string)ViewBag.NavProduct)</li>
}
}
</ul>
</li>
}
</ul>
}
</div>
<div id="example-nav">
<h3>@ViewBag.CurrentWidget.Text</h3>
<ul>
@foreach (NavigationExample example in ViewBag.CurrentWidget.Items)
{
if (example.ShouldInclude())
{
if (!string.IsNullOrEmpty(example.Group))
{
<li><span class="group">@example.Group</span></li>
}
<li>@Html.ExampleLink(example)</li>
}
}
</ul>
</div>
</div>
<script>
$("#back-forward").on("click", function (e) {
if ($(this).hasClass("back-nav")) {
$(this).removeClass("back-nav").addClass("forward-nav").text("@ViewBag.CurrentWidget.Text").attr("title", "See @ViewBag.CurrentWidget.Text demos");
$("#nav").addClass("root");
}
else {
$(this).removeClass("forward-nav").addClass("back-nav").text("All Components").attr("title", "See all components");
$("#nav").removeClass("root");
}
e.preventDefault();
});
function setSearchListWidth() {
$("#example-search").data("kendoExampleSearch");
}
$(document).ready(function () {
resizeContainers();
setSearchListWidth();
});
</script>
</div>
</div>
<div id="main">
<a href="#" id="sidebar-toggle"><span></span></a>
@Html.Partial("ThemeChooser")
<h1 id="exampleTitle">
@if (ViewBag.CurrentExample != null)
{
<span class="exampleIcon @ViewBag.CurrentWidget.SpriteCssClass"></span>
<strong>@ViewBag.CurrentWidget.Text @(ViewBag.CurrentExample.Url.Contains("dashboard") ? "" : "/")</strong> @ViewBag.CurrentExample.Text
}
</h1>
<div id="exampleWrap">
<script>$("#exampleWrap").css("visibility", "hidden");</script>
@{
<div id="example">
@RenderBody()
</div>
if (ViewBag.Description != null)
{
<div class="box demo-description wide">
<h4>Description</h4>
@Html.Raw(ViewBag.Description)
</div>
}
}
<script>
$(function(){ $("#exampleWrap").css("visibility", ""); });
</script>
</div>
@{
NavigationExample currentExample = ViewBag.CurrentExample;
NavigationWidget currentWidget = ViewBag.CurrentWidget;
var html = currentWidget.ShouldInclude("online");
var php = currentWidget.ShouldInclude("php");
var jsp = currentWidget.ShouldInclude("jsp");
}
@if (ViewBag.ShowCodeStrip == true)
{
<div id="wrappers-source-code">
<h2>ASP.NET MVC source</h2>
@if (html || php || jsp)
{
<div class="other-source">
<h4>Also available for:</h4>
<ul>
@if (html)
{
<li><a href="@Html.ProductExampleUrl(currentExample, "kendo-ui")">HTML5 / JavaScript</a></li>
}
@if (jsp)
{
<li><a href="@Html.ProductExampleUrl(currentExample, "jsp-ui")">JSP</a></li>
}
@if (php)
{
<li><a href="@Html.ProductExampleUrl(currentExample, "php-ui")">PHP</a></li>
}
</ul>
</div>
}
</div>
<div id="codeStrip">
<div class="buttons-wrap">
@if (!string.IsNullOrEmpty(ViewBag.Api))
{
<a class="documentation-link k-link" href="@ViewBag.Api">API Reference</a>
}
@{
IEnumerable<ExampleFile> examples = ViewBag.ExampleFiles;
}
</div>
@if (examples.Any())
{
<div id="source-code">
<ul>
@foreach (ExampleFile file in examples)
{
<li>@file.Name</li>
}
</ul>
@foreach (ExampleFile file in examples)
{
<div></div>
}
</div>
<script>
(function () {
var ts = $("#source-code").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
},
contentUrls: [
@Html.Raw(String.Join(",", examples.Select(file => "\"" + Url.Action("Index", "Source", new { path = file.Url } ) + "\"").ToArray()))
],
contentLoad: function (e) {
var content = $(e.contentElement);
if (content.is("#source-code-1")) {
var html = content.find('.prettyprint').text();
content.data("html", content.find('.prettyprint').text());
}
prettyPrint();
}
}).data("kendoTabStrip");
ts.select(0);
$(window).resize(function () {
ts.resize();
});
})();
</script>
}
</div>
}
<div id="resources-technologies" class="box">
@if (ViewBag.Forum != null || ViewBag.Documentation != null || ViewBag.CodeLibrary != null)
{
<div id="learning-resources" class="box-col">
<h4>Support & learning resources</h4>
<ul>
@if (ViewBag.Forum != null)
{
<li><a href="@ViewBag.Forum">Forums</a></li>
}
@if (ViewBag.CodeLibrary != null)
{
<li><a href="@ViewBag.CodeLibrary">Code Libraries</a></li>
}
@if (ViewBag.Documentation != null)
{
<li><a href="@ViewBag.Documentation">Documentation</a></li>
}
</ul>
</div>
}
<div id="technologies" class="box-col">
@if (html || php || jsp)
{
<h4>@ViewBag.CurrentWidget.Text for other technologies</h4>
<ul>
@if (html)
{
<li><a href="@Html.ProductExampleUrl(currentExample, "kendo-ui")">HTML5 / JavaScript</a></li>
}
@if (jsp)
{
<li><a href="@Html.ProductExampleUrl(currentExample, "jsp-ui")">JSP</a></li>
}
@if (php)
{
<li><a href="@Html.ProductExampleUrl(currentExample, "php-ui")">PHP</a></li>
}
</ul>
}
</div>
</div>
@Html.Partial("Footer")
</div>
<script>
$(window).on("resize", function() {
kendo.resize($(".k-chart"));
});
setTimeout(function(){ prettyPrint(); }, 100);
</script>
Kendo.Mvc.Examples\Controllers\DropDownList/IndexController.cs
namespace Kendo.Mvc.Examples.Controllers
{
using Kendo.Mvc.Examples.App_Start;
using System.Collections.Generic;
using System.Web.Mvc;
public partial class DropDownListController : Controller
{
[Demo]
public ActionResult Index()
{
TlcFloatTankViewModel model = new TlcFloatTankViewModel();
List<SysDataDictionaryDetailModel> ControlMeasuresList = new List<SysDataDictionaryDetailModel>();
ControlMeasuresList.Add(new SysDataDictionaryDetailModel { DetailName = "东区装卸站", Id = "1" });
ControlMeasuresList.Add(new SysDataDictionaryDetailModel { DetailName = "哈哈", Id = "2" });
ControlMeasuresList.Add(new SysDataDictionaryDetailModel { DetailName = "11222", Id = "3" });
ControlMeasuresList.Add(new SysDataDictionaryDetailModel { DetailName = "咚咚锵", Id = "4" });
ControlMeasuresList.Add(new SysDataDictionaryDetailModel { DetailName = "西区站点", Id = "5" });
model.ControlMeasuresList = ControlMeasuresList;
model.TransportModeList = ControlMeasuresList;
model.LastLoadList = ControlMeasuresList;
model.TankerStatusList = ControlMeasuresList;
model.ShipHoldStatusList = ControlMeasuresList;
model.OperativeModeList = ControlMeasuresList;
model.ControlMeasures = "1";
model.TransportId = "2";
model.LastLoad = "4";
model.TankerStatus = "4";
model.ShipHoldStatus = "5";
model.OperativeMode = "6";
return View(model);
}
}
}
Kendo.Mvc.Examples\Views\dropdownlist/index.cshtml
@*<div id="cap-view" class="demo-section k-content">
<h4>Customize your Kendo Cap</h4>
<div id="cap" class="black-cap"></div>
<h4>@Html.Label("color", "Cap Color")</h4>
@(Html.Kendo().DropDownList()
.Name("color")
.DataTextField("Text")
.DataValueField("Value")
.Events(e => e.Change("change"))
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "Black",
Value = "1"
},
new SelectListItem() {
Text = "Orange",
Value = "2"
},
new SelectListItem() {
Text = "Grey",
Value = "3"
}
})
.Value("1")
.HtmlAttributes(new { style = "width: 100%" })
)
<h4 style="margin-top: 2em;">@Html.Label("size", "Cap Size")</h4>
@(Html.Kendo().DropDownList()
.Name("size")
.BindTo(new List<string>() {
"S - 6 3/4\"",
"M - 7 1/4\"",
"L - 7 1/8\"",
"XL - 7 5/8\""
})
.HtmlAttributes(new { style = "width: 100%" })
)
<button class="k-button k-primary" id="get" style="margin-top: 2em; float: right;">Customize</button>
</div>
<style>
#cap {
width: 242px;
height: 225px;
margin: 20px auto;
background-image: url('@Url.Content("~/Content/web/dropdownlist/cap.png")');
background-repeat: no-repeat;
background-color: transparent;
}
.black-cap {
background-position: 0 0;
}
.grey-cap {
background-position: 0 -225px;
}
.orange-cap {
background-position: 0 -450px;
}
</style>
<script>
function change() {
var value = $("#color").val();
$("#cap")
.toggleClass("black-cap", value == 1)
.toggleClass("orange-cap", value == 2)
.toggleClass("grey-cap", value == 3);
};
$(document).ready(function () {
$("#get").click(function () {
var color = $("#color").data("kendoDropDownList"),
size = $("#size").data("kendoDropDownList");
alert('Thank you! Your Choice is:\n\nColor ID: ' + color.value() + ' and Size: ' + size.value());
});
});
</script>*@
@using Kendo.Mvc.Examples.App_Start
@model TlcFloatTankViewModel
@{
}
<div id="cap-view" class="demo-section k-content">
<h4>@Html.Label("color", "Cap Color")</h4>
@(Html.Kendo().DropDownListFor(x => x.ControlMeasures)
.DataTextField("DetailName")
.DataValueField("Id")
.HtmlAttributes(new { required = "required", data_required_msg = "请选择装卸站", style = "width:100%" })
.BindTo(Model.ControlMeasuresList)
.OptionLabel("--请选择--")
)
@(Html.Kendo().DropDownListFor(x => x.TransportId)
.DataTextField("DetailName")
.DataValueField("Id")
.HtmlAttributes(new { required = "required", data_required_msg = "请选择装卸站", style = "width:100%" })
.BindTo(Model.TransportModeList)
.OptionLabel("--请选择--")
)
@(Html.Kendo().DropDownListFor(x => x.LastLoad)
.DataTextField("DetailName")
.DataValueField("Id")
.HtmlAttributes(new { required = "required", data_required_msg = "请选择装卸站", style = "width:100%" })
.BindTo(Model.LastLoadList)
.OptionLabel("--请选择--")
)
@(Html.Kendo().DropDownListFor(x => x.TankerStatus)
.DataTextField("DetailName")
.DataValueField("Id")
.HtmlAttributes(new { required = "required", data_required_msg = "请选择装卸站", style = "width:100%" })
.BindTo(Model.TankerStatusList)
.AutoBind(false)
.OptionLabel("--请选择--")
)
@(Html.Kendo().DropDownListFor(x => x.ShipHoldStatus)
.DataTextField("DetailName")
.DataValueField("Id")
.HtmlAttributes(new { required = "required", data_required_msg = "请选择装卸站", style = "width:100%" })
.BindTo(Model.ShipHoldStatusList)
.AutoBind(false)
.OptionLabel("--请选择--")
)
@(Html.Kendo().DropDownListFor(x => x.OperativeMode)
.DataTextField("DetailName")
.DataValueField("Id")
.HtmlAttributes(new { required = "required", data_required_msg = "请选择装卸站", style = "width:100%" })
.BindTo(Model.OperativeModeList)
.AutoBind(false)
.OptionLabel("--请选择--")
)
</div>
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section HeadContent {
@RenderSection("HeadContent", false)
}
<script>
window.kendoTheme = "@ViewBag.Theme";
window.kendoCommonFile = "@ViewBag.CommonFile";
</script>
<script src="@Url.Content("~/Scripts/theme-chooser.js")"></script>
@Html.Partial("WebSearchScript")
<div id="example-sidebar">
<div id="example-search-wrapper" class="search-wrapper">
<div class="search">
<input id="example-search" placeholder="Search demos" />
</div>
</div>
<div id="example-nav-bar">
<a href="#" title="See all components" id="back-forward" class="back-nav">All Components</a>
</div>
<div id="nav-wrapper">
<div id="nav">
<div id="root-nav">
@foreach (IGrouping<string, NavigationWidget> category in ViewBag.WidgetCategories)
{
<ul class="root-nav-categories">
@if (category.Any(c => c.ShouldInclude()))
{
<li>
<h3>@category.Key</h3>
<ul class="root-nav-widgets">
@foreach (var widget in category)
{
if (widget.ShouldInclude())
{
<li>@Html.WidgetLink(widget, (string)ViewBag.NavProduct)</li>
}
}
</ul>
</li>
}
</ul>
}
</div>
<div id="example-nav">
<h3>@ViewBag.CurrentWidget.Text</h3>
<ul>
@foreach (NavigationExample example in ViewBag.CurrentWidget.Items)
{
if (example.ShouldInclude())
{
if (!string.IsNullOrEmpty(example.Group))
{
<li><span class="group">@example.Group</span></li>
}
<li>@Html.ExampleLink(example)</li>
}
}
</ul>
</div>
</div>
<script>
$("#back-forward").on("click", function (e) {
if ($(this).hasClass("back-nav")) {
$(this).removeClass("back-nav").addClass("forward-nav").text("@ViewBag.CurrentWidget.Text").attr("title", "See @ViewBag.CurrentWidget.Text demos");
$("#nav").addClass("root");
}
else {
$(this).removeClass("forward-nav").addClass("back-nav").text("All Components").attr("title", "See all components");
$("#nav").removeClass("root");
}
e.preventDefault();
});
function setSearchListWidth() {
$("#example-search").data("kendoExampleSearch");
}
$(document).ready(function () {
resizeContainers();
setSearchListWidth();
});
</script>
</div>
</div>
<div id="main">
<a href="#" id="sidebar-toggle"><span></span></a>
@Html.Partial("ThemeChooser")
<h1 id="exampleTitle">
@if (ViewBag.CurrentExample != null)
{
<span class="exampleIcon @ViewBag.CurrentWidget.SpriteCssClass"></span>
<strong>@ViewBag.CurrentWidget.Text @(ViewBag.CurrentExample.Url.Contains("dashboard") ? "" : "/")</strong> @ViewBag.CurrentExample.Text
}
</h1>
<div id="exampleWrap">
<script>$("#exampleWrap").css("visibility", "hidden");</script>
@{
<div id="example">
@RenderBody()
</div>
if (ViewBag.Description != null)
{
<div class="box demo-description wide">
<h4>Description</h4>
@Html.Raw(ViewBag.Description)
</div>
}
}
<script>
$(function(){ $("#exampleWrap").css("visibility", ""); });
</script>
</div>
@{
NavigationExample currentExample = ViewBag.CurrentExample;
NavigationWidget currentWidget = ViewBag.CurrentWidget;
var html = currentWidget.ShouldInclude("online");
var php = currentWidget.ShouldInclude("php");
var jsp = currentWidget.ShouldInclude("jsp");
}
@if (ViewBag.ShowCodeStrip == true)
{
<div id="wrappers-source-code">
<h2>ASP.NET MVC source</h2>
@if (html || php || jsp)
{
<div class="other-source">
<h4>Also available for:</h4>
<ul>
@if (html)
{
<li><a href="@Html.ProductExampleUrl(currentExample, "kendo-ui")">HTML5 / JavaScript</a></li>
}
@if (jsp)
{
<li><a href="@Html.ProductExampleUrl(currentExample, "jsp-ui")">JSP</a></li>
}
@if (php)
{
<li><a href="@Html.ProductExampleUrl(currentExample, "php-ui")">PHP</a></li>
}
</ul>
</div>
}
</div>
<div id="codeStrip">
<div class="buttons-wrap">
@if (!string.IsNullOrEmpty(ViewBag.Api))
{
<a class="documentation-link k-link" href="@ViewBag.Api">API Reference</a>
}
@{
IEnumerable<ExampleFile> examples = ViewBag.ExampleFiles;
}
</div>
@if (examples.Any())
{
<div id="source-code">
<ul>
@foreach (ExampleFile file in examples)
{
<li>@file.Name</li>
}
</ul>
@foreach (ExampleFile file in examples)
{
<div></div>
}
</div>
<script>
(function () {
var ts = $("#source-code").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
},
contentUrls: [
@Html.Raw(String.Join(",", examples.Select(file => "\"" + Url.Action("Index", "Source", new { path = file.Url } ) + "\"").ToArray()))
],
contentLoad: function (e) {
var content = $(e.contentElement);
if (content.is("#source-code-1")) {
var html = content.find('.prettyprint').text();
content.data("html", content.find('.prettyprint').text());
}
prettyPrint();
}
}).data("kendoTabStrip");
ts.select(0);
$(window).resize(function () {
ts.resize();
});
})();
</script>
}
</div>
}
<div id="resources-technologies" class="box">
@if (ViewBag.Forum != null || ViewBag.Documentation != null || ViewBag.CodeLibrary != null)
{
<div id="learning-resources" class="box-col">
<h4>Support & learning resources</h4>
<ul>
@if (ViewBag.Forum != null)
{
<li><a href="@ViewBag.Forum">Forums</a></li>
}
@if (ViewBag.CodeLibrary != null)
{
<li><a href="@ViewBag.CodeLibrary">Code Libraries</a></li>
}
@if (ViewBag.Documentation != null)
{
<li><a href="@ViewBag.Documentation">Documentation</a></li>
}
</ul>
</div>
}
<div id="technologies" class="box-col">
@if (html || php || jsp)
{
<h4>@ViewBag.CurrentWidget.Text for other technologies</h4>
<ul>
@if (html)
{
<li><a href="@Html.ProductExampleUrl(currentExample, "kendo-ui")">HTML5 / JavaScript</a></li>
}
@if (jsp)
{
<li><a href="@Html.ProductExampleUrl(currentExample, "jsp-ui")">JSP</a></li>
}
@if (php)
{
<li><a href="@Html.ProductExampleUrl(currentExample, "php-ui")">PHP</a></li>
}
</ul>
}
</div>
</div>
@Html.Partial("Footer")
</div>
<script>
$(window).on("resize", function() {
kendo.resize($(".k-chart"));
});
setTimeout(function(){ prettyPrint(); }, 100);
</script>
Kendo.Mvc.Examples\Controllers\DropDownList/IndexController.cs
namespace Kendo.Mvc.Examples.Controllers
{
using Kendo.Mvc.Examples.App_Start;
using System.Collections.Generic;
using System.Web.Mvc;
public partial class DropDownListController : Controller
{
[Demo]
public ActionResult Index()
{
TlcFloatTankViewModel model = new TlcFloatTankViewModel();
List<SysDataDictionaryDetailModel> ControlMeasuresList = new List<SysDataDictionaryDetailModel>();
ControlMeasuresList.Add(new SysDataDictionaryDetailModel { DetailName = "东区装卸站", Id = "1" });
ControlMeasuresList.Add(new SysDataDictionaryDetailModel { DetailName = "哈哈", Id = "2" });
ControlMeasuresList.Add(new SysDataDictionaryDetailModel { DetailName = "11222", Id = "3" });
ControlMeasuresList.Add(new SysDataDictionaryDetailModel { DetailName = "咚咚锵", Id = "4" });
ControlMeasuresList.Add(new SysDataDictionaryDetailModel { DetailName = "西区站点", Id = "5" });
model.ControlMeasuresList = ControlMeasuresList;
model.TransportModeList = ControlMeasuresList;
model.LastLoadList = ControlMeasuresList;
model.TankerStatusList = ControlMeasuresList;
model.ShipHoldStatusList = ControlMeasuresList;
model.OperativeModeList = ControlMeasuresList;
model.ControlMeasures = "1";
model.TransportId = "2";
model.LastLoad = "4";
model.TankerStatus = "4";
model.ShipHoldStatus = "5";
model.OperativeMode = "6";
return View(model);
}
}
}
Kendo.Mvc.Examples\Views\dropdownlist/index.cshtml
@*<div id="cap-view" class="demo-section k-content">
<h4>Customize your Kendo Cap</h4>
<div id="cap" class="black-cap"></div>
<h4>@Html.Label("color", "Cap Color")</h4>
@(Html.Kendo().DropDownList()
.Name("color")
.DataTextField("Text")
.DataValueField("Value")
.Events(e => e.Change("change"))
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "Black",
Value = "1"
},
new SelectListItem() {
Text = "Orange",
Value = "2"
},
new SelectListItem() {
Text = "Grey",
Value = "3"
}
})
.Value("1")
.HtmlAttributes(new { style = "width: 100%" })
)
<h4 style="margin-top: 2em;">@Html.Label("size", "Cap Size")</h4>
@(Html.Kendo().DropDownList()
.Name("size")
.BindTo(new List<string>() {
"S - 6 3/4\"",
"M - 7 1/4\"",
"L - 7 1/8\"",
"XL - 7 5/8\""
})
.HtmlAttributes(new { style = "width: 100%" })
)
<button class="k-button k-primary" id="get" style="margin-top: 2em; float: right;">Customize</button>
</div>
<style>
#cap {
width: 242px;
height: 225px;
margin: 20px auto;
background-image: url('@Url.Content("~/Content/web/dropdownlist/cap.png")');
background-repeat: no-repeat;
background-color: transparent;
}
.black-cap {
background-position: 0 0;
}
.grey-cap {
background-position: 0 -225px;
}
.orange-cap {
background-position: 0 -450px;
}
</style>
<script>
function change() {
var value = $("#color").val();
$("#cap")
.toggleClass("black-cap", value == 1)
.toggleClass("orange-cap", value == 2)
.toggleClass("grey-cap", value == 3);
};
$(document).ready(function () {
$("#get").click(function () {
var color = $("#color").data("kendoDropDownList"),
size = $("#size").data("kendoDropDownList");
alert('Thank you! Your Choice is:\n\nColor ID: ' + color.value() + ' and Size: ' + size.value());
});
});
</script>*@
@using Kendo.Mvc.Examples.App_Start
@model TlcFloatTankViewModel
@{
}
<div id="cap-view" class="demo-section k-content">
<h4>@Html.Label("color", "Cap Color")</h4>
@(Html.Kendo().DropDownListFor(x => x.ControlMeasures)
.DataTextField("DetailName")
.DataValueField("Id")
.HtmlAttributes(new { required = "required", data_required_msg = "请选择装卸站", style = "width:100%" })
.BindTo(Model.ControlMeasuresList)
.OptionLabel("--请选择--")
)
@(Html.Kendo().DropDownListFor(x => x.TransportId)
.DataTextField("DetailName")
.DataValueField("Id")
.HtmlAttributes(new { required = "required", data_required_msg = "请选择装卸站", style = "width:100%" })
.BindTo(Model.TransportModeList)
.OptionLabel("--请选择--")
)
@(Html.Kendo().DropDownListFor(x => x.LastLoad)
.DataTextField("DetailName")
.DataValueField("Id")
.HtmlAttributes(new { required = "required", data_required_msg = "请选择装卸站", style = "width:100%" })
.BindTo(Model.LastLoadList)
.OptionLabel("--请选择--")
)
@(Html.Kendo().DropDownListFor(x => x.TankerStatus)
.DataTextField("DetailName")
.DataValueField("Id")
.HtmlAttributes(new { required = "required", data_required_msg = "请选择装卸站", style = "width:100%" })
.BindTo(Model.TankerStatusList)
.AutoBind(false)
.OptionLabel("--请选择--")
)
@(Html.Kendo().DropDownListFor(x => x.ShipHoldStatus)
.DataTextField("DetailName")
.DataValueField("Id")
.HtmlAttributes(new { required = "required", data_required_msg = "请选择装卸站", style = "width:100%" })
.BindTo(Model.ShipHoldStatusList)
.AutoBind(false)
.OptionLabel("--请选择--")
)
@(Html.Kendo().DropDownListFor(x => x.OperativeMode)
.DataTextField("DetailName")
.DataValueField("Id")
.HtmlAttributes(new { required = "required", data_required_msg = "请选择装卸站", style = "width:100%" })
.BindTo(Model.OperativeModeList)
.AutoBind(false)
.OptionLabel("--请选择--")
)
</div>
0
Hi,
Since the widgets will be initialized within $(document).ready(), it is expected to see some delay when there is too many widgets and DOM elements on the page. For handling this you could place an overlay element and hide/remove it within $(document).ready().
Best Regards,
Konstantin Dikov
Progress Telerik
Since the widgets will be initialized within $(document).ready(), it is expected to see some delay when there is too many widgets and DOM elements on the page. For handling this you could place an overlay element and hide/remove it within $(document).ready().
Best Regards,
Konstantin Dikov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.