Kendo UI MVC - 在HtmlAttributes中显示无

Question

嗨，我有一个像这样的剑道组合框：

@(Html.Kendo().ComboBox()
     .Name("LHWR")
     .HtmlAttributes(new { style = "width:150px; font-size:small; display:none" })
     .BindTo(new List<SelectListItem>() {
            new SelectListItem() {
               Text = "Leave unchanged", Value = "0"
            },
            new SelectListItem() {
                Text = "Deactivate", Value = "1"
            },
            new SelectListItem() {
                Text = "Activate", Value = "2"
            }
      })
      .SelectedIndex(0)
)

“display：none”不起作用，它隐藏了“input”标签，但没有隐藏“span”标签：

<span class="k-widget k-combobox k-header" style="width: 150px; font-size: small;">
 <span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default">
   <input name="LHWR_input" class="k-input" type="text" autocomplete="off" maxlength="524288" role="combobox" aria-expanded="false" tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="LHWR_listbox" aria-activedescendant="LHWR_option_selected" aria-busy="false" style="width: 100%; font-size: small;">
   <span tabindex="-1" unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1" aria-controls="LHWR_listbox">select</span>
 </span>
</span>
<input id="LHWR" name="LHWR" style="width: 150px; font-size: small; display: none;" type="text" data-role="combobox" aria-disabled="false" aria-readonly="false"></span>

然后ComboBox仍然可见。

Answer 1

我遇到了这个问题，可以使用display: none，但你可能会遇到与显示器有冲突的问题，例如：内联样式覆盖它等。最快的非jQuery解决方案是简单地在.HtmlAttributes()中给它一个类，如下所示：

@(Html.Kendo().ComboBox()
     .Name("LHWR")
     .HtmlAttributes(new { style = "width:150px; font-size:small;", @class = "hiddenInputBoxClass" })
     .BindTo(new List<SelectListItem>() {
            new SelectListItem() {
               Text = "Leave unchanged", Value = "0"
            },
            new SelectListItem() {
                Text = "Deactivate", Value = "1"
            },
            new SelectListItem() {
                Text = "Activate", Value = "2"
            }
      })
      .SelectedIndex(0)
)

然后添加到您的css样式表：

.hiddenInputBoxClass {
    display: none;
}

这是有效的，因为通过HtmlAttributes()添加的类将应用于封闭的span字段，然后将隐藏您的元素。

作为参考，与其他答案相反，在jQuery中执行此操作（根据Telerik）的正确方法如下：

$("#LHWR").data("kendoComboBox").wrapper.hide();

Answer 2

使用javascript和jquery隐藏它：

$(document).ready(function() {
    $("#LHWR").closest(".k-widget").hide();
});

Answer 3

使用下面的代码隐藏kendoDatePicker

 $("#kendo-date-picker-id").data("kendoDatePicker").wrapper.hide();