Using a NumericTextBoxFor to edit decimals in a Grid

[Robert]

I have a grid with a column that when not editing I want to show a percentage as 20.00% then when you click to edit, use a NumercTextBoxFor that will limit what you enter to only numerics and a single decimal, then round and/or limit to 2 decimal places (either is fine).

cshtml:

@{
    List<AllocationProducts> alloc = new List<AllocationProducts>();
    alloc.Add(new AllocationProducts { ProductID = 1, ProductName = "productOne", ProductType = "Model", ProductDescription = "Description one", ProductAllocation = 0.1 });
    alloc.Add(new AllocationProducts { ProductID = 2, ProductName = "product2", ProductType = "Model", ProductDescription = "Description two", ProductAllocation = 0.2 });
    alloc.Add(new AllocationProducts { ProductID = 3, ProductName = "product3", ProductType = "Model", ProductDescription = "Description three", ProductAllocation = 0.3 });
    alloc.Add(new AllocationProducts { ProductID = 4, ProductName = "product4", ProductType = "Model", ProductDescription = "Description four", ProductAllocation = 0.4 });

}

<div class="summary-view">
    @(Html.Kendo().Grid<AllocationProducts>(alloc)
            .Name("allocationProducts")
            .Columns(columns =>
            {
                columns.Bound(o => o.ProductID).Hidden(true);
                columns.Bound(o => o.ProductType).Title("PRODUCT TYPE").HeaderHtmlAttributes(new { style = "text-align: left;" }).Width("10%").HtmlAttributes(new { style = "padding-left: 10px;" });
                columns.Bound(o => o.AllocationAsWholeNumber).Title("TARGET WEIGHT").HeaderHtmlAttributes(new { style = "text-align: right;" }).Template(@<text></text>)
                    .ClientTemplate("<input type='text' id='ProductAllocation_#= ProductID #' value='#= kendo.format('{0:p}', ProductAllocation) #' style='padding: 2px; width: 91%; border: none; text-align: right;' class='product-allocation-input' />")
                    .HtmlAttributes(new { style = "text-align: right; padding-right: 10px;", @class = "product-allocation-field" })
                    .EditorTemplateName("KendoNumericTextBox");
            })
            .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .Batch(true)
            .Model(model =>
            {
                model.Id(o => o.ProductID);
            })
            )
            .Mobile()
            .Selectable()
            .PersistSelection()
            .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
            )

</div>

 

KendoNuericTextBox.cshtml:

@model double?

@(Html.Kendo().NumericTextBoxFor<double>(m => m)
            .Name("currency")
            .Spinners(false)
            .Decimals(2)
            .Format("p")
            .Min(0)
            .Max(100)
            .HtmlAttributes(new { style = "width: 100%", title = "currency" })
      )

 

Objects

public class AllocationProducts
{
    public int ProductID { get; set; }
    public int ClassID { get; set; }
    public string ProductType { get; set; }
    public string ProductName { get; set; }
    public string ProductDescription { get; set; }
    public double ProductAllocation { get; set; }
    public decimal ProductAllocationDecimal
    {
        get
        {
            return Convert.ToDecimal(ProductAllocation);
        }
    }
    public double AllocationAsWholeNumber
    {
        get
        {
            return ProductAllocation * 100;
        }
    }
    public string AllocationAsPercent
    {
        get
        {
            return ProductAllocation.ToString("p2");
        }
    }
}

 

When I run this, I get a standard input box rendered to HTML that allows characters and doesn't do any kind of rounding or limiting of chars.

[Eyup]

Hi Robert,

 

I've provided a response on the same matter in your official support ticket. I suggest that we continue our technical conversation on the mentioned thread.

 

Regards,
Eyup
Progress Telerik

[Robert]

Thanks.

That solves a couple of problems but still allows user to enter characters in the field (though it removes them when you click off the cell).  In addition, the user requirement is that the field is displayed and edited as ex. 20.12% would be edited as 20.12 instead of 0.2012.

 

I tried moving the UI tag in to model to AllocationAsWholeNumber (which multiplies by 100) but it still converts to a decimal for editing.

[Eyup]

Hi Robert,

 

I will provide a response on the other thread with the following name:
"Editing a percentage field in a grid"

Let's continue our technical conversation there.

 

Regards,
Eyup
Progress Telerik