Kendo DropDownList在加载时在DataTextField之前显示DataValueField [英] Kendo DropDownList Shows DataValueField Prior to DataTextField when Loading

问题描述

以下代码加载Kendo DropDownList，但是在页面呈现时，它首先在DataTextField之前显示DataValueField.一秒钟后，它就可以很好地绑定到DataTextField上，但是我不想在渲染时显示数字值.有谁知道一种只显示DataTextField值而不显示的第一秒的DataValueField的方法吗?

The following code loads a Kendo DropDownList, but while the page renders it first shows the DataValueField prior to the DataTextField. It binds just fine to the DataTextField after a second, but I would not like to show the numeric value while it renders. Does anyone know of a way to make only the DataTextField value be shown and not the DataValueField for that first second while it renders?

@(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()语句引起的，该语句将窗口小部件的初始化延迟到通过以下方式呈现的延迟脚本为止.

The problem is probably caused by the .Deferred() statement, which delays the widget initialization until the deferred scripts are rendered via

@Html.Kendo().DeferredScripts()

我假设在DropDownList文本框的呈现和小部件初始化之间会花费一些时间.因此，您会在普通的未初始化文本框中看到数值.我有两个建议:

I assume there is something time consuming taking place between the rendering of the DropDownList textbox and the widget initialization. So you are seeing the numeric value inside the plain non-initialized textbox. I have two suggestions:

• 尽可能将DeferredScripts()调用移至DropDownList声明附近.
• 如果以上操作无法实现或无法产生预期的结果，请暂时隐藏DropDownList，直到对其进行初始化.

• move the DeferredScripts() call closer to the DropDownList declaration, if possible.
• if the above is not possible or does not yield the desired result, then hide the DropDownList temporarily until it is initialized.

例如:

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文本框即使在隐藏时也占据屏幕上的空间，因此可以避免闪烁和布局调整.

Contrary to display:none, the visibility:hidden style will make the DropDownList textbox occupy space on the screen even while hidden, so you will avoid flickering and layout readjustments.

这篇关于Kendo DropDownList在加载时在DataTextField之前显示DataValueField的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！