Kendo DropDownList显示DataValueField加载前的DataTextField

Question

以下代码加载Kendo DropDownList，但在页面呈现时，它首先在DataTextField之前显示DataValueField。它在一秒之后绑定到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() 
    ) 

Answer 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的文本框即使在隐藏时也占用屏幕上的空间，所以您将避免闪烁和布局重新调整。