Questions on UI for ASP.NET Core Forum

1 answer

115 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

367 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

227 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

540 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

457 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

158 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

2 answers

982 views

Add FontAwesome Icon to Upload Button

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>

Upload

answered on 11 Jun 2019

1 answer

899 views

MultiSelect Select All Issue

Visual Studio 2017

.Net Core 2.2

Telerik 2019.2.514

I have a multiselect on a page that I am using a tag template to show the number of items selected out of the number of total items in the control. This works fine except that I also have a button the user can click to select all of the items in the multiselect. Once the user clicks the button another box appears with all of the items selected underneath the multiselect. The multiselect does not change to show the number selected. If I click the button numerous times, each time another box appears showing all of the selected items below the last one. What am I doing wrong?

I have attached a screenshot and my code below.

Thanks, Rich

@using (Html.BeginForm(actionName: null, controllerName: null, method: FormMethod.Post, htmlAttributes: new { name = "myForm", id = "myForm", onkeydown = "return event.keyCode!=13" }))
{
<div class="text-center">
<label class="control-label FL">Select Unit(s)</label>
@(Html.Kendo().MultiSelect().Name("msUnit").BindTo(new SelectList(ViewBag.Unit, "Value", "Text")).TagMode(MultiSelectTagMode.Single).TagTemplateId("UnitTagTemplate").AutoClose(false).HtmlAttributes(new { @class = "CB FL W200" }))
@(Html.Kendo().Button().Name("btnSelectAllUnit").Content("Select All").HtmlAttributes(new { type = "button", style = "clear:both;float:left;border:solid;border-width:thin;background-color:lightgrey;height:25px;width:200px;" }).Events(events => events.Click("btnSelectAllUnitClick")))
</div>
}
<script id="UnitTagTemplate" type="text/x-kendo-template">
#:values.length# out of #:maxTotal#
</script>
<script>
function btnSelectAllUnitClick() {
var msUnit = $("#msUnit").kendoMultiSelect().data("kendoMultiSelect");
var values = $.map(msUnit.dataSource.data(), function (dataItem) {
return dataItem.value;
});
msUnit.value(values);
}
</script>

public IActionResult Index()
{
List<SelectListItem> units = new List<SelectListItem>()
{
new SelectListItem() {Text="0001", Value="0001"},
new SelectListItem() { Text="0001", Value="0002"},
new SelectListItem() { Text="0003", Value="0003"},
new SelectListItem() {Text="0004", Value="0004"},
new SelectListItem() { Text="0005", Value="0005"},
new SelectListItem() { Text="0006", Value="0006"},
new SelectListItem() {Text="0007", Value="0007"},
new SelectListItem() { Text="0008", Value="0008"},
new SelectListItem() { Text="0009", Value="0009"},
new SelectListItem() {Text="0010", Value="0010"},
new SelectListItem() { Text="0011", Value="0011"},
new SelectListItem() { Text="0012", Value="0012"},
};
ViewBag.Unit = units;
return View();
}

MultiSelect

answered on 11 Jun 2019

2 answers

133 views

Asp.net core ui kendo-grid and IE11

Hi,

I couldn't find info about supported browsers for ASP.NET Core UI components.

I have built asp.net core app with kendo-grid on it (bach editing, dropdowns). It works as expected with Chrome and Edge, but it doesn't render at all with IE11.

Any known issues, workarounds, documentation available?

Grid

answered on 11 Jun 2019

2 answers

465 views

Editable Dropdown in Grid Populated from ViewBag

Hi,

https://demos.telerik.com/aspnet-mvc/grid/editing-custom

The above link discusses adding a dropdown in editable mode to select from a list. What if I don't want the list to come from the model? I'm trying to bind the dropdown to a ViewBag of names populated from an LDAP query (ie not the database). What do I put in the ClientTemplate section?

Thanks,
Brian

Grid

answered on 10 Jun 2019