Kendo UI MVC - 在HtmlAttributes中显示无

时间:2015-10-21 10:40:35

标签: kendo-asp.net-mvc

嗨,我有一个像这样的剑道组合框:

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

&#34;显示:无&#34;没有工作,它隐藏了输入&#34;标签但不是&#34; span&#34;标记:

<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仍然可见。

3 个答案:

答案 0 :(得分:3)

我遇到了这个问题,并且可以使用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();

答案 1 :(得分:0)

使用javascript和jquery隐藏它:

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

答案 2 :(得分:0)

使用以下代码隐藏kendoDatePicker

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