加载时，Kendo DropDownList 在 DataTextField 之前显示 DataValueField答案

【问题标题】：Kendo DropDownList Shows DataValueField Prior to DataTextField when Loading加载时，Kendo DropDownList 在 DataTextField 之前显示 DataValueField
【发布时间】：2016-08-16 14:08:28
【问题描述】：

以下代码加载一个 Kendo DropDownList，但在页面呈现时，它首先显示 DataValueField，然后是 DataTextField。它在一秒钟后很好地绑定到 DataTextField，但我不想在它呈现时显示数值。有谁知道在渲染的第一秒只显示 DataTextField 值而不显示 DataValueField 的方法？

@(Html.Kendo().DropDownList()
              .Name("SomeName")
              .DataTextField("SomeTextField")
              .DataValueField("SomeValueField")
              .DataSource(source => {
                  source.Read(read => {
                      read.Url(Url.ExtensionMethodThatReturnsURL("SomeAction", "SomeController"));
                  }).ServerFiltering(true);
              })
              .HtmlAttributes(new { @Class = "some-class" })
              .Value(businessKey.ToString())
              .Events(e => e.Change("Some.Javascript.onEventHandler"))
              .Deferred()
    )

【问题讨论】：

标签： javascript asp.net-mvc kendo-ui

【解决方案1】：

该问题可能是由.Deferred() 语句引起的，该语句延迟了小部件初始化，直到通过延迟的脚本呈现为止

@Html.Kendo().DeferredScripts()

我假设在 DropDownList 文本框的呈现和小部件初始化之间发生了一些耗时的事情。因此，您在普通的未初始化文本框中看到了数值。我有两个建议：

如果可能，将 DeferredScripts() 调用靠近 DropDownList 声明。
如果上述方法不可行或没有产生所需的结果，则暂时隐藏 DropDownList，直到它被初始化。

例如：

DropDownList 和 JavaScript

@(Html.Kendo().DropDownList()
    .Name("products")
    .DataTextField("ProductName")
    .DataValueField("ProductID")
    .Filter("contains")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetProducts", "Home");
        })
        .ServerFiltering(true);
    })
    .Value("3")
    .Deferred()
    .HtmlAttributes(new { @class = "temporary-hidden" })
)

// ...Something else here...

@Html.Kendo().DeferredScripts()

<script>

    // place this script immediately after the DeferredScripts() call
    // and in a document.ready handler to ensure it is executed at the right time

    $(function () {
        $(".temporary-hidden").removeClass("temporary-hidden");
    })

</script>

CSS

.temporary-hidden
{
    visibility: hidden;
}

与display:none 不同，visibility:hidden 样式将使 DropDownList 文本框即使在隐藏时也会占用屏幕空间，因此您将避免闪烁和重新调整布局。

【讨论】：