I was having binding issues using the kendo-datepicker tag helper using a DateTimeOffset property from my pagemodel, and could only find threads about this being a known issue. so I created my own custom tag helper that inherits from DatePickerTagHelper, and added this code to the Process method:
if (For.Metadata.ModelType == typeof(DateTimeOffset))
{
var dto = (DateTimeOffset)For.Model;
Value = dto.Date;
}
My dates now render when the page loads, and are properly passed during the post. All of my previous attempts only allowed one or the other. Are there any issues with this approach that I might be missing?
Hi,
I saw on another thread that it is not advisable to use signalR as a datasorce in the grid if you plan on using editing. I am currently working on a project where I plan to do exactly that. I would like to know why that might cause problems.
So far I have an example project where I implemented CRUD operations to a database using the grid and a signalR hub and it seems to work pretty well. The live update only works once, but I haven't tried to troubleshoot that problem yet so it might be a simple fix.
It's also worth noting that I am not using in-line editing; I can see how that would take a bit more work to implement.
Thanks!
I am using ASP.NET Core MVC in this project. I want to have a row template show on the hover of a column value in the grid. So if the user is viewing products in a row format, when the user hovers over the Product Name the row would expand and show the custom row template showing details.
Are there any examples of this in action?
I must be missing something simple.
my directory structure is
Pages/Admin/Properties.
I've tried doing
.LoadContentFrom("Create")
.LoadContentFrom("Create.cshtml")
.LoadContentFrom("~/Pages/Admin/Properties/Create.cshtml")
.LoadContentFrom("~/Pages/Admin/Properties/Create")
.LoadContentFrom("/Pages/Admin/Properties/Create.cshtml")
.LoadContentFrom("~/Admin/Properties/Create")
.LoadContentFrom("/Admin/Properties/Create")
.LoadContentFrom("~/Admin/Properties/Create..cshtml")
.LoadContentFrom("/Admin/Properties/Create.cshtml")
All I ever get is an empty dialog. What's the secret ?
Thanks … Ed
My code is below:
001.
@page
002.
@model BNC.Pages.Admin.PropertiesModel
003.
@{
004.
ViewData["Title"] = "Properties";
005.
}
006.
007.
008.
009.
@using Kendo.Mvc.UI
010.
011.
<
h1
>Properties</
h1
>
012.
@(Html.Kendo().Window()
013.
.Name("AddNewDlg")
014.
.Width(750)
015.
.Height(1000)
016.
.Title("Add New Property")
017.
.Visible(false)
018.
.Actions(actions => actions.Refresh().Minimize().Maximize().Close())
019.
.Content("loading ...")
020.
.LoadContentFrom("Admin/Properties/Create")
021.
.Animation(true)
022.
.Events(ev => ev.Close("onCreateClose"))
023.
.Draggable(true)
024.
)
025.
<
div
class
=
"row"
>
026.
027.
<
div
class
=
"col-md-10"
>
028.
<
form
asp-route-returnUrl
=
"@Model.ReturnUrl"
asp-page-handler
=
"Properties"
029.
method
=
"post"
onkeydown
=
"return onKeyDown();"
>
030.
<
div
class
=
"form-group"
>
031.
032.
@(Html.Kendo().Grid<
PropertiesModel.PropertyModel
>
033.
()
034.
.Name("Properties")
035.
036.
.ToolBar(t =>
037.
{
038.
t.Custom().Text("Add New").Name("addNew");
039.
040.
t.Save().Text("Save Changes");
041.
})
042.
043.
044.
.DataSource(ds => ds
045.
.Ajax()
046.
.PageSize(20)
047.
.Events(ev => ev.Error("errorHandler"))
048.
.Model(m =>
049.
{
050.
m.Id(t => t.PropertyId);
051.
052.
m.Field(f => f.PropertyId).Editable(false);
053.
m.Field(f => f.PropertyName).Editable(true);
054.
m.Field(f => f.PropertyType).DefaultValue(ViewData["defaultPropertyType"] as Models.PropertyType);
055.
m.Field(f => f.Description).Editable(true);
056.
m.Field(f => f.IsFreeHold).Editable(true);
057.
m.Field(f => f.SquareFeet).Editable(true);
058.
059.
})
060.
.Read(a => a.Url("/Admin/Properties?handler=PropertiesRead").Data("forgeryToken"))
061.
.Update(a => a.Url("~/Admin/Properties?handler=PropertiesUpdate").Data("forgeryToken"))
062.
.Create(a => a.Url("/Admin/Properties/Create")
063.
.Data("forgeryToken"))
064.
.Destroy(a => a.Url("~/Admin/Properties?handler=PropertiesDestroy").Data("forgeryToken"))
065.
)
066.
067.
.Columns(columns =>
068.
{
069.
columns.Bound(t => t.PropertyId).Visible(false);
070.
columns.Bound(t => t.PropertyName).Title("Property").Width(150);
071.
columns.ForeignKey(t => t.PropertyType.PropertyTypeId, (System.Collections.IEnumerable)ViewData["propertytypes"], "PropertyTypeId", "Description");
072.
columns.Bound(t => t.Description).Title("Description").Width(150);
073.
columns.Bound(t => t.IsFreeHold).Title("Freehold").Width(150).ClientTemplate("<
input
type
=
'checkbox'
#=IsFreeHold ?
checked
=
'checked'
:'' # />"); ;
074.
columns.Bound(t => t.SquareFeet).Title("Square Feet").Width(150);
075.
//columns.Command(command => { command.Edit(); command.Destroy(); });
076.
077.
})
078.
.Sortable()
079.
///.Editable(editable => editable.Mode(GridEditMode.PopUp)
080.
// .TemplateName("Property"))
081.
.Pageable()
082.
.Scrollable()
083.
.Selectable()
084.
.HtmlAttributes(new { style = "height: 650px;" })
085.
)
086.
087.
088.
</
div
>
089.
090.
091.
</
form
>
092.
</
div
>
093.
</
div
>
094.
@section Scripts
095.
{
096.
<
script
type
=
"text/javascript"
>
097.
function onCreateClose() {
098.
099.
}
100.
$(function () {
101.
$('.k-grid-addNew').click(function (e) {
102.
//here need to render 'OrderPhraseSet.cshtml' separate (this is not a action just template ) template.
103.
//alert("Got it.")
104.
$("#AddNewDlg").data("kendoWindow").open();
105.
var win = $("#AddNewDlg").data("kendoWindow");
106.
win.center().open();
107.
108.
})
109.
})
110.
</
script
>
111.
<
style
>
112.
.k-grid tbody tr {
113.
line-height: 16px;
114.
}
115.
116.
.k-grid tbody td {
117.
padding: 5px;
118.
}
119.
120.
.k-grid-content tr td {
121.
border-left-width: 1px;
122.
}
123.
</
style
>
124.
125.
<
script
type
=
"text/javascript"
>
126.
127.
function forgeryToken(e) {
128.
console.log(e);
129.
return kendo.antiForgeryTokens();
130.
}
131.
function onKeyDown(e) {
132.
133.
if (event.keyCode == 13)
134.
return false;
135.
}
136.
function errorHandler(e) {
137.
debugger;
138.
if (e.errors) {
139.
var message = "Errors:\n";
140.
$.each(e.errors, function (key, value) {
141.
if ('errors' in value) {
142.
$.each(value.errors, function () {
143.
message += this + "\n";
144.
});
145.
}
146.
});
147.
alert(message);
148.
}
149.
}
150.
</
script
>
151.
}
01.
@page
02.
@addTagHelper "*, Kendo.Mvc"
03.
@model BNC.Pages.Admin.Properties.CreateModel
04.
@{
05.
Layout = "";
06.
}
07.
<
div
class
=
"container-fluid body-content"
>
08.
<
h1
>Create</
h1
>
09.
10.
<
h4
>Property</
h4
>
11.
<
hr
/>
12.
<
div
class
=
"row"
>
13.
<
div
class
=
"col-md-4"
>
14.
<
form
method
=
"post"
>
15.
<
div
asp-validation-summary
=
"ModelOnly"
class
=
"text-danger"
></
div
>
16.
<
div
class
=
"form-group"
>
17.
<
label
asp-for
=
"Property.Name"
class
=
"control-label"
></
label
>
18.
<
input
asp-for
=
"Property.Name"
class
=
"form-control"
/>
19.
<
span
asp-validation-for
=
"Property.Name"
class
=
"text-danger"
></
span
>
20.
</
div
>
21.
<
div
class
=
"form-group form-check"
>
22.
<
label
class
=
"form-check-label"
>
23.
<
input
class
=
"form-check-input"
asp-for
=
"Property.IsFreeHold"
/> @Html.DisplayNameFor(model => model.Property.IsFreeHold))
24.
</
label
>
25.
</
div
>
26.
<
div
class
=
"form-group"
>
27.
<
label
asp-for
=
"Property.SquareFeet"
class
=
"control-label"
></
label
>
28.
<
input
asp-for
=
"Property.SquareFeet"
class
=
"form-control"
/>
29.
<
span
asp-validation-for
=
"Property.SquareFeet"
class
=
"text-danger"
></
span
>
30.
</
div
>
31.
<
div
class
=
"form-group"
>
32.
<
label
asp-for
=
"Property.Description"
class
=
"control-label"
></
label
>
33.
<
input
asp-for
=
"Property.Description"
class
=
"form-control"
/>
34.
<
span
asp-validation-for
=
"Property.Description"
class
=
"text-danger"
></
span
>
35.
</
div
>
36.
<
div
class
=
"form-group"
>
37.
<
input
type
=
"submit"
value
=
"Create"
class
=
"btn btn-primary"
/>
38.
</
div
>
39.
</
form
>
40.
</
div
>
41.
</
div
>
42.
43.
<
div
>
44.
<
a
asp-page
=
"Index"
>Back to List</
a
>
45.
</
div
>
46.
</
div
>
47.
@section Scripts {
48.
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
49.
}
Using Kendo MVC and bind to the grid in a typical way. If the data set as a whole contains values in a column in a row not displaying in the current page the grouping feature does not see it.
How can you handle this? Does this page size need to be adjusted in a client side OnGrouping event fires?
Any suggestions appreciated.
I have an ASP.NET core app I've almost completed and I have an odd issue with a view (razor) that contains 2 Kendo grids. I have the culture set in _layout.cshtml using:
kendo.culture("en-GB");
At load of the view all currency columns in both grids correctly show the pound symbol. If I perform an action on the view that causes it to refresh or even if I manually refresh it, every currency value in the grid changes to display a dollar symbol instead. If I click on an item to edit it, which in both cases opens a popup, when I close the popup the grid I opened the popup from has resorted back to showing currency values with a pound symbol. The view itself also contains some kendo numerictextbox fields formatted as c0 or c2 and correctly show the pound symbol both before and after a refresh. Any ideas why the grids might be exhibiting this form of behaviour?
One other things that may be related, but shouldn't be, is I have a bootstrap modal defined in the view which shows a repeat of some of the fields from the main view along with another grid of related data.
How can I add a FontAwesome Icon to the Upload Button? I'm using the tag helper for the upload control.
<
kendo-upload
drop-zone
=
"drop-zone1"
name
=
"Input.RegulationDocument"
multiple
=
"false"
>
<
async
auto-upload
=
"true"
/>
<
validation
allowed-extensions
=
"@Model.AllowedExtensions"
/>
<
localization
select
=
"Upload PDF..."
clear-selected-files
=
"Remove PDF"
/>
</
kendo-upload
>