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.

Hello,
I tried to conditional set Grid column Editable status at run time as below code but caused page error. Could anyone give me advice how to do it? Thanks in advance.
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.JobTitle).Editable("isEditable"); <---
model.Field(p => p.FirstName).Editable(true);
model.Field(p => p.LastName).Editable(true);
})
<script>
function isEditable(dataItem) {
return dataItem.Id !=3;
}
</script>
I'm not sure if this only happens in the Grid, but I have been consistently getting a 404 error upon getting http://localhost/Content/kendo/2015.2.902/images/kendoui.woff?v=1.1. Any idea what might be happening?
Thanks.
Laurie
Hello all, I am using telerik MVC grid in my application, i have problem with the loading indicator in chrome browser but is shown in firefox(laptop with resolution 1680*1050), but the loading image is shown in both chrome and fiefox browsers in desktop with resolution 1920*1080. What could be the problem? has anyone has encountered this problem?
Hello,
Scheduler event color doesn't show with datasource autobind set to false
Datasource of the scheduler is being read after dropdownlist is loaded ...
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.read();
Once the editor was open and closed, the color of the events will be shown, see attachment.

We have a problem that after implementing the localization as described in article https://docs.telerik.com/aspnet-mvc/globalization/overview the text "items per page" is only localized after hitting F5 once. Initially it is always displayed in English.
I then created a vanilla Telerik MVC project incl. the grid, from the the default Telerik templates. When I activate paging there, the text is automatically correctly localized.
What I am wondering about ist, that I don't see any localized JS files in that project. Can you tell me how your template project applies the localization? It seems to differ from the mentioned article in this regard.
Regards
Kai
Hello,
I have problem in my timelineWeekview, that if too many Events are shown, the Columns will be shorter than the Scheduler (EventRow.png).
so I have this class in my css file :
#scheduler .k-scheduler-timelineWeekview tr:nth-child(2) td:nth-child(2) .k-scheduler-content .k-scheduler-table tbody tr{ height:100vh !important;}
what i need, is doing this in jquery and every time the user adds an Event (scheduler changes its Height !), it should change the height of this row too.
so i tried this :
$("#scheduler .k-scheduler-timelineWeekview tr:nth-child(2) td:nth-child(2) .k-scheduler-content .k-scheduler-table tbody tr").css("height","widget.height");
so i thought that the problem is from the css widget height, that I'm not being able to get the new height, so i tried too many other functions (hide(), remove(), attr(), . . . . . .), but the problem is that i can't select this classes.
any help will be great
thanks in advance
Blackout
