Kendo Grid弹出编辑器复选框绑定正常但无法勾选的技术求助

Let's break down the issues and fix your checkbox problem step by step:

1. The Core Issue: Missing Hidden Field for False Value #

HTML checkboxes don't submit a value when unselected, which causes headaches with ASP.NET's model binding (especially for boolean properties). Your manual HTML checkbox doesn't include the necessary hidden field to send false when the box is unchecked, which can confuse Kendo's binding logic and prevent toggling.

Fix: Use ASP.NET Tag Helpers or Kendo's Strongly-Typed Helpers #

Replace your raw HTML checkbox with either the asp-for tag helper (which auto-generates the hidden field) or Kendo's CheckBoxFor helper:

Option 1: Using ASP.NET Tag Helpers

<div class="form-check">
    <input asp-for="Active" class="form-check-input" />
    <label asp-for="Active" class="form-check-label">Active?</label>
</div>

This will render both the checkbox and a hidden input like <input type="hidden" name="Active" value="false" />, ensuring the model receives a valid boolean value regardless of the checkbox state.

Option 2: Using Kendo's CheckBoxFor

If you prefer the Kendo component, use the strongly-typed helper instead of setting the name manually:

<div class="editor-field">
    @(Html.Kendo().CheckBoxFor(model => model.Active)
        .Label("Active?")
    )
</div>

This also handles the hidden field automatically and ensures proper model binding.

2. Explicitly Define Boolean Field Type in Grid DataSource #

Sometimes Kendo's automatic type inference can fail for boolean fields. Add an explicit type definition in your Grid's DataSource model to ensure it treats Active as a boolean:

.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(40)
    .Aggregates(aggregates => { aggregates.Add(s => s.Active).Count(); })
    .Group(groups => groups.AddDescending(s => s.Active))
    .Sort(sort => { sort.Add("Number").Ascending(); })
    .Events(events => events.Error("error_handler"))
    .Model(model => {
        model.Id(s => s.Id);
        model.Field(s => s.Active).Type(typeof(bool)); // Explicitly set boolean type
    })
    // ... rest of your CRUD actions
)

3. Check for Event Blocking or Element Overlaps #

If the checkbox still doesn't toggle, use your browser's DevTools (F12) to:

• Inspect the checkbox element and ensure no other element is covering it (check z-index values in the Styles tab)
• Check the Event Listeners tab to see if any custom JavaScript is preventing the click event from firing

Modified Custom Editor Code #

Here's how your updated _Sku editor might look using the asp-for approach:

@model Durendal.Core.ViewModels.Entities.Sku.SkuViewModel 
<div class="row"> 
    <div class="col"> 
        <input asp-for="Id" type="hidden" /> 
        <div class="md-form md-bg"> 
            <input asp-for="BusinessLineName" class="form-control" /> 
            <label for="BusinessLineName" class="active">Business Line</label> 
        </div> 
        <div class="md-form md-bg"> 
            <input asp-for="Number" class="form-control" /> 
            <label for="Number" class="active">Number</label> 
        </div> 
        <div class="md-form md-bg"> 
            <input asp-for="Name" class="form-control" /> 
            <label for="Name" class="active">Name</label> 
        </div> 
        <div class="md-form md-bg"> 
            <input asp-for="Upc" class="form-control" /> 
            <label for="Upc" class="active">Upc</label> 
        </div> 
        <div class="form-check mt-3">
            <input asp-for="Active" class="form-check-input" />
            <label asp-for="Active" class="form-check-label">Active?</label>
        </div>
    </div> 
</div>

These changes should resolve the toggling issue by ensuring proper model binding and value submission.

内容的提问来源于stack exchange，提问作者Deke Darsey