DropDownList The binding indicates that the data is delayed

11 posts, 0 answers
  1. ghd258 ghd258
    ghd258 ghd258 avatar
    37 posts
    Member since:
    Jan 2005

    Posted 31 Jul Link to this post

    DropDownList  The binding indicates that the data is delayed

    The first step shows the value

    Second step display text

  2. ghd258 ghd258
    ghd258 ghd258 avatar
    37 posts
    Member since:
    Jan 2005

    Posted 31 Jul in reply to ghd258 ghd258 Link to this post

    UI for ASP.NET MVC   is also the case

    Other controls also load html first     After loading styles

  3. ghd258 ghd258
    ghd258 ghd258 avatar
    37 posts
    Member since:
    Jan 2005

    Posted 01 Aug in reply to ghd258 ghd258 Link to this post

    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?

     

  4. ghd258 ghd258
    ghd258 ghd258 avatar
    37 posts
    Member since:
    Jan 2005

    Posted 01 Aug in reply to ghd258 ghd258 Link to this post

    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?

  5. Joana
    Admin
    Joana avatar
    125 posts

    Posted 03 Aug Link to this post

    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.
  6. ghd258 ghd258
    ghd258 ghd258 avatar
    37 posts
    Member since:
    Jan 2005

    Posted 03 Aug in reply to Joana Link to this post

    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
  7. Joana
    Admin
    Joana avatar
    125 posts

    Posted 08 Aug Link to this post

    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.
  8. ghd258 ghd258
    ghd258 ghd258 avatar
    37 posts
    Member since:
    Jan 2005

    Posted 09 Aug in reply to Joana Link to this post

    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

  9. ghd258 ghd258
    ghd258 ghd258 avatar
    37 posts
    Member since:
    Jan 2005

    Posted 09 Aug in reply to ghd258 ghd258 Link to this post

    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

  10. ghd258 ghd258
    ghd258 ghd258 avatar
    37 posts
    Member since:
    Jan 2005

    Posted 09 Aug in reply to ghd258 ghd258 Link to this post

    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>

     

  11. Joana
    Admin
    Joana avatar
    125 posts

    Posted 11 Aug Link to this post

    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.
Back to Top