Questions on UI for ASP.NET Core Forum

2 answers

595 views

I have added a date time picker to a kendo grid custom pop-up template. It shows up with out the Calendar and time selector icons. Attached is an image to describe this better.

This is where I am adding the date time to the template

1.<div class="form-group">

2. <label asp-for="ScheduledSendDate" class="col-md-2 control-label"></label>

3. <div class="col-md-10">

4. <input id="date-input" asp-for="ScheduledSendDate" class="form-control" />

5. <span asp-validation-for="ScheduledSendDate" class="text-danger"></span>

6. </div>

7. </div>

In the shared editor template folder I have defined the following template for datetimes

1.@model DateTime?

2.

3.@(Html.Kendo().DateTimePickerFor(m => m)

4. .Min(DateTime.Now)

5. )

I show no errors in chrome developer tools and I have imported all of the kendo css and js into _Layout.cshtml

Any help would be fantastic.

Date/Time Pickers

answered on 20 Jun 2019

1 answer

194 views

Binding a Grid to SignalR AND remote datasource as fallback

Hello,

is it possible to configure a grid with SignalR binding and binding to remote data as fallback?

For example: The grid uses SignalR to show changes using SignalR immediately. If there is a SignalR failure the grid refreshes all 10s by itself, by requesting data from the controller.

I had in mind, that i call the read method with a timer. But i have no idea how to configure the read method to do both, SignalR and reading from the controller.

Or do i have to create a second view with a Grid binding to remote data and switch the views if SignalR is not available?

Thanks

Michael

Grid

answered on 20 Jun 2019

1 answer

158 views

Need help with nested windows

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

365 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

291 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

154 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

134 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

408 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

247 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

588 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