Hello,
I defined my class field “TeamCode” as string type and only accept 4 characters. It function well in regular Kendo TextBox. But it does not work on Kendo grid cell when do editing. Validation not happen when box lose cursor. I knew clicking submit/Add/Update button validation will go through, but I still hope validation occurring on lose cursor. Is anyone have an idea to do so? (Below are partial of code)
...
[StringLength(4, MinimumLength = 4, ErrorMessage = "{0} must be 4 characters.")]
[DisplayName("Team Code")]
public string TeamCode { get; set; }
…
Thanks.
How to configure the kendo MVC pivot grid so that it doesn't repeat dimension labels?
I am following this https://demos.telerik.com/aspnet-mvc/pivotgrid?_ga=2.172892198.404272527.1601250445-647083974.1600781368 and built a kendo grid (see the attached screenshot A) but I would like to get rid of the dimension labels so that it doesn't take too much space(See the attached screenshot B). How should I configure it?
Hi,
I'd like to add a grid in one of my steps but having a hard time figuring this out and no good examples. I'd like to load the content by calling my controller using the method ".LoadContentFrom("ActionName", "ControlerName");" which you have the ability to with many other controls but for now I think using a TemplateId will work?
Thanks,
This might not be the way to go but after a buttonclick i want to update the content of a grid. I do this by making an ajax request and setting a new datasource to the grid with the response. Only problem is after i have done that the search field no longer work
See dojo for example
https://dojo.telerik.com/uvAZuvEW/3
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>