javascript - mvc - Kendo DropDownList muestra DataValueField antes de DataTextField al cargar

kendo ui dropdownlist template

Question

El siguiente código carga un DropDownList de Kendo, pero mientras la página lo muestra primero muestra el DataValueField anterior al DataTextField. Se une muy bien a DataTextField después de un segundo, pero no me gustaría mostrar el valor numérico mientras se procesa. ¿Alguien sabe de una manera de hacer que solo se muestre el valor de DataTextField y no DataValueField durante ese primer segundo mientras se procesa?

@(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

El problema probablemente sea causado por la .Deferred() , que retrasa la inicialización del widget hasta que los scripts diferidos se procesen a través de

@Html.Kendo().DeferredScripts()

Supongo que hay algo que consume tiempo entre la representación del cuadro de texto DropDownList y la inicialización del widget. Por lo tanto, está viendo el valor numérico dentro del cuadro de texto sin inicializar. Tengo dos sugerencias:

• mueva la llamada DeferredScripts() más cerca de la declaración DropDownList, si es posible.
• si lo anterior no es posible o no produce el resultado deseado, oculte la DropDownList temporalmente hasta que se inicialice.

Por ejemplo:

DropDownList y 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;
}

Al contrario de lo que se display:none , la visibility:hidden estilo visibility:hidden hará que el cuadro de texto DropDownList ocupe espacio en la pantalla incluso mientras está oculto, por lo que evitará el parpadeo y los reajustes de diseño.