Hello,
I have a problem with validation message for DatePicker in UI for ASP.NET MVC.
Property in model:
[DataType(DataType.Date, ErrorMessage =
"Please enter a valid date. - TEST"
)]
public
DateTime FromDateTime {
get
;
set
; }
Part of my cshtml file:
@
(Html
.Kendo
()
.DatePickerFor
(model => model.Filter
.FromDateTime
)
.Name
(
"Filter.FromDateTime"
)
.Format
(DateTimeFormats
.DateTimeFormat
)
.ParseFormats
(DateTimeFormats
.ParseFormat
)
.HtmlAttributes
(
new
{
@class
=
"form-control"
, style =
"width: 100%"
})
)
@Html
.ValidationMessageFor
(model => model.Filter
.FromDateTime
,
""
,
new
{
@class
=
"text-danger"
})
This is part of the html page which is generated from the cshtml file:
<input name=
"Filter.FromDateTime"
class
=
"form-control k-input input-validation-error"
id
=
"Filter_FromDateTime"
role=
"combobox"
aria-disabled=
"false"
aria-expanded=
"false"
aria-invalid=
"true"
aria-required=
"true"
aria-describedby=
"Filter_FromDateTime-error"
aria-owns=
"Filter_FromDateTime_dateview"
style=
"width: 100%;"
type=
"text"
value=
"20. 4. 2016"
data-val-required=
"Toto datum musí být vyplněno."
data-val-date=
"The field FromDateTime must be a date."
data-val=
"true"
data-role=
"datepicker"
>
Image of the part of the html page from webbrowser is in file "datepickerError.png".
The problem is in the content of the validation message. Message in my model is "Please enter a valid date. - TEST" but message in html is "The field FromDateTime must be a date."
I want to create localization of this message and change its content. How can I do it?
Thank you for your advice.
Hello.
I have the following DataTable (dataTable.JPG attached file), I want to generate a chart that looks similar to the attached file (Chart.png)
It has up to 3 levels of grouping as you can see in the chart, how can I accomplish this in charts for ASP.NET MVC?
Thank you.
Hi,
I'm having a problem with the aggregates on my server-bound grid. Here's my code:
@(Html.Kendo().Grid(Model[j].BusinessUnitTimesheets)
.Name("BU_Time" + j)
.DataSource(d => d
.Server()
.Aggregates(ag =>
{
ag.Add(a => a.Amount).Sum();
ag.Add(a => a.Hours).Sum();
})
)
.Columns(columns =>
{
columns.Bound(c => c.BusinessUnitId)
.Hidden();
columns.Bound(c => c.BusinessUnitCodeAndName)
.Title("Business Unit")
.ClientFooterTemplate("Total");
columns.Bound(c => c.Hours)
.Format("{0:N2}")
.HtmlAttributes(new { style = "text-align:right;" })
.ClientFooterTemplate("#=sum#")
.FooterHtmlAttributes(new { style = "text-align:right;" });
columns.Bound(c => c.Amount)
.Width(100).Format("{0:N2}")
.HtmlAttributes(new { style = "text-align:right;" })
.ClientFooterTemplate("#=kendo.toString(sum,'N2')#")
.FooterHtmlAttributes(new { style = "text-align:right;" });
})
.DetailTemplate(
@<
text
>
@(Html.Kendo().Grid(item.UserTime)
.Name(string.Format("BU_U_Time{0}_{1}", j, item.BusinessUnitId))
.DataSource(d => d
.Server()
.Aggregates(ag =>
{
ag.Add(a => a.Hours).Sum();
ag.Add(a => a.Amount).Sum();
})
)
.Events(e => e.DataBinding("splitBound"))
.Columns(columns =>
{
columns.Bound(c => c.UserName)
.Title("User");
columns.Bound(c => c.Hours)
.Format("{0:N2}")
.HtmlAttributes(new { style = "text-align:right;" })
.ClientFooterTemplate("#=sum#")
.FooterHtmlAttributes(new { style = "text-align:right;" });
columns.Bound(c => c.Amount)
.Width(100)
.Format("{0:N2}")
.HtmlAttributes(new { style = "text-align:right;" })
.ClientFooterTemplate("#=kendo.toString(sum,'N2')#")
.FooterHtmlAttributes(new { style = "text-align:right;" });
})
)
</
text
>
)
)
I've attached a screenshot of the rendered grid. The totals are in the wrong columns for the parent grid, and both parent and child have sums that are zero.
Thanks
Hi, what am I doing wrong here? I can get the data out properly, but it won't sort. It seems to work the same in both MVC (razor) and in javascript.
It should have all the names (Resource) in alpha order... but it seems to be sorting by the PriorityColorString
MVC
@(Html.Kendo().Chart<
Model
>()
.Name("Resources")
.Title("Resource")
.Legend(leg => leg.Visible(false))
.DataSource(ds => ds.Read(
read => read.Action("GetAlertResources", "Hierarchy"))
.Group(grp =>
{
grp.Add(x => x.AlertTypeCount);
}
).Sort(x => x.Add(srt => srt.Resource)))
//)
.ChartArea(chart => chart
.Width(600).Height(600))
.SeriesDefaults(seriesDefaults =>
seriesDefaults
.Bar().Gap(0)
.Stack(true))
.Series(series =>
{
series.Bar(x => x.AlertTypeCount)
.Labels(lab => lab.Position(ChartBarLabelsPosition.Center).Opacity(0).Visible(true))
.Field("AlertTypeCount")
.CategoryField("Resource")
.ColorField("ColorField");
})
.CategoryAxis(ct => ct.MajorGridLines(maj => maj.Visible(false)))
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("<
p
style
=
'width: 200px; text-align: left;'
><
span
style
=
'display: inline-block; font-weight: bold;'
>Priority Color:</
span
> #= dataItem.ColorText #</
p
>" +
"<
p
style
=
'width: 200px; text-align: left;'
><
span
style
=
'display: inline-block; font-weight: bold;'
>Resource:</
span
> #= dataItem.Resource #</
p
>" +
"<
p
style
=
'width: 200px; text-align: left;'
><
span
style
=
'display: inline-block; font-weight: bold;'
>Number of Records:</
span
> #= value #")
))
javascript:
var
data =
[
{ AlertTypeCount:1,ColorField:
"#D62728"
,ColorText:
"1=High"
,PriorityColorString:
"1"
,Resource:Albert },
{ AlertTypeCount:6,ColorField:
"#BCBD22"
,ColorText:
"2=Medium"
,PriorityColorString:
"2"
,Resource:Simon },
{ AlertTypeCount:12,ColorField:
"#FF7F0E"
,ColorText:
"4=Other"
,PriorityColorString:
"4"
,Resource:Theodore },
{ AlertTypeCount:9,ColorField:
"#BCBD22"
,ColorText:
"3=Low"
,PriorityColorString:
"3"
,Resource:Albert },
{ AlertTypeCount:30,ColorField:
"#D62728"
,ColorText:
"1=High"
,PriorityColorString:
"1"
,Resource:Albert },
{ AlertTypeCount:10,ColorField:
"#D62728"
,ColorText:
"1=High"
,PriorityColorString:
"1"
,Resource:Theodore },
{ AlertTypeCount:3,ColorField:
"#1F77B4"
,ColorText:
"2=Low"
,PriorityColorString:
"3"
,Resource:Simon },
{ AlertTypeCount:1,ColorField:
"#1F77B4"
,ColorText:
"3=Low"
,PriorityColorString:
"3"
,Resource:Pedro },
{ AlertTypeCount:4,ColorField:
"#BCBD22"
,ColorText:
"2=Medium"
,PriorityColorString:
"2"
,Resource:Marvin }
]
$(
"#chart"
).kendoChart({
dataSource: {
transport: {
read: {
url:
"/Hierarchy/GetAlertResources"
,
dataType:
"json"
}
},
group:
[
{ field:
"AlertTypeCount"
}
],
sort:
[
{ field:
"Resource"
, dir:
"asc"
},
]
},
chartArea: {
width: 600,
height: 600
},
title: {
align:
"left"
,
text:
"Resources"
},
legend: {
visible:
false
},
seriesDefaults: {
type:
"bar"
,
gap: 0.1,
stack:
true
},
series: [{
field:
"PriorityColorString"
,
categoryField:
"Resource"
,
colorField:
"ColorField"
,
labels: {
visible:
true
,
opacity: 0,
position:
"center"
}
}],
categoryAxis: {
majorGridLines: {
visible:
false
}
},
tooltip: {
visible:
true
,
template:
"<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Priority Color:</span> #= dataItem.ColorText #</p>"
+
"<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Resource:</span> #= dataItem.Resource #</p>"
+
"<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Number of Records:</span> #= value #"
}
});
Hello,
We are currently developing with the Diagram control.
I have a question, how do we customize the ribbon's toolbar above it? (see screenshot)
I am reading conflicting tutorials about this, some say it is a WIDGET, but then i read toolbar in some places.
Is there an example somewhere how to, for example add a button with an customized onclick?
Gr from John
Hello!I have a problem, where I try to insert color picker in grid
.CSHTML:
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Title(Resources.Resource.Id);
columns.Bound(p => p.Name).Title(Resources.Resource.Name);
columns.Bound(p => p.Text).Title(Resources.Resource.Text);
columns.Bound(p => p.Color).Title(Resources.Resource.Color)
.ClientTemplate("<div style='background-color: #: Color#;padding:10px; border: 1px solid black;'></div>")
.EditorTemplateName("Color");
columns.Bound(p => p.Description).Title(Resources.Resource.Description);
columns.Command(command => { command.Edit(); });
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(m => m.Id);
model.Field(m => m.Id).Editable(false);
model.Field(m => m.Name).Editable(false);
})
.Read(read => read.Action("Read", "OrderStatus"))
.Update(update => update.Action("Update", "OrderStatus"))
)
)
Color Editor Template:
@model string
@(Html.Kendo().ColorPickerFor(
m => m))
As a result i get any nonsence (1.jpg)
I want to get this(2.png)
Please, help me.
My grid shows only 1 page of data until I apply a filter and then clear it. Having done that, it instantly shows all 28 pages.
1. does anyone have any idea what might be causing this?
2. is there any way to get it to recalculate the page list at the bottom of the grid after loading using a javascript command?
Here is the grid:
@(Html.Kendo().Grid<tpnconnect.com.AdminService.DeviceDataEdit>()
.Name("deviceGrid")
.Columns(columns =>
{
columns.Bound(d => d.DepotNumber).Width(60);
columns.Bound(d => d.DeviceName).Width(150);
columns.Bound(d => d.DeviceAlias).Width(150);
columns.Bound(d => d.AutoMode).Width(100).Title("Auto Mode").EditorTemplateName("AutoMode").ClientTemplate("#:AutoModeDisplay#");
columns.Bound(d => d.CreatedDate).Title("Created").Format("{0:dd-MMM-yy HH:mm}").Width(80);
columns.Bound(d => d.Active).Width(40).Filterable(true);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Filterable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(d => d.DeviceID))
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Create(update => update.Action("AddDevice", "Printer"))
.Read(read => read.Action("GetAllDevicesForEdit", "Printer"))
.Update(update => update.Action("UpdateDevice", "Printer"))
.Destroy(update => update.Action("DeleteDevice", "Printer"))
)
)
Hi,
I have a chart,
Purpose of the chart will say total of male & female, based on the country & nationality wise. Successfully generate the chart
Here is the fiddle, i created.
jsFiddle example
For the reference
How to categories the series label.
I am trying to position the series name similar like this (Capture.JPG)..
Suggest me how can i generate
@(Html.Kendo().Chart()
.Name("chart")
.Title("Gender Summay based on the total")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.Series(series =>
{
series.Column(new double[] { 54, 5 }).Name("2010 Bah")
.Labels(labels =>
labels.Template("#= series.name #")
.Background("transparent")
.Visible(true));
series.Column(new double[] { 24, 21 }).Name("2010 Non Bah").Labels(labels =>
labels.Template("#= series.name #")
.Background("transparent")
.Visible(true));
series.Column(new double[] { 54, 5 }).Name("2011 Bah").Labels(labels =>
labels.Template("#= series.name #")
.Background("transparent")
.Visible(true));
series.Column(new double[] { 24, 21 }).Name("2011 Non Bah")
.Labels(labels =>
labels.Template("#= series.name #")
.Background("transparent")
.Visible(true));
series.Column(new double[] { 10, 52 }).Name("2012 Bah")
.Labels(labels =>
labels.Template("#= series.name #")
.Background("transparent")
.Visible(true));
series.Column(new double[] { 12, 65 }).Name("2012 Non Bah")
.Labels(labels =>
labels.Template("#= series.name #")
.Background("transparent")
.Visible(true));
})
.CategoryAxis(axis => axis
.Categories("Male", "FeMale")
.Justify(true)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}")
.Template("#= series.name # : #= value #")
)
)
I have a requirement where the user needs to be able to Clone or Add & Clone lots and lots of records from within the modal Kendo window. Currently, there are only two buttons at the bottom of the window: Update and Cancel. I've looked all over the web and the support area here, but cannot find any example or docs on how to accomplish adding custom actions and buttons within the modal Kendo window.
As you can see, the basic scenario is pretty straightforward and very handy for working with lots of similar data. The form should NOT close, but stay open after the submit occurs.
How can I achieve this functionality within a modal Kendo window control (using the toolbar)?
Thanks.