The ability to export a grid to excel has been a great addition, we would like the ability to export in CSV and XML also.
Add support for hidden fields. There could be an alternative way of adding them to the Items collection, e.g.
.AddHidden()
Consider the cases when the hidden field is bound to a model field and when it isn't bound to the model. The latter could be a scenario involving antiForgeryTokens:
<input type="hidden" name="__RequestVerificationToken" value="token" />In both cases you should be able to set the value of the hidden field programmatically and submit it with the form.
.Items(items =>
{
items.Add()
.Field(f => f.Type)
.Label(l => l.Text("Type:"))
.Editor(e =>
{
e.Upload()
}
}
I would like to see a thumbnail of the image in the FileManager for images. Currently it shows an icon for images. In place of the image icon I would like to see a small thumbnail of the image.
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.
Implement Recurrence Rule Parser helper that uses the Scheduler recurrenceRule string and parses it in a usable format on the server.
There is already a similar helper for Telerik UI for ASP.NET Ajax.
Per the documentation for the Grid's Search Panel:
"When the server operations are enabled, you can search only by using string fields."
This is an oddly-specific limitation to have that causes an awkward user experience. Grids in some areas with limited data might use client operations and, as a result, the Search Panel is capable of searching all columns in a Grid. Other areas, however, might have grids with significantly more data and be using server operations for performance reasons. A side-effect of this would mean the Search Panel is incapable of filtering on non-string fields. This not only might lead to unexpected results to an end-user, but also requires the developer to explicitly list each string field that can be searched. If a developer forgets to list only string fields, the default action will be for it to attempt to filter on all fields. If any fields happen to not be strings, you still get a loading indicator as if it's attempting to filter, but the Ajax request silently fails and returns an error 500 behind the scenes.
There are some manual workarounds discussed here, as well as some information as to why this limitation exists. It seems like the problems causing these limitations are known, as are some rough workarounds to get around it. It would be great if we could get some official support to address this limitation so developers aren't left to either work around it on their own or avoid using this feature altogether. This feature would be great if it weren't for this limitation. A single place to quickly and easily type in something to filter on, and have that filter applied against all columns could definitely save some time and be very useful, but with this limitation with a pretty technical explanation (from an end-user perspective), the unexpected mixed results could instead lead to confusion and frustration, and distrust of this feature.
can we have the same functionalities as the AJAX html editor?
There are a number of controls missing from the new editor that was not in the old telerik editor. including Add spell check, cut, copy and paste {several options}, undo, redo, new paragraph, horizontal rules, insert time, insert symbol. Anyway to bring those functionalities into ASP.net core?
Due to changes in the ASP.NET Core framework and how the Authentication is implemented the MVC5 implementation of the SecurityTrimming option became obsolete.
Hi guys,
I found out, that the QueryableExtension always generates a ToLower for strings filtered with the equals operator. The ToLower is applied by the FilterOperatorExtensions in this method:
private static Expression GenerateEqual(
Expression left,
Expression right,
bool liftMemberAccess)
{
if (left.Type == typeof (string))
{
left = FilterOperatorExtensions.GenerateToLowerCall(left, liftMemberAccess);
right = FilterOperatorExtensions.GenerateToLowerCall(right, liftMemberAccess);
}
return (Expression) Expression.Equal(left, right);
}It would be nice, if the to lower is controllable with a parameter. At the moment it generates a to lower in the sql query, which generates a lot of overhead in some situations with large tables.
At the moment I remove all "equal to" filter and apply it manually to the IQueryable object.
Best regards
Moritz
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.
I was wanting to create a multiselect filter inside the kendo grid that will filter an array column, NOT a simple string column. Just adding the .Filterable(ftb => ftb.Multi(true)) does display a basic 'multiselect' with just checkboxes in it, which is not ideal , but does work. But, when you click filter, the grid becomes empty. I had to use a clienttemplate() function, to return an html object like so:
export function MultiRowTemplate(data) { if (data == null) { return ""; } var row = ""; for (var i = 0, len = data.length; i < len; i++) { row += data[i].Description + "<br/>"; } return row; }
My column is:
columns.ForeignKey(a => a.DisplayExp, (System.Collections.IEnumerable)ViewData["Exp"], "Id", "Description").ClientTemplate("#= MultiRowTemplate(data.DisplayExp) #").Filterable(ftb => ftb.Multi(true)).Title("Experience");
the code for the foreign key doesn't make much sense as it's an array column, but that was pointed to by telerik support on other forum posts.
So, there must be a way to hook into that column and run some custom code to return to the grid the filtered values? i've seen examples for jquery, and mvc, but theres nothing for .net core. This should just work out of the box, as I don't think this is an uncommon need. Could you give me an example or point me in the right direction?
Having a floating label functionality similar to the one available for the native Vue DropDownList, would be nice to have.
https://www.telerik.com/kendo-vue-ui/components/dropdowns/floating-labels/
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>
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.
It would be useful to have an exemple of how to uploda directly to an Azure Storage container from a Kendo UI upload or FileManager component.
Hey,
It would be very useful if the TimePicker component would have a feature called something like "AutoFocusTime()". By default, when there is no value inside the TimePicker, the default focused time is "12:00 am", therefore the user has to scroll up all the way to the required time. With the feature above, it would be possible to enter a time which should be focused by default. For example "8:00 am" which is when most businesses start operating.
Now the question is, why not just putting in a default value. Well, in a form with lots of inputs, the user may not know anymore which values he entered and which inputs have a default value set and therefore submitting wrong data. If a input doesn't have a default value this mistake can be caught by setting a [Required] attribute. Threfore, the user has to enter a value and it will be guaranteed that all values where entered by him and it wasn't a default value which has been set.
See ticket id 1412837.
Currently, the new feature .ComponentType('modern') does NOT respect the .Interval(n) setting for the control.
Demo of ComponentType setting on DateTimePicker control
According to the API Reference the Interval setting, Interval
"Specifies the interval, between values in the popup list, in minutes."
The ComponentType('classic') does respect the Interval setting. Thus, the ComponentType feature should be updated to respect the Interval setting when the "modern" ComponentType is selected. The time interval under modern is always 1 minute (see screenshot).
@(Html.Kendo().DateTimePicker()
.Name("SessionEndDateTime")
.Interval(15)
.ComponentType("modern")
.Events(e => { e.Change("onSessionEndChange"); })
.HtmlAttributes(new { style = "width: 100%", title = "Session End Date/Time", @class = "form-control" })
.DateInput()
)
Modern should respect the Interval setting for the control.