NumericTextBox and DropDownList After you load the html, the loading style will appear whether you can do both

[ghd258 ghd258]

The drop-down list loads the text before the value is loaded, and the text and value are not synchronized

The digital text box loads the text box first, and then loads the up and down arrow styles, whether it can be done asynchronously or simultaneously, rather than requiring two changes to complete the display

As shown in Figure 1 and Figure 2, when the page is loaded, the scene appears
1, flash down after the figure 2, the amount of data is not large, there will be this situation, whether it can directly display the effect of Figure 2

 

How can you load the process shown in Figure 1, with the progress bar display, and so on, the process of Figure 1 loaded finished, shown in Figure 2

[Ivan Danchev]

Hello,

Could you demonstrate the described behavior in a sample runnable project or in a dojo example? See this one for instance, in which the three DropDownLists do not display the selected item's value on loading. After they are loaded the item's text is shown.

Regards,
Ivan Danchev
Progress Telerik

[ghd258 ghd258]

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>

[Ivan Danchev]

Hello,

The posted code snippet is not runnable due to missing dependencies and we do not know the amount of data loaded in each of the DropDownList, however we can suggest you to consider using the DropDownList's virtualization functionality (documentation and demo), which improves performance by loading only subsets of items. You can also give the Deferred Initialization functionality a try. It would allow you to initialize wrappers (specified by calling their .Deferred() method) after others are initialized:

@Html.Kendo().DeferredScripts()

Through deferred initialization you can initialize the DropDownLists later than the other widgets/wrappers on the page.


Regards,
Ivan Danchev
Progress Telerik