Kendo UI ASP.NET MVC - Grid - Hide Checkbox using JavaScript

Question

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

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

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

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.

Answer 1

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

<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">