Questions on UI for ASP.NET Core Forum

1 answer

155 views

Hi,

I'm so close I can taste it.

I have a razor page (we'll call Main) and it pops a windows from a button called AddItem.

That window, (AddItem) will pop another window from a button on it called AddFeature.

I can get the windows popping up just fine. However when I try to submit the form on the AddFeature window. I can't figure out how to close it afterward.

Bottom line is that when I click to save the new feature, the window does not close. The post happens and things get saved to the db, but it appears that my code to close the window does not get called. The code below is heavily redacted so there may be some typos but it should get the idea across.

The question remains, what's the right way to do this?

Any help would be great.

Code below:

<body>

<div class="container-fluid body-content">

@(Html.Kendo().Window()

.Name("AddItem")

// .Width(100)

// .Height(100)

.Resizable()

.Modal(true)

.Scrollable(true)

.Title("Add New User")

.Visible(false)

.Actions(actions => actions.Refresh().Minimize().Maximize().Close())

.Content("loading ...")

.LoadContentFrom(Url.Content("~/Admin/AddItem"))

.Animation(true)

.Draggable(true)

)

<form method="post" id="frmMain" asp-page-handler="Main" asp-page="Main">

.

javascript function to pop window in response to button click

function OnNewItem()

{

var win = $("#AddNewItem").data("kendoWindow");

win.center().open();

}

// now on the item page we have a button that pops the following window

<body>

<div class="container-fluid body-content">

@(Html.Kendo().Window()

.Name("AddNewFeature")

.Resizable()

.Modal(true)

.Scrollable(true)

.Visible(false)

.Actions(actions => actions.Refresh().Minimize().Maximize().Close())

.Content("loading ...")

.LoadContentFrom(Url.Content("~/Admin/AddFeature"))

.Animation(true)

.Draggable(true)

)

<form method="post" id="frmItem" asp-page-handler="Item" asp-page="Item">

.

// now on the feature page:

…

<input type="submit" id="update-button" onclick="DoSave();" class="btn btn-primary" value="Save" />

…

function DoSave()

{

$('#theNewFeatureForm').submit(function (e)

{

e.preventDefault();

$.ajax({

url: '/Admin/AddNewFeature',

type: 'POST',

dataType: 'json',

data: $(this).serialize(),

success: function (data)

{

var win = $("#AddNewFeature").data("kendoWindow");

win.close();

}

});

Window

answered on 19 Jun 2019

1 answer

361 views

DateTimeOffset Solution?

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?

Date/Time Pickers

answered on 19 Jun 2019

1 answer

286 views

Export parent and child grids to excel with tag helpers

I have a solution that has been built with tag helpers, and wants the added functionality of exporting both the parent and child grids. Is this possible via tag helpers?

Grid

answered on 19 Jun 2019

2 answers

151 views

Grid Editing with SignalR Datasorce

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!

Grid

answered on 18 Jun 2019

1 answer

124 views

Custom Row Template that expands on Mouse over

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?

Grid

answered on 17 Jun 2019

2 answers

395 views

LoadContentFrom doesn't

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. }

Window

answered on 14 Jun 2019

3 answers

245 views

Input string converted to Date

Is it possible to enter a string such as 10011989 and have it automatically changed to 10/01/1989?

Date/Time Pickers

answered on 13 Jun 2019

2 answers

573 views

Merge _Layout.cshtml with Kendo Client Side Resources

I am trying to modify _Layout.cshtml to allow for Telerik Net Core UI. Need to add Client side resources to the page, By merging Layout with Telerik recommendations. Have been attempting for a long time, but not working. How would I conduct this properly? Looking for a final result page.

https://docs.telerik.com/aspnet-core/getting-started/getting-started-copy-client-resources

Here is a Default Project Net Core

**_Layout.cshtml**

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - WebApplication8</title>

<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">WebApplication8</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>

<partial name="_CookieConsentPartial" />

<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2019 - WebApplication8</p>
</footer>
</div>

<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>

@RenderSection("Scripts", required: false)
</body>
</html>

**Telerik Recommends doing this, merging into the Layout Page:**

<head>
...

<environment include="Development">
...

<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-nova.min.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.nova.min.css" />
</environment>
<environment exclude="Development">
...

<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common-nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-nova.min.css"
asp-fallback-test-class="k-common-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />

<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.nova.min.css"
asp-fallback-test-class="k-theme-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
</environment>

<environment include="Development">
...

<script src="~/lib/jquery/dist/jquery.js"></script>

@* Place Kendo UI scripts after jQuery *@
<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
</environment>
<environment exclude="Development">
...

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>

@* Place Kendo UI scripts after jQuery *@
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
asp-fallback-test="window.kendo">
</script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.aspnetmvc.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
</script>
</environment>

...
</head>

**Final Result Page:?**

General Discussions

answered on 12 Jun 2019

3 answers

482 views

Data Grouping only works on the current page

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.

Grid

answered on 12 Jun 2019

2 answers

174 views

Column currency changing on view refresh

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.

Grid

answered on 11 Jun 2019