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

html and js binding indicates that the data is delayed

4 Answers 143 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
ghd258 ghd258
Top achievements
Rank 1
ghd258 ghd258 asked on 03 Aug 2017, 12:23 AM
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 Answers, 1 is accepted

Sort by
0
ghd258 ghd258
Top achievements
Rank 1
answered on 03 Aug 2017, 12:26 AM
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?
0
Angel Petrov
Telerik team
answered on 07 Aug 2017, 11:07 AM
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.
0
ghd258 ghd258
Top achievements
Rank 1
answered on 09 Aug 2017, 09:27 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
Konstantin Dikov
Telerik team
answered on 14 Aug 2017, 07:10 AM
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.
Tags
General Discussions
Asked by
ghd258 ghd258
Top achievements
Rank 1
Answers by
ghd258 ghd258
Top achievements
Rank 1
Angel Petrov
Telerik team
Konstantin Dikov
Telerik team
Share this question
or