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:

enter image description here

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?

CSharper · Answer 1 · 2014-02-20T15:07:50.563

1

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);

edited Feb 20 '14 at 15:07

answered Feb 20 '14 at 14:45

CSharper

5,420
6
28
54

The problem is not the fact that is loading a 0 on the database, the main problem is that isn't shows you this 0 until you refresh the page. – Mauro Bilotti Feb 20 '14 at 14:51
try giving the Numeric tb an Id and in Jquery do this `$("#Id").val(0)` that should throw a 0 in it – CSharper Feb 20 '14 at 15:05
I can't do that because Kendo has a bug when you call two or more elements with the same id. As you could see, I defined the template on UIHint, so I can't use the .Name("id") because it should call both elements with the same id on the div... are you understand? Thanks anyway! – Mauro Bilotti Feb 20 '14 at 15:10
Yea you cant have two id's for any framework. ...So name it differently? – CSharper Feb 20 '14 at 15:18
how can I do it from the UIHint? :S Even in the grid I think that is not posible... because I had used the same UIHint for the whole solution. – Mauro Bilotti Feb 20 '14 at 15:22
1

not there do it in the view. change `.HtmlAttributes(new { @class = "k-numerictextbox" })` to be id. The syntax is either @id = "w.e" or its just id = "w.e" – CSharper Feb 20 '14 at 15:23

score 0 · Accepted Answer · answered Feb 20 '14 at 15:30

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.

enter image description here

You should accept your own question at once, to prevent it to be displayed as unsolved. — Bruno Machado - vargero, Mar 13 '14 at 19:55

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

2 Answers2