Kendo UI ASP.NET MVC - 网格 - 使用JavaScript隐藏复选框

I want to show or hide a Checkbox() based on a type variable I have.

我想根据我拥有的类型变量显示或隐藏Checkbox()。

The checkbox is rendered on a pop up Edit dialog for a Kendo Grid. This is in the EditorTemplate - code below:

该复选框在Kendo Grid的弹出编辑对话框中呈现。这是在EditorTemplate中 - 代码如下:

@model Publication

@Html.HiddenFor(model => model.DocumentUpdateId)

<div class="editor-label">
    @Html.LabelFor(model => model.PublicationTime)
</div>
<div class="editor-field">
    @(Html
        .Kendo()
        .DatePicker()
        .Name("PublicationTime")
    )
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.PdfModifiedDate)
</div>
<div class="editor-field">
    @(Html
        .Kendo()
        .Upload()
        .Name("PdfModifiedDate")
        .Multiple(false)
        .Async(a => a
                .Save("UploadFile","Home")
        )
        .Events(events => events
            .Upload("OnImageUpload")
        )
    )
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Carousel)
</div>
<div class="editor-field">
    @(Html
        .Kendo()
        .CheckBox()
        .Name("Carousel")
    )
</div>

I want to be able to access the checkbox and hide it based on the docType. My OnEdit event runs and renders the correct date for the calendar but doesn't hide the checkbox:

我希望能够访问该复选框并根据docType隐藏它。我的OnEdit事件运行并呈现日历的正确日期,但不隐藏复选框:

function OnEdit(e) {

  console.log("OnEdit");

  console.log(e);

  // set the default date
  var pt = $('#PublicationTime').data("kendoDatePicker");
  pt.value(new Date());

  var vm = e.model,
    container = e.container,
    docType = vm.DocumentType;
  vm.PublicationTime = new Date();
  vm.dirty = true;

  console.log(vm.DocumentType);
  console.log(docType.indexOf("Sector"));

  if (docType.indexOf("Sector") < 0) {
    console.log("inside if statement")
    console.log(container.find("#Carousel"));

    container.find("#Carousel").hide();
  }
}

The Kendo documentation doesn't have anything about accessing a checkbox. I also tried to create a checkbox in the OnEdit event but that also didn't work - it just didn't seem possible.

Kendo文档没有关于访问复选框的任何内容。我还尝试在OnEdit事件中创建一个复选框,但这也没有用 - 它似乎不可能。

1 个解决方案

#1

since kendo checkbox is more than just a simple input.. try putting the checkbox inside another container and hiding the container instead.

因为kendo复选框不仅仅是一个简单的输入..尝试将复选框放在另一个容器中并隐藏容器。

<div class="carousel-checkbox">
    <div class="editor-label">
        @Html.LabelFor(model => model.Carousel)
    </div>
    <div class="editor-field">
        @(Html
            .Kendo()
            .CheckBox()
            .Name("Carousel")
        )
    </div>
</div>

if (docType.indexOf("Sector") < 0) {
    console.log("inside if statement")
    console.log(container.find("#Carousel"));
    container.find(".carousel-checkbox").hide();
}

if you only want to hide the checkbox and not the label, add the carousel-checkbox class to the div containing the checkbox <div class="editor-field carousel-checkbox">

如果您只想隐藏复选框而不是标签,请将carousel-checkbox类添加到包含复选框

的div中

#1