Questions on UI for ASP.NET Core Forum

2 answers

129 views

TagHelper - stacked bar

For a bar chart there is a property Stack

HtmlHelper-Example:

.SeriesDefaults(sd => sd.Bar().Stack(true))

This I can not find in the TagHelper. How can I display a bar chart with stacked bars?

Chart

answered on 07 May 2019

4 answers

175 views

ImageBrowser shows "undefined" items

Hello,

I have problem with the ImageBrowser component inside the Editor component in .NET Core 2.2. (It's working in the local example, but I not find the difference)

I use the local example as starting point, I copy the code from the example to my project.

1. My controller:

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Net.Http.Headers;

using System.Threading.Tasks;

using Kendo.Mvc.UI;

using Microsoft.AspNetCore.Hosting;

using Microsoft.AspNetCore.Http;

using Microsoft.AspNetCore.Mvc;

using MyCoreSite.Models.Image;

using MyCoreSite.Mvc.Attributes;

namespace MyCoreSite.Areas.Admin.Controllers

{

[ViewLayout("_LayoutAdmin")]

public class ImageBrowserController : EditorImageBrowserController

{

private const string contentFolderRoot = "shared/";

private const string folderName = "Images/";

private static readonly string[] foldersToCopy = new[] { "shared/images/employees" };

/// <summary>

/// Gets the base paths from which content will be served.

/// </summary>

public override string ContentPath

{

get

{

return CreateUserFolder();

}

public ImageBrowserController(IHostingEnvironment hostingEnvironment)

: base(hostingEnvironment)

{

}

public override JsonResult Read(string path)

{

var z = base.Read(path);

return z;

}

private string CreateUserFolder()

{

var virtualPath = Path.Combine(contentFolderRoot, "UserFiles", folderName);

var path = HostingEnvironment.WebRootFileProvider.GetFileInfo(virtualPath).PhysicalPath;

if (!Directory.Exists(path))

{

Directory.CreateDirectory(path);

foreach (var sourceFolder in foldersToCopy)

{

CopyFolder(HostingEnvironment.WebRootFileProvider.GetFileInfo(sourceFolder).PhysicalPath, path);

}

return virtualPath;

}

private void CopyFolder(string source, string destination)

{

if (!Directory.Exists(destination))

{

Directory.CreateDirectory(destination);

}

foreach (var file in Directory.EnumerateFiles(source))

{

var dest = Path.Combine(destination, Path.GetFileName(file));

System.IO.File.Copy(file, dest);

}

foreach (var folder in Directory.EnumerateDirectories(source))

{

var dest = Path.Combine(destination, Path.GetFileName(folder));

CopyFolder(folder, dest);

}

2. My view:

@* Make sure tag helpers are not available for the Editor content *@

@removeTagHelper "*, Microsoft.AspNet.Mvc.Razor"

@removeTagHelper "*, Microsoft.AspNetCore.Mvc.Razor"

@{

ViewBag.Title = "Template";

PageInfo PI = ViewBag.PI;

}

<div class="content-heading">

<div>

Page title

<small>Subtitle</small>

</div>

<div class="row">

<div class="col-xl-12">

<url class="nav-link text-dark" asp-area="Admin" asp-controller="ImageBrowser" asp-action="Index"><localize>Image Browser</localize></url>

</div>

<div class="col-xl-12">

@(Html.Kendo().Editor()

.Name("editor")

.HtmlAttributes(new { style = "width: 100%;height:440px" })

.Tools(tools => tools

.Clear()

.Bold().Italic().Underline().Strikethrough()

.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()

.InsertUnorderedList().InsertOrderedList()

.Outdent().Indent()

.CreateLink().Unlink()

.InsertImage()

.InsertFile()

.SubScript()

.SuperScript()

.TableEditing()

.ViewHtml()

.Formatting()

.CleanFormatting()

.FontName()

.FontSize()

.ForeColor().BackColor()

.Print()

)

.ImageBrowser(imageBrowser => imageBrowser

.Image("~/shared/UserFiles/Images/{0}")

.Read("Read", "ImageBrowser")

.Create("Create", "ImageBrowser")

.Destroy("Destroy", "ImageBrowser")

.Upload("Upload", "ImageBrowser")

)

.Value(@<text>

<p>

Example

</p>

</text>)

)

</div>

@section Styles {

}

@section Scripts {

}

3. The result:

[Attached file: teler1.jpg]: It's shows undefined items. The image file structure can be find at the right. The item and file count are equal.

[Attached file: teler2.jpg]: It seems that the control detect the files as a directory instead of file.

4. Reference scripts used:

<script src="/js/telerik/jszip.min.js"></script>

<script src="/js/telerik/kendo.all.min.js"></script>

<script src="/js/telerik/kendo.aspnetmvc.min.js"></script>

<script src="/js/telerik/cultures/kendo.culture.en-US.min.js"></script>

<script src="/js/telerik/messages/kendo.messages.en-US.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {

kendo.culture("en-US");

});

</script>

Can you help me please solve this problem?

Thank you!

Editor

answered on 07 May 2019

1 answer

473 views

Editable Grid with Popup windows

I have requirement to allow editable row for one column in Parent row of Parent-Child Grid. I am able to display field in popup window by hiding all other non required field. But I am getting validation message for hide field while update the required field. Please help me to find out the solution either displays only required field in popup window without hiding all other fields or how to stop validation for non-required field in popup window. Below is my code in View:

@model IEnumerable<StarTrax.Mvc.Models.ToFindListViewModel>
@{
ViewData["Title"] = "View";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.Name).Width(110).Title("List Name");
columns.Bound(e => e.CreatedAt).Width(110).Title("Create Date").Format("{0:MM/dd/yyyy}");
columns.Bound("").Width(110).Title("Created By");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
})
.Editable(editable => editable.Mode(GridEditMode.PopUp)).HtmlAttributes(new { style = "width:300px;font-size:12px;height: 200px;" })
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.EntityId);
})
.Read(read => read.Action("GetAll", "ToFindList"))
.Update(update => update.Action("Edit", "ToFindList"))
.Destroy(update => update.Action("Delete", "ToFindList"))
)
.Events(events =>
{
events.DataBound("dataBound");
events.Edit("hideField");
})
)

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid< StarTrax.Mvc.Models.AssetToFindViewModel> ()
.Name("grid_#=EntityId#")
.Columns(columns =>
{
columns.Bound(o => o.Asset.EPC.BarCode).Width(110).Title("Barcode");
columns.Bound(o => o.Asset.SerialNumber).Width(110).Title("Serial Number");
columns.Bound(o => o.Asset.Name).Width(200).Title("Asset Name");
columns.Bound(o => o.Asset.Status).Width(200);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetToFindAssets", "ToFindList", new { toFindListId = "#=EntityId#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}

function hideField(e) {
$("#CreatedAt").hide();
$("#CreatedAt").editable = false;
$("label[for='CreatedAt']").hide();
$("#OrganizationId").hide();
$("#OrganizationId").editable = false;
$("label[for='OrganizationId']").hide();
$("#CreatedBy").hide();
$("#CreatedBy").editable = false;
$("label[for='CreatedBy']").hide();
$("#LastModifiedBy").hide();
$("#LastModifiedBy").editable = false;
$("label[for='LastModifiedBy']").hide();
$("#UpdatedAt").hide();
$("#UpdatedAt").editable = false;
$("label[for='UpdatedAt']").hide();
$("#EntityId").hide();
$("#EntityId").editable = false;
$("label[for='EntityId']").hide();
$("#Deleted").hide();
$("#Deleted").editable = false;
$("label[for='Deleted']").hide();
}
</script>

<script type="text/javascript">
function error_handler(e) {
debugger;
if (e.errors) {
var message = "Error:\n";

var grid = $('#locationGrid').data('kendoGrid');
var gridElement = grid.editable.element;

var validationMessageTemplate = kendo.template(

"<div id='#=field#_validationMessage' class='k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error' " +
"style='margin: 0.5em;' data-for='#=field#' data-val-msg-for='#=field#' role='alert'>" +
"<span class='k-icon k-warning'> " +
"</span > " +
"#=message#" +
"<div class='k-callout k-callout-n'> " +
"</div > " +
"</div>"
);

$.each(e.errors, function (key, value) {
if (value.errors) {
gridElement.find("[data-valmsg-for=" + key + "],[data-val-msg-for=" + key + "]").replaceWith(validationMessageTemplate({ field: key, message: value.errors[0] }));
gridElement.find("input[name=" + key + "]").focus();
//alert(value.errors[0]);
}
});

grid.one("dataBinding", function (e) {
e.preventDefault();
});
}
}
</script>

Grid

answered on 07 May 2019

1 answer

103 views

Inline Editable in Parent-Child Grid Row

I have Parent-Child Grid and I need to provide in-line editable feature in parent row in a particular cell. I have tried GridEditMode.InLine editable but it didn't allow to display the grid value. Please help me to find out the problem area below is my code in View:

@model IEnumerable<StarTrax.Mvc.Models.ToFindListViewModel>
@{
ViewData["Title"] = "View";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.Name).Width(110).Title("List Name");
columns.Bound(e => e.CreatedAt).Width(110).Title("Create Date").Format("{0:MM/dd/yyyy}");
columns.Bound("").Width(110).Title("Created By");
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(120);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model => model.Id(p => p.EntityId))
.Read(read => read.Action("GetAll", "ToFindList"))
.Update(update => update.Action("Edit", "ToFindList"))
.Destroy(destroy => destroy.Action("Delete", "ToFindList"))
)
.Events(events => events.DataBound("dataBound"))
)

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid< StarTrax.Mvc.Models.AssetToFindViewModel> ()
.Name("grid_#=EntityId#")
.Columns(columns =>
{
columns.Bound(o => o.Asset.EPC.BarCode).Width(110).Title("Barcode");
columns.Bound(o => o.Asset.SerialNumber).Width(110).Title("Serial Number");
columns.Bound(o => o.Asset.Name).Width(200).Title("Asset Name");
columns.Bound(o => o.Asset.Status).Width(200);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetToFindAssets", "ToFindList", new { toFindListId = "#=EntityId#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
<script>function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}</script>

Grid

answered on 07 May 2019

1 answer

152 views

excel-like filtering also in asp.net core?

Hi,

Is this also available for ASP.NET Core (MVC/Razor)? Or is this functionality limited to webforms?

https://demos.telerik.com/aspnet-ajax/grid/examples/functionality/filtering/excel-like-filtering/defaultcs.aspx

Thanks!

Grid

answered on 06 May 2019

3 answers

115 views

DropDownList on on tab with filtering

Hello,

I'm running into an issue where I cannot filter items in a DropDownList when I tab onto it when .Filter is enabled. When I tab onto the DropDownList I can cycle through items just fine with the arrow keys.

I'm aware of ALT + Down arrow to open up the DropDownList, and that works just fine, but I find that it is more intuitive to start typing once it has been selected, especially when filling out a form. I was wondering if it is possible to have the DropDownList open when it has been selected with Tab, or if there is a way to remap the shortcut.

DropDownList

answered on 06 May 2019

2 answers

212 views

Hide Filter Menu Icon

Hi,

Is there any option for hiding Filter Menu Icon ? I have seen there is a ShowFilterIcon option at Ajax Grid but i think its not available option for ASP.Net Core Grid.

Grid

answered on 02 May 2019

3 answers

515 views

Server Side Recurrence

Hi,

We want to use the .net core scheduler for people to define their availability online. This maybe as single meetings or a reoccurring meeting. This will probably use the standard web api and db schema used in the telerik examples. What I then need is a helper function that will return me all the periods of time a single user is available in a given week. I have read elsewhere that recurrence is client side only and that a library such as ical.net is needed to load/cast the data and then interpret it using its functions. However I see in this telerik example there is a class that seems to do this:

https://docs.telerik.com/devtools/aspnet-ajax/controls/scheduler/server-side-programming/working-with-recurring-appointments

Before I go down the ical.net path can someone confirm if there is standard telerik SERVER code to get back dates from recurring meetings saved by the schedule and maybe provide more details or an example?

Thanks, Matt

Scheduler

answered on 02 May 2019

1 answer

113 views

The Switch can't slide drag,just click

The same switch control in windos10 system,it can be slide drag:

press the block and drag,if it is samll distance,release the mouse,the block will go back,otherwise the distance exceed 30%-50%

Switch

answered on 01 May 2019

1 answer

205 views

Dropdown List Closes When Pressing Spacebar When Filtering

Hello,

We are currently using the Kendo DropDownList on our site using the FilterType.Contains filtering. Here is an example of how we have one of our dropdowns set up currently:

@(Html.Kendo().DropDownListFor(c => c.Explant.FacilityId)

.OptionLabel("-- Select a Facility --")

.HtmlAttributes(new { style = "width:40%", id = "facilityDropdown", @class = "dropdown" })

.BindTo(Model.Facilities.OrderBy(c => c.Name))

.DataTextField("Name")

.DataValueField("Id")

.Filter(FilterType.Contains))

The issue is, the user is able to open up the dropdown just fine by pressing the spacebar, however when they are typing into the filter textbox in the dropdown and try to click the spacebar to add another word to the filter, the space is applied to the filter textbox, but the dropdown closes automatically. This can be very annoying to our users who are trying to filter the results of the dropdown list with it. I've tried searching through your site and forums as to why this behavior might be occurring, but the closest thread I found about it is this one from two years ago: https://www.telerik.com/forums/bug-dropdownlist-in-r3-2017-dropdown-gets-closed-when-space-is-hit-in-the-filter-textbox.

I'm unsure if this is a bug with the dropdownlist, or if it's something on our end, but does anyone have any suggestions on a workaround for this bug? We've attempted some Javascript to try to prevent its behavior, but we haven't been able to get that working either:

window.onkeydown = function (e) {

e = e || window.event; // Normalize the event for IE

var target = e.srcElement || e.target; // Get the element that the event was triggered on

var tagName = target.tagName; // Get the tag name of the element

var className = target.className;

console.log((tagName === "INPUT" && e.keyCode == 32 && className == "k-textbox"))

if (tagName === "INPUT" && e.keyCode == 32 && className == "k-textbox") {

return;

}

If anyone is able to provide any helpful insight into this issue, that would be greatly appreciated.

Thanks,

Jason