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

Using a NumericTextBoxFor to edit decimals in a Grid

3 Answers 23 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Veteran
Robert asked on 23 Sep 2020, 01:56 PM

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.

3 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 25 Sep 2020, 06:25 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Robert
Top achievements
Rank 1
Veteran
answered on 28 Sep 2020, 01:01 PM

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.


0
Eyup
Telerik team
answered on 30 Sep 2020, 12:19 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Robert
Top achievements
Rank 1
Veteran
Answers by
Eyup
Telerik team
Robert
Top achievements
Rank 1
Veteran
Share this question
or