Kendo DropDownList 在加载时先于 DataTextField 显示 DataValueField [英] Kendo DropDownList Shows DataValueField Prior to DataTextField when Loading
问题描述
以下代码加载 Kendo DropDownList,但在页面呈现时,它首先显示 DataValueField,然后是 DataTextField.一秒钟后它绑定到 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屋!