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.

you can check the rendered input of the checkbox element to see what id/name is assigned to it by the kendo guys. based on that info you can use that handle in jquery to hide element — Muhammad Adeel Zahid
– Muhammad Adeel Zahid, Commented Nov 3, 2015 at 11:47
@MuhammadAdeelZahid That's what I am already doing but it's not being hidden. — Arminder Dahul
– Arminder Dahul, Commented Nov 3, 2015 at 12:03
since onEdit is defined on upload widget e.container will give you the html element containing upload widget not the one having carousel — Muhammad Adeel Zahid
– Muhammad Adeel Zahid, Commented Nov 3, 2015 at 13:21
kendo checkbox isn't like a regular checkbox.. it's using images to show checked state.. you'd have to hide everything — JamieD77
– JamieD77, Commented Nov 3, 2015 at 15:27

JamieD77 · Accepted Answer · 2015-11-03 15:35:49Z

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

answered Nov 3, 2015 at 15:35

JamieD77

14k1 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related