MVC KendoUI: how to disable NumericTextBox allowing an empty value?

Question

I have a KendoUI grid which allows the user to update the values using inline mode. The problem is that I have two double attributes that doesn't allow null values, but however the NumericTextBox give me to set an empty value, and then accept it, as you can see in the following image:

If you press "Aceptar" ("Accept") button the input stays empty, but it saves "0" in the database, and you can see it only when you refresh the page. This is the code of the grid:

 @(Html.Kendo().Grid<ReferenceThresholdVM>()
                .Name("grdReference")
                .Columns(columns =>
                    {
                        columns.Bound(t => t.txbTransponderName).Title("Transponder").Width(120);
                        columns.Bound(t => t.txbDataSourceName).Title("Variable").Width(200);
                        columns.ForeignKey(t => t.ddlReferenceTypeId, ReferenceTypeVM.GetComboList(), "Id", "Description").Title("Modo").Width(110);
                        columns.Bound(t => t.ntbThreshold).Title("Umbral").Width(100);
                        columns.Bound(t => t.ntbCurrentValue).Title("Valor de referencia").Format("{0:n2}").Width(170);
                        columns.Bound(t => t.ntbHysteresis).Title("Histeresis").Format("{0:n2}").Width(100);
                        columns.Bound(t => t.ntbThresholdTrigger).Title("Umbral de disparo").Format("{0:n2}").Width(150);
                        columns.Command(command =>
                                           {
                                               command.Edit().CancelText("Cancelar").UpdateText("Confirmar"); 
                                               command.Destroy();
                                           }).Width(220).HtmlAttributes(new { style = "text-align: center;" });
                                   })
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Pageable()
                .Navigatable()
                .Sortable()
                .Events(e => e.Save("onSave"))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(12)
                    .ServerOperation(false)
                    .Events(events => events.Error("error_handler"))
                    .Model(model =>
                        {
                            model.Id(t => t.Id);
                            model.Field(t => t.Id);
                            model.Field(t => t.txbTransponderName).Editable(false);
                            model.Field(t => t.txbDataSourceName).Editable(false);
                            model.Field(t => t.ddlReferenceTypeId);
                            model.Field(t => t.ntbThreshold);
                            model.Field(t => t.ntbHysteresis);

                            model.Field(t => t.ntbCurrentValue).Editable(false);
                            model.Field(t => t.ntbThresholdTrigger).Editable(false);

                        })
                    .Read(read => read
                        .Action("Read_Reference", "Reference")
                        .Data("getFilterReference")
                    )
                    .Update("Reference_Update", "Reference")
                    .Destroy("Reference_Destroy", "Reference")
                )
                .Events(events => events.DataBound("onGrdReferenceDataBound"))
                .AutoBind(false)
              )

And each of this attributes is defined this way by using a UIHint that defines some behavior for the input:

[Display(Name = "Umbral")]
[UIHint("PositiveNumber")]
public double ntbThreshold
{
    get;
    set;
}

[Display(Name = "Histeresis")]
[UIHint("PositiveNumber")]
public double ntbHysteresis
{
    get;
    set;
}

and finally this is the code for the UIHint "PositiveNumber":

@model int?

@(Html.Kendo().NumericTextBoxFor(m => m)
      .HtmlAttributes(new { @class = "k-numerictextbox" })
      .Min(0)
      .Max(int.MaxValue)
      .Value(0)
)

Is there a way to disable the possibility the let the NumericTextBox empty?

Answer 1

Thanks to everyone guys! I solve it by using the "Required" decorator on the attributes.

    [Required] /*this is the important thing!*/
    [Display(Name = "Umbral")]
    [UIHint("PositiveNumber")]
    public double? ntbThreshold
    {
        get;
        set;
    }

    [Required]
    [Display(Name = "Histeresis")]
    [UIHint("PositiveNumber")]
    public double? ntbHysteresis
    {
        get;
        set;
    }

So now, when you try to set an empty value it shows you a validation error. So if you want to set a 0 on the NumericTextBox, you'll have to write it.

Answer 2

The tooltip for .Value on the numeric Textbox says, "sets the initial value of the textbox". So that looks like why it is saving 0 in the db.

As per my comment, you might actually have to do something like this.

var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");

 numerictextbox.value(0);