The FileManager triggers two Read requests when double clicking a folder in the ListView/GridView. The behavior can be observed in the Basic Usage Demo.
When navigationg to a folder in the TreeView using a single click, the component triggers a single Read request.
Could you consider optimizing the request handling when navigating to nested folders, particularly in ListView/GridView, to reduce redundant Read calls and improve performance?
It will be great if we can have a very simple "out-of-the-box" way to add a Column Chooser in the toolbar, similar to the Search Feature.
Something like Syncfusion's column chooser here:
https://ej2.syncfusion.com/aspnetcore/Grid/ColumnChooser
This will help me significantly in my development effort and provide a much better experience for my paying customers.
I have hundreds of grid tables with different schemas, columns with MinScreenWidth, and hidden columns (depending on the availability of data).
On a page, it can have multiple grid tables that are dynamically generated.
I also use View Component to generate each grid table.
The current column menu isn't perfect because I want it to only act as a filter checkbox, not a menu where a user needs to click twice to access the filtering feature. (And my users need to use the filtering mechanism A LOT)
Thanks,
Luke
I'm trying to use it for navigation in a section using Razor Pages. Having to expand using javascript is very distracting when the user goes from page to page. Below is the code to create a self-running page that demonstrates the issue:
@page
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TestDrawer</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.bootstrap-v4.min.css" />
@* FontAwesome Pro css*@
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-xVVam1KS4+Qt2OrFa+VdRUoXygyKIuNWUUUBZYv+n27STsJ7oDOHJgfF0bNKLMJF" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
@* Place Kendo UI scripts after jQuery *@
<script src="https://kendo.cdn.telerik.com/2019.2.514/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.2.514/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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<style>
/* Root navigation */
#root-nav li,
#example-nav li {
list-style: none;
}
.root-nav-categories h3,
#example-nav h3 {
color: #000;
font-size: 14px;
line-height: 14px;
padding: 0.5em 0 0.5em 3.571em;
text-transform: uppercase;
}
#example-nav h3 {
padding: 1.7em 0 0.5em 3.4em;
}
#example-nav-bar {
border-top: 1px solid #e2e4e7;
}
#back-forward {
display: block;
position: relative;
color: #000;
font-size: 14px;
line-height: 15px;
font-weight: normal;
padding: 1em 3.5em;
/*vertical-align: middle;*/
}
#root-nav h4 a {
text-align: right;
}
.back-nav {
text-align: left;
}
.back-nav:before {
position: absolute;
top: 1em;
left: 1.2em;
}
.forward-nav {
text-align: left;
}
.forward-nav:before {
position: absolute;
display: block;
top: 1em;
right: 1.2em;
width: 14px;
height: 14px;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
.root-nav-categories {
margin-top: 1.417em;
}
#root-nav,
#example-nav {
padding-bottom: 30px;
}
#root-nav li a,
#example-nav li a {
/*controls customer navigation icon and text size*/
/*font-size: 13px;*/
/*line-height: 13px;*/
color: #2d3e50;
display: block;
padding: 0.5em 0 0.5em .5em;
transition: all .2s ease;
}
#example-nav li .group {
font-size: 13px;
font-weight: bold;
line-height: 13px;
color: #2d3e50;
display: block;
padding: 1.5em 0 0.25em 3.7em;
transition: all .2s ease;
}
.flip {
transform: rotate( -180deg );
transition: transform 500ms ease;
}
.no-boarder {
border: none;
}
.k-drawer-container {
border: none;
}
/*Adjusts width of icon blocks in customer navigation*/
.k-drawer-wrapper.k-drawer-mini-mode .k-drawer-items {
width: 3.5rem;
}
#root-nav li a:hover,
#example-nav li a:hover,
#back-forward:hover {
color: #000;
text-decoration: none;
background-color: #e2e4e7;
}
.k-hover-enabled #root-nav li a:hover,
.k-hover-enabled #example-nav li a:hover {
background-color: transparent;
}
#example-nav .active {
background-color: #e2e4e7;
cursor: default;
}
</style>
@*<link rel="stylesheet" href="~/css/site.css" />*@
</head>
<body>
<div id="example-sidebar" class="border border-secondary">
@*<div id="nav-wrapper">*@
<div id="nav">
<div id="example-nav">
<kendo-drawer name="drawer" mode="push" on-hide="onHide" min position="left" swipe-to-open="true" template-id="template" class="no-boarder">
<mini enabled="true" />
</kendo-drawer>
</div>
</div>
@*NAVIGATION STACK*@
@*<a href="#">
<span class="fa-stack" style="vertical-align: top;">
<i class="far fa-circle fa-stack-2x"></i>
<i class="far fa-exchange fa-stack-1x"></i>
</span>
</a>*@
<a href="javascript:void(0);" onclick="toggleDrawer();" id="expand" title="Toggle Navigation">
<span class="fa-stack mb-2 ml-2">
<i class="far fa-circle fa-stack-2x"></i>
<i class="far fa-exchange fa-stack-1x"></i>
</span>
</a>
<script>
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
$(document).ready(function () {
var drawerInstance = $("#drawer").data().kendoDrawer;
var hideMenu = getCookie("HideCustomerMenu");
if (hideMenu == 'true') {
var arrowButton = $("#expand");
arrowButton.toggleClass('flip');
}
else {
drawerInstance.show();
}
});
function toggleDrawer() {
var drawerInstance = $("#drawer").data().kendoDrawer;
var drawerContainer = drawerInstance.drawerContainer;
var arrowButton = $("#expand");
if (drawerContainer.hasClass("k-drawer-expanded")) {
document.cookie = "HideCustomerMenu=true";
arrowButton.toggleClass('flip');
drawerInstance.hide();
} else {
document.cookie = "HideCustomerMenu=false";
arrowButton.toggleClass('flip');
drawerInstance.show();
}
}
</script>
<script id="template" type="text/x-kendo-template">
<ul class="menuBar list-unstyled">
<li id="test1"><a href="testdrawer"><i class="fa fa-user-circle fa-2x fa-fw mr-2" aria-hidden="true" title="Page 1"></i>Page 1</a></li>
<li id="test2"><a href="testdrawer" class="customer"><i class="fa fa-check fa-2x fa-fw mr-2" aria-hidden="true" title="Page 2"></i>Page 2</a></li>
<li id="test3"><a href="testdrawer" class="customer"><i class="fa fa-random fa-2x fa-fw mr-2" aria-hidden="true" title="Page 3"></i>Page 3</a></li>
<li id="test4"><a href="testdrawer" class="customer"><i class="fa fa-dollar-sign fa-2x fa-fw mr-2" aria-hidden="true" title="Page 4"></i>Page 4</a></li>
<li id="test5"><a href="testdrawer" class="customer"><i class="fa fa-paperclip fa-2x fa-fw fa-rotate-90 fa-flip-horizontal mr-2" aria-hidden="true" title="Page 5"></i>Page 5</a></li>
</ul>
</script>
</div>
<script>
function onHide(e) {
e.preventDefault();
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
</script>
</body>
</html>
Currently, the Content function for Steps in a Wizard only accepts a string value (see API here).
This means that in order to add a partial view (bound to the current model and its properties), the most straightforward way I could find was to put the partial view (and any wrappers) in its own file and add an extension method "ToHtmlString()". For example:
@model MyModel
@(Html.Kendo().Wizard().Steps(step => {
step.Add().Content(Html.Partial("~/Path/To/View/Wrapper.cshtml", Model).ToHtmlString());
})
using Microsoft.AspNetCore.Html;
using System.IO;
public static class HtmlContentExtensions
{
public static string ToHtmlString(this IHtmlContent htmlContent)
{
if (htmlContent is HtmlString htmlString)
{
return htmlString.Value;
}
using StringWriter writer = new();
htmlContent.WriteTo(writer, System.Text.Encodings.Web.HtmlEncoder.Default);
return writer.ToString();
}
}In the Telerik TabStrip, a better approach is possible, as the Content for Items can take in a function which accepts Razor syntax (see API here). For instance:
@model MyModel
@(Html.Kendo().TabStrip().Items(tabstrip => {
tabstrip.Add()
.Content(@<div id="@Model.TabContainer" class="myTabWrapperClass">
@await Html.PartialAsync("~/Path/To/View.cshtml", Model)
</div>);
})
If we had the option to use the same approach with Wizard Steps, that would be ideal!
The Kendo UI for jQuery TreeList provides options for configuring the settings of the Window when using Popup editing mode:
Currently, the Window options are not available for the HtmlHelper and TagHelper TreeList. Is it possible to implement the Window() configuration of the Editable() option, as per the example below?
.Editable(e =>
{
e.Mode("popup");
e.Window(w => w.AppendTo("..").Animation(false).Draggable(false).Title("..."));
})
.Items(items =>
{
items.Add()
.Field(f => f.Type)
.Label(l => l.Text("Type:"))
.Editor(e =>
{
e.Upload()
}
}
Hi Team,
Currently, Telerik.Licensing NuGet package only has target for netstandard2.0, netframework462 and net6.0. I cannot use .NET 6 for my .NET 9 application because .NET 6 is out of support.
This is a feature request to either
- Remove the net6.0 TFM and reply only on netstandard2.0
- or
- Add net8.0 and net9.0 targets.
Thank you,
Arthur
.NET 6 introduced DateOnly and TimeOnly types, but none of the relevant date/time controls support these types.
There is already a feature request to support DateOnly in DatePicker; this feature request is about adding support for TimeOnly to TimePicker.
At this stage, the Serialize() method depends on Newtonsoft.Json:
using Newtonsoft.Json;
namespace Kendo.Mvc.Infrastructure
{
public class DefaultJavaScriptSerializer : IJavaScriptSerializer
{
public string Serialize(object value)
{
return JsonConvert.SerializeObject(value).Replace(@"<", @"\u003c").Replace(@">", @"\u003e");
}
}
}Is it possible to remove the dependency and use the System.Text.Json serializer instead?
I'd like DateOnly support to be introduced to Telerik UI for ASP.NET Core because my Grid uses that type and issues occur in the Grid's PopUp and InLine editing fields that are bound to DateOnly fields.
Overview
At this stage, the ToolBar.Custom() API configuration does not expose built-in configurations for adding a handler and partial view. E.g:
@(Html.Kendo().Grid <TelerikAspNetCoreApp455.Models.OrderViewModel>()
.Name("grid")
.ToolBar(toolbar => {
toolbar.Custom().Name("Test1").ClientTemplateHandler("someHandler");
toolbar.Custom().Name("Test2").ClientTemplateView(Html.Partial("_Test2"))
})
...
)Current behavior
The ToolBar.Custom() API configuration does not expose built-in configurations for adding a handler and partial view.
Expected/desired behavior
The ToolBar.Custom() API configuration should expose built-in configurations for adding a handler and partial view.
Environment
- Kendo UI version: 2024.3.806
- Browser: [all]
Overview
Expose EditorTemplateId and EditorTemplateView TagHelper attributes in the Form TagHelper.
Current behavior
Currently, the Telerik UI for ASP.NET Core Form TagHelper does not expose EditorTemplateId and EditorTemplateView TagHelper attributes. In comparison to its HTML Helper counterpart:
@(Html.Kendo().Form<FormItemsViewModels>()
.Name("exampleForm")
.FormData(Model.Form)
.HtmlAttributes(new { action = "Items", method = "POST" })
.Validatable(v =>
{
v.ValidateOnBlur(true);
v.ValidationSummary(vs => vs.Enable(true));
})
.Items(items =>
{
items.AddGroup()
.Label("Registration Form")
.Items(i =>
{
i.Add()
.Field(f => f.TextBox)
.Label(l => l.Text("TextBox:"))
.EditorTemplateId("myTemplate");
i.Add()
.Field(f => f.TextBox)
.Label(l => l.Text("TextBox:"))
.EditorTemplateView(Html.Partial("_ExportCalculationForm", Model.Form));
});
})
)Expected/desired behavior
It would be beneficial if such configurations were to be exposed for the TagHelper Form as well
<kendo-form name="exampleForm" method="POST" asp-action="Items" form-data="Model.Form">
<validatable validate-on-blur="true" validation-summary="true" />
<form-items>
<form-item type="group">
<item-label text="Registration Form" />
<form-items>
<form-item field="TextBox" editor-template-id="myTemplate">
<item-label text="TextBox:" />
</form-item>
<form-item field="TextBox" editor-template-view='Html.Partial("_ExportCalculationForm", Model.Form)'>
<item-label text="TextBox:" />
</form-item>
</form-items>
</form-item>
</form-items>
</kendo-form>Environment
- Kendo UI version: 2024.2.514
- Browser: [all]
I'm currently evaluating the ASP .Net Core Components and whilst I'm liking it so far, I have to say - the documentation leaves a lot to be desired.
At the moment, I am trying to use grid and looking at documentation, I have no idea if I am meant to be looking in Kendo.Mvc.UI.Fluent or Kendo.Mvc.UI - and when I am there and find an item, there just isn't enough detail. In addition, the demos section appears to actually be more helpful and I'm constantly looking there.
What caused me to write this is that I have simply enabled GridFilterMode.Row on an instance and whilst I like it, I want to change the default from "Is Equal To" to "Contains"... I have been experimenting for the past few hours without any luck and I'm going round in circles on documentation:
I can see that Filterable requires GridFilterMode, but the documentation is lacking - https://docs.telerik.com/aspnet-core/api/Kendo.Mvc.UI/GridFilterMode#kendomvcuigridfiltermode
I then try to find the filterable modes documentation, but, half the features/methods just don't seem to have any affect whatsoever.
Personally, I'm having great luck learning about your components from the demo section and adapting the code to suite my needs - but, if there isn't a demo, it appears to be a very hard task to learn what is and isn't possible.
The Kendo UI for jQuery Scheduler exposes toolbar.items.mobile option that allows you to define the desired tools in in adaptive rendering mode. Is it possible to implement the same option for the Scheduler Html and Tag Helper?
1. Allow the elastic behavior of the PDFViewer's mobile scroller to be disabled. Currently, when scrolling to the top or to the bottom, the document jumps and then immediately re-adjusts its position under the widget's header/bottom border.
2. Add the ability to manually scroll the document up/down with mousedown.
3. Add keyboard scrolling support.