加载时，剑道下拉列表显示DataValueField在DataTextField之前

Kendo DropDownList Shows DataValueField Prior to DataTextField when Loading

本文关键字：DataValueField 列表显示 DataTextField 之前 加载      更新时间：2023-09-26

下面的代码加载了一个剑道下拉列表，但是在页面呈现时，它首先显示的是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()
    )

问题可能是由.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样式将使下拉列表文本框在屏幕上占用空间，即使隐藏，所以你将避免闪烁和布局调整。

相关文章：