This is a migrated thread and some comments may be shown as answers.

Limiting the editable text to a number

1 Answer 265 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Purna
Top achievements
Rank 1
Purna asked on 26 Apr 2019, 12:13 AM

 

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.

 

1 Answer, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 26 Apr 2019, 11:35 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Purna
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Share this question
or