Limiting the editable text to a number

[Purna]

 

How can I limit the editable text to a positive number .

 

My Grid is as follows:

 

    @(Html.Kendo().Grid<TelerikMvcApp1.Models.ProductViewModel>()
                                                                .Name("Grid")
                                                                .DataSource(dataSource => dataSource //Configure the Grid data source.
                                                                    .Ajax() //Specify that Ajax binding is used.
                                                                    .Batch(true)

                                                                    .ServerOperation(false) //Paging, sorting, filtering, and grouping will be done client-side.
                                                                    .Read(read => read
                                                                    .Action("Products", "Home")) //Set the action method which will return the data in JSON format.
                                                                                                 //.Data("productsReadData") //Specify the JavaScript function which will return the data.
                                                                    .Model(model => model.Id(p => p.Id))
                                                                )
                                                                .Columns(columns =>
                                                                {
                                                                    columns.Bound(P => P.Id).Title("ID").Width(20).Editable("NoEditing").HtmlAttributes(new { style = "text-align:center" }).HeaderHtmlAttributes(new { style = "text-align:center" });
                                                                    columns.Bound(P => P.ProductName).Title("Product Name").Width(40).Editable("NoEditing").HtmlAttributes(new { style = "text-align:center" }).HeaderHtmlAttributes(new { style = "text-align:center" });
                                                                    columns.Bound(P => P.Price).Editable("AllowEditing").HtmlAttributes(new { style = "text-align:center" }).HeaderHtmlAttributes(new { style = "text-align:center" }).Width(30); //.ClientTemplate("<input type=\"number\" value=#= Inches # min=\"0\" max=\"11\" step=\"1\" ></input>");

                                                    })
                                                                .Editable(editable => editable.Mode(GridEditMode.InCell))
                                                                //.Pageable() // Enable paging
                                                                .Sortable() // Enable sorting
                                                                .Scrollable()
                                                                .Filterable()
                                                                .Navigatable()
                                                                .HtmlAttributes(new { style = "height: 300px;" })
    )

 

<script>
    function AllowEditing(dataItem) {
        return true;
    }

    function NoEditing(dataItem) {
        return false;
    }

 

I tried adding a ClientTemplate which is commented above. But that didn't work.

 

[Tsvetomir]

Hi Purna,

The range of the allowed inputs can restricted by decorating the respective field with data attributes. Setting the Range data attribute would ensure that the validation would be thrown in case of a negative number.

[Range(0, int.MaxValue)]
public decimal UnitPrice
{
    get;
    set;
}

If you would like to completely restrict the user from setting a negative number, you might opt for setting the Min() property to the editor template. For instance, if the editor template is a Kendo UI NumericTextBox, set it as follows:

@model decimal?

@(Html.Kendo().NumericTextBoxFor(m => m)
      .HtmlAttributes(new {style="width:100%"})
      .Min(0)
)

Give this suggestion a try and let me know how it works out for you.


Kind regards,
Tsvetomir
Progress Telerik