DropDownList The binding indicates that the data is delayed

[ghd258 ghd258]

DropDownList  The binding indicates that the data is delayed

The first step shows the value

Second step display text

[ghd258 ghd258]

UI for ASP.NET MVC   is also the case

Other controls also load html first     After loading styles

[ghd258 ghd258]

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?

 

[ghd258 ghd258]

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?

[Joana]

Hi,

If I understand correctly, the issue is that the DropDownList is taking some time to load and you'd like the show a ProgressBar and hide the widget until its data is loaded. For large amount of data we recommend the usage of our Virtualization feature: 

https://demos.telerik.com/kendo-ui/dropdownlist/virtualization

Could you please specify what is the exact scenario and definition of the dropdownlist and what is the expected behavior? If the issue is related to rendering empty input before initializing the widget, we suggest that display:none style is used.

Regards,
Joana
Progress Telerik

[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

[Joana]

Hello,

I have prepared a sample for you how you could display a loading icon and hide it once the dataSource of the dropdownlist is read: http://dojo.telerik.com/adeJIr.

If you are still having difficulties showing a progress indication while the dropdownlist is loaded, I suggest that you send us runnable sample where we could examine the behavior and provide resolution based on your project.

Regards,
Joana
Progress Telerik

[ghd258 ghd258]

DropDownList loads ID first, and then displays the text value,

The NumericTextBox interface loads a text box first, then displays the text box, followed by up and down arrow adjustments  

01Image

[ghd258 ghd258]

01Image

DropDownList loads ID first, and then displays the text value,

The NumericTextBox interface loads a text box first, then displays the text box, followed by up and down arrow adjustments

[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>

 

[Joana]

Hi,

I see that you have modified our demos to test your scenario. Could you please send us the Model you are using, so that we will be able to run the same scenario on our side and examine it?

I tried to reproduce the issue with similar configuration, but everything works as expected on my end.

Regards,
Joana
Progress Telerik