Allow general configuration of SuggestionOperator, as is available for Operators.
I can do something like this in GridFilterableSettingsBuilder --
filterable.Operators(operators => operators
.ForString(str => str
.Clear()
.Contains("contains"))I would like to also be able to do this --
filterable.SuggestionOperator(FilterType.Contains)
With batch editing there are no indicators that the
grid is "dirty" after you hit delete, but before you hit the save
changes button. [Note, when a user edits a cell, the top corner display a
small red flag letting the end user know the cell is dirty and has not
been saved/synced to the database yet.] This should be added to let the user know the delete action has not been performed and is in a "pending" state until the save button is pressed. This would be very helpful for UX purposes.
In the meantime, I just apply my own "dirty" class to the save button so end users know to press it before leaving the page if they would like to keep their changes.
When Batch update mode is set to true, Popup editing mode should write back the data to grid and not call the update actions directly upon confirming the popup editing window.
I have a page containing a grid, in the toolbar there are following buttons:
* Add
* Edit
* Delete
When the user clicks Edit, the selected row is edited using the pop-up window. Alternatively the user can also double click the row to start editing.
On the bottom of the page there is a Save and Cancel Changes button. The save changes must update all applied changes, the cancel button must undo them.
At current when Popup editing is used and the user confirms the popup window, changes are immediately written to the database. This breaks functionality of the Cancel button. Cancel will now only apply to deletes.
I need popup functionality because I have too many columns to use in-cell editing.
Telerik is ignoring the setting batch(true) when doing popup editing, so this could even be considered a bug instead of a feature request!
I would like to be able to refresh the Chat widget or clear previous messages.
Adding the option to customize the position of the input field(top or bottom, for example), would also be a useful feature.
Hello,
I have a Gantt that only can have two levels. I guess drag&drop is the best and easiest way to do this (Is it a better solution like editing the order value directly in the TreeList area?)
I want to implement order change in the following way.
- If user changes parent task order, he has to drag that parent task (A) and drop on another parent task (B). This way, task A will take task B order value (Shall task B take task A order?). If user drops parent task A on any child task, no order change will happen.
- Drag of any child task only will be valid in the same parent. I mean, dropping child task in any parent task or in other parent child task will do nothing.
Could you send me any example of this behaviour?
Regards!
Feature request
Add Refresh method to the ASP.NET Core Timeline wrapper. It should allow user to reload the component using the current data items.
Provide editable AcroForms support in PDFViewer.
The current implementation of the Kendo PDFViewer depends on pdf.js, so the following should be taken into account:
Hello,
I'm already using UI for ASP.NET Core, but want to use the OrgChart. I see that it's only in UI for ASP.NET AJAX. Can I get OrgChart to work in my ASP.NET core project?
I see that the Diagram component has been suggested as an alternative, but I don't think it's suitable for what I want.
Thank you.
As mentioned in this feature request for area-range chart series: "having area 'scatter' support, such as 'scatterArea', and 'scatterAreaRange', like the existing 'scatterLine', is also desirable".
Please see this forum post for details.
I have worked with the grid and have successfully been able to change the update/cancel button text/icon for inline editing using the code below.
commands.Edit().Text(" ").IconClass("fa glyphcolor fa-edit").CancelText(" ").CancelIconClass("fa fa-times").UpdateText(" ").UpdateIconClass("fa fa-check");For the TreeList the IconClass, CancelText, CancelIconClass UpdateText or UpdateIconClass are not exposed functions. Currently using JQuery and CSS you can workaround this but I would be nice if the TreeList exposed this functionality as the grid does.
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>
Add an option to configure a separate custom editor to be used when the Scheduler's mobile mode is enabled. This would make possible using two different templates at the same time, for example:
.Editable(editable => {
editable.TemplateName("CustomEditorTemplate").MobileTemplateName("CustomEditorMobileTemplate");
})
I need it to be as high as the data inside it, similar to what you can do with grids.
I searched but I didn't find anything that would allow it;
How i can achive this result?