At moment the Form Group does not support the HtmlAttributes() method. Is it possible to implement?
For example:
@(Html.Kendo().Form<Model>()
.Name("exampleForm")
...
.Items(items =>
{
items.AddGroup()
.HtmlAttributes(...)
.Items(i => {...});
})
)
### Bug report
When a specified gird column has a property '.EditorTemplateName("Date")', the default DatePicker editor is not rendered properly.
### Reproduction of the problem
1. Create a new Telerik ASP.NET Core MVC Application by using the "Create New Project Wizard". Use the "Grid and Menu" Template;
2. Make the Grid "InLine" editable;
3. Set the property '.EditorTemplateName("Date")' to the "OrderDate" grid column;
4. Run the application and try to edit an existing record. The DatePicker editor is not displayed as expected.
Attached is a runnable sample for reproduction.
### Expected/desired behavior
The closing bracket in the DatePicker configuration should be moved at the end:
//Current configuration
@model DateTime?
@(Html.Kendo().DatePickerFor(m => m)).HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("")})
//Updated configuration
@model DateTime?
@(Html.Kendo().DatePickerFor(m => m).HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("")}))
### Environment
* **Kendo UI version: 2022.1.301
* **jQuery version: 1.12.4
* **Browser: [all]
When a hidden column of the Grid is configured as .Exportable(true) in the wrappers the exportable property doesn't get serialized
columns.Bound(p => p.OrderID).Exportable(export=>export.Excel(true)).Hidden().Filterable(false);
Setting the Exportable(true) on a hidden column should correctly include it in the export
1559232
### Bug report
When the Virtualization of the MultiColumnComboBox is enabled, the table headers and rows are not aligned correctly.
### Reproduction of the problem
A Dojo sample for reproduction: https://dojo.telerik.com/ORalaWoq
The tables and rows are aligned as expected when using version 2021 R3 SP2 (2021.3.1207).
A temporary workaround:
<style>
.k-table-list .k-table-group-row, .k-table-list .k-table-row {
display: inline-flex;
}
</style>
### Expected/desired behavior
The headers and rows should be aligned correctly when the Virtualization is enabled.
### Environment
* **Kendo UI version: 2022.1.412
* **jQuery version: 1.12.4
* **Browser: [all]
It would be great if the scaffolder can use an existing model (one that I created before starting the scaffolder). I also would like to have the option to select a namespace:
Would you be able to implement a more visual aspect for the FileManagement so it look close to this picture.
Attach is the modified Kendo.all.min.js file that you may want to alter so it becomes a permanent in you repository. Changes made for those following :
* Changed:
* template:
* var i
* singleFileTemplate
The style sheet for the effects:
/* 5.7.3 - Filemanager Image Grid View */
.FileManagerImgGridView {
display: flex;
justify-content: start;
align-items: center;
gap: 10px;
cursor: zoom-in;
}
/* 5.7.4 - Filemanager Image List View */
.FileManagerImgListView {
cursor: zoom-in;
max-width: 115px;
box-shadow: 0 0 10px rgba(0,0,0,0.4);
transition-duration: .5s;
}
.FileManagerImgListView:hover {
transition-duration: .5s;
transform: translateY(5px) scale(1.75);
border-radius: 3px;
z-index: 100;
}
/* 5.7.5 - Filemanager Image Detail */
.FileManagerImgDetail {
max-height: 280px;
max-width: 280px;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
cursor: pointer;
transition-duration: .5s;
}
.FileManagerImgDetail:hover {
transition-duration: .5s;
transform: scale(1.2);
max-width: 80%;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.FileManagerImgDownloadLink {
display: flex;
justify-content: center;
align-items: center;
margin-left: 10px;
padding: 5px 10px;
border-radius: 10px;
color: var(--bs-primary-inverted);
background-color: var(--bs-primary);
box-shadow: 0 0 10px rgba(0 0 0 /.7);
gap: 5px;
}
.FileManagerImgDownloadLink a {
text-decoration: none;
color: var(--bs-primary-inverted);
}
also here is the C# Thumbnail Class that can be modified if you intend to have you own fabrication of thumbnail as it use to be years ago :-)
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Processing;
public virtual IActionResult Thumbnail(string path)
{
var virtualPath = Path.Combine(_thumbnailFolderRoot);
var physicalPath = Path.Combine(ConstantVar.webEnv.WebRootPath, virtualPath.Replace('/', '\\'));
path = Path.Combine(physicalPath, path);
FileInfo imageInfo = new FileInfo(path);
int width = 75;
int height = 75;
bool KeepRatio = true;
using (Image image = Image.Load(imageInfo.FullName))
{
// Figure out the ratio
double ratioX = (double)width / (double)image.Width;
double ratioY = (double)height / (double)image.Height;
// use whichever multiplier is smaller
double ratio = ratioX < ratioY ? ratioX : ratioY;
int newHeight = height;
int newWidth = width;
if (KeepRatio)
{
// now we can get the new height and width
newHeight = Convert.ToInt32(image.Height * ratio);
newWidth = Convert.ToInt32(image.Width * ratio);
}
image.Mutate(s => s.Resize(width: newWidth, height: newHeight));
using (var ms = new MemoryStream())
{
image.SaveAsJpeg(ms);
return File(ms.ToArray(), "image/jpg");
}
}
}
### Bug report
When the Grid group paging is enabled, and the Grid is grouped, when the user search through the built-in search panel, and expand a specified group, an infinite loop appears. The Grid sends Read requests, and the server returns empty "data" property.
### Reproduction of the problem
1) Create a Grid bound to remote data and enable the group paging feature.
2) Group the Grid by a specified column.
3) Enter a value in the Grid search panel (the grouped data is filtered).
4) Expand a specified group --> it causes an infinite loop.
5) Open the browser Network tab to review the Read requests.
A Dojo sample for reproduction: https://dojo.telerik.com/EsuQoQiP
### Expected/desired behavior
The grouped Grid data should be filtered through the search panel as expected.
### Environment
* **Kendo UI version: 2023.1.117
* **jQuery version: 1.12.4
* **Browser: [all]
I'd like to use Between and NotBetween operators in the Filter component similar to the available functionality for Telerik UI for AJAX.
Is it possible to add an "attributes" option to the editable.window configuration that allows the addition of HTML attributes to the window?
For example:
//HtmlHelper Grid
@(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
...
.Editable(editable => editable.Mode(GridEditMode.PopUp).Window(wnd => wnd.HtmlAttributes(new { @class= "my-custom-window" })))
)
//Kendo UI for jQuery Grid
$("#grid").kendoGrid({
...
editable: {
mode: "popup",
window: {
attributes: {
"class": "my-custom-window"
}
}
}
});
The current suggestions are IMHO quite complicated and require a lot of client-side code.
I would like to have a way to display the total of the series in the center.
The content should change depending on the selected categories.
Maybe using a template with access to the values.
The size of the content should scaled to optimally fill the empty center.
Kind regards Erwin
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();
}
}
@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>);
})
An error for the missing image is thrown:
GET https://localhost:63252/test.png 404 (Not Found)
No error is thrown, since the value of the background-image property has been replaced with "none" in the Editor events and the actual content the Editor visualizes does not use the image:
<tr style="box-sizing: border-box; border-style: solid; border-width: 1px 0px; background-image: none;">
...
</tr>
### Bug report
When deferring the component scripts to a file and a specified item of a Form HtmlHelper has a defined editor through the Editor() configuration, a client-side error is thrown:
"Uncaught Error: Syntax error, unrecognized expression: #"
### Reproduction of the problem
1) Enable the global deferred initialization.
2) Define a Form HtmlHelper with a ComboBox editor for one of its items:
@model FormViewModel
@(Html.Kendo().Form<FormViewModel>()
.Name("form")
.HtmlAttributes(new { action = @Url.Action("SubmitData", "Home"), method = "POST" })
.FormData(Model)
.Items(items =>
{
items.Add()
.Field(f => f.Username)
.Label(l => l.Text("Username:"));
items.Add()
.Field(f => f.City)
.Label(l => l.Text("City"))
.Editor(editor => editor
.ComboBox()
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>()
{
new SelectListItem() { Text = "City A", Value = "1" },
new SelectListItem() { Text = "City B", Value = "2" },
new SelectListItem() { Text = "City C", Value = "3" }
})
);
})
)
@(Html.Kendo().DeferredScriptFile())
3) When the page with the Form is loaded, open the browser console and examine the error. Review the content of the loaded kendo-deferred-scripts-xxxxx.js file - the ComboBox initialization script is included after the Form initialization script. Attached you can find screenshots.
When using the TagHelper version of the Form, the ComboBox initialization script is included in the kendo-deferred-scripts-xxxxx.js file before the initialization script of the Form with a unique generated "id" for example "3451ce77-2736-437f-9584-f5a5255902c2". In this case, no client-side errors occur.
### Expected/desired behavior
When deferring the component scripts to a file, the Form with specified editors must be initialized as expected without client-side errors.
### Workaround
Use the TagHelper version of the Form or define the editor by using the EditorTemplateView() option:
items.Add()
.Field(f => f.City)
.Label(l => l.Text("City"))
.EditorTemplateView(Html.Partial("ComboEditor"));
// ~/Views/Shared/ComboEditor.cshtml
@model FormViewModel
@(Html.Kendo().ComboBoxFor(m => m.City)
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() { Text = "City A", Value = "1" },
new SelectListItem() { Text = "City B", Value = "2" },
new SelectListItem() { Text = "City C", Value = "3" }
})
)
### Environment
* **Telerik UI for ASP.NET Core version: 2024.4.1112
* **Browser: [ all ]
Need support for DataTable in Grid in ASP.NET Core 2.0
Hi Kendo Team,
I am working on Kendo UI ASP.NET Core Grid binding with SignalR. But while starting Hub and providing the Promise, I am facing an error "The "promise" option must be a Promise."
I am following this URL for reference: https://demos.telerik.com/aspnet-core/grid/signalr .
Checked on your website as well, but the issue is also coming there. Here is the URL: https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.signalr
In this link, when clicking on "Open In Dojo" button, it opens a new window, then clicks on the Run button. It will generate an error in the console "Uncaught Error: The "promise" option must be a Promise.".
Please check the attached snapshot.
Please reply asap. Thanks in advance!