New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Edit Nullable Boolean Fields in InLine Editable Grid

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I edit nullable boolean fields in an InLine editable Grid?

Solution

You can achieve this requirement using the following implementation:

Add the nullable boolean field to the Model that binds to the Grid:
C#
```
public bool? Available { get; set; }
```

Add the following JavaScript logic before the Grid definition:

    // Define custom nullable boolean binder, so the DropDownList editor can update the Model and vice-versa.
    kendo.data.binders.widget.nullableBoolean = kendo.data.Binder.extend({
        init: function (widget, bindings, options) {
            kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);

            this.widget = widget;
            this._change = $.proxy(this.change, this);
            widget.bind("change", this._change);
        },

        refresh: function () {
            var that = this,
                value = that.bindings.nullableBoolean.get();

            that.widget.value(value !== null ? value.toString() : "");
        },

        change: function () {
            var that = this,
                value = that.widget.value(),
                modelValue = value === "true" ? true : value === "false" ? false : null;
            that.bindings.nullableBoolean.set(modelValue);
        },

        destroy: function () {
            this.widget.unbind("change", this._change);
        }
    });

Define the Grid:

Razor

@(Html.Kendo().Grid<Telerik.Examples.Mvc.Areas.GridEditingInLineNullableBoolean.Models.InLineEditingProduct>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitsInStock).Width(100);
        columns.Bound(p => p.Available).Width(100);
        columns.Command(command => command.Edit()).Width(180);
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(p => p.ProductID);
        })
        .Read(read => read.Action("Read", "Home"))
        .Update(update => update.Action("Update", "Home"))
    )
)

Create a custom editor template with name Boolean in the ~/Views/Shared/EditorTemplates/ folder. The Grid will use this editor for all boolean fields that bind to its columns.

Razor

@using Kendo.Mvc.UI

@model bool?

@if (ViewData.ModelMetadata.IsNullableValueType)
{
    @(
        Html.Kendo().DropDownListFor(model => model)
            .Items(items =>
            {
                items.Add().Text("Not Set");
                items.Add().Text("True").Value("true");
                items.Add().Text("False").Value("false");
            })
            // Specify that the default value binidng must not be set and set the "nullableBoolean" binding.
            .HtmlAttributes(new { data_skip = true, data_bind = "nullableBoolean:" + ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)})
    )
}
else
{
    <input type="checkbox" @(Model.Value ? "checked='checked'" : "") />
}

To see the complete example, refer to the project on how to edit a nullable boolean field using a DropDownList editor in the InLine editable Grid.

Edit Nullable Boolean Fields in InLine Editable Grid

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also