html and js binding indicates that the data is delayed

5 posts, 0 answers
  1. ghd258 ghd258
    ghd258 ghd258 avatar
    60 posts
    Member since:
    Jan 2005

    Posted 02 Aug 2017 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?
  2. ghd258 ghd258
    ghd258 ghd258 avatar
    60 posts
    Member since:
    Jan 2005

    Posted 02 Aug 2017 in reply to ghd258 ghd258 Link to this post

    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?
  3. Angel Petrov
    Admin
    Angel Petrov avatar
    1153 posts

    Posted 07 Aug 2017 Link to this post

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

    Posted 09 Aug 2017 in reply to Angel Petrov 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>
  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 14 Aug 2017 Link to this post

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