This is a migrated thread and some comments may be shown as answers.

DropDownList The binding indicates that the data is delayed

10 Answers 494 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
ghd258 ghd258
Top achievements
Rank 1
ghd258 ghd258 asked on 01 Aug 2017, 01:41 AM

DropDownList  The binding indicates that the data is delayed

The first step shows the value

Second step display text

10 Answers, 1 is accepted

Sort by
0
ghd258 ghd258
Top achievements
Rank 1
answered on 01 Aug 2017, 02:52 AM

UI for ASP.NET MVC   is also the case

Other controls also load html first     After loading styles

0
ghd258 ghd258
Top achievements
Rank 1
answered on 01 Aug 2017, 12:17 PM

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?

 

0
ghd258 ghd258
Top achievements
Rank 1
answered on 01 Aug 2017, 12:19 PM

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?

0
Joana
Telerik team
answered on 03 Aug 2017, 02:45 PM
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
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 04 Aug 2017, 12:31 AM
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
0
Joana
Telerik team
answered on 08 Aug 2017, 02:38 PM
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
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, 05:29 AM

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

0
ghd258 ghd258
Top achievements
Rank 1
answered on 09 Aug 2017, 05:31 AM

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

0
ghd258 ghd258
Top achievements
Rank 1
answered on 09 Aug 2017, 05:36 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>

 

0
Joana
Telerik team
answered on 11 Aug 2017, 11:34 AM
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
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.
Tags
DropDownList
Asked by
ghd258 ghd258
Top achievements
Rank 1
Answers by
ghd258 ghd258
Top achievements
Rank 1
Joana
Telerik team
Share this question
or