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>);
})
Serializing DataSourceResult when it contains several groups is significantly slower compared to serializing the object when no grouping is used. Consider ways to improve the performance. For more context and an example, see Ticket ID:
Current configuration: server-side filtering
Desired behavior:
When ParseFormats is set in the DatePicker editor used in the Grid popup, the picker does not show the field value to which it is bound.
public DateOnly? OrderDate { get; set; }
.Model(model =>
{
model.Id(p => p.OrderID);
model.Field(p => p.OrderDate).DefaultValue(new DateOnly());
})
@model DateOnly?
@(Html.Kendo().DatePickerFor(m => m).ParseFormats(new string[] { "MM/dd/yyyy" }).HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("") }))
When editing a record. The value of the OrderDate field is not displayed in the DatePicker.
If you remove the ParseFormats option from the DatePicker, it shows the value as expected.
The field value should be displayed in the picker, even when ParseFormats is set.
### 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 ]
It would be nice to extend dialog like office 365 right dialog ( docked to the right).
It would be nice to have a dropdown button with a container
### Bug report
When the Grid is initialized in a hidden container (for example, in a non-selected tab of a TabStrip) and its initial data binding is disabled (autoBind: false), the pager information is not visible when the data is loaded afterward.
### Reproduction of the problem
1. Initialize a Grid into a non-selected tab of a TabStrip and set its autoBind option to "false".
2. Select the tab and check how the empty Grid is rendered.
3. Call the read() method of the Grid's DataSource in the browser console to request the data.
4. The data is loaded, but the pager information remains hidden.
A Dojo sample for reproduction: https://dojo.telerik.com/njVgBvza
### Expected/desired behavior
The pager information must be available when the data is loaded into the Grid.
### Environment
* **Kendo UI version: 2024.4.1112
* **jQuery version: 3.7.1
* **Browser: [all]
Hi Team,
I would like to request that, when using endless scrolling for the ListView, to include a page indicator to let the user know what page their on when scrolling.
Thank you!
Currently file manager supports multiple selection by using ctrl and shift keys. However it will be a nice feature if the selection of multiple files available through checkboxs, for e.g. when hovering the item, a checkbox appears in top left corner, and user can select it or unselect it.
In the example below products is actually DbSet<Product>
public async Task<ActionResult> Products_Read([DataSourceRequest]DataSourceRequest request)
{
using (var northwind = new SampleEntities())
{
IQueryable<Product> products = northwind.Products;
DataSourceResult result = await products.ToDataSourceResultAsync(request);
return Json(result);
}
}
Under the hood the ToDataSourceResultAsync call is executed inside Task.Run
And that Task.Run is calling sync methods of IQueryable which means EntityframeworkCore queries are not taking place with async I/O
### Bug report
When the Grid is set up for OData-v4 binding, the columns that bind to DateOnly fields fail to filter. The date value in the filter expression contains the time portion and the following error is thrown:
"The binary operator GreaterThan is not defined for the types 'System.Nullable`1[System.DateOnly]' and 'System.Nullable`1[System.DateTimeOffset]'."
### Reproduction of the problem
1) Create a Grid that uses OData-v4 binding.
2) Bind a specified column to a DateOnly field.
3) Filter the column through the default column filter menu and open the browser DevTools to review the response of the request.
//Model
public DateOnly LastProdUpdate { get; set; }
//View
@(Html.Kendo().Grid<ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.LastProdUpdate).Format("{0:dd/MM/yyyy}");
})
...
.Filterable()
.DataSource(dataSource => dataSource
.Custom()
.Type("odata-v4")
.Transport(t =>
{
t.Read(read => read.Url("/odata/Products").Data("function() {return {'$expand': 'Employee'} }"));
})
.PageSize(10)
.ServerPaging(true)
.ServerFiltering(true)
.ServerSorting(true)
)
)
### Expected/desired behavior
The DateOnly fields must be filtered successfully as the DateTime fields.
### Environment
* **Kendo UI version: 2024.4.1112
* **Browser: [all]
By default, when the "paste" command is added, the default option is "insert" mode ("Paste (Insert)"). Is it possible to add an option that allows setting the default paste mode to "replace" ("Paste (Replace)")?
The FormItemBuilder exposes an EditorTemplateView method which allows a view to represent the item and provides the entire modal to the view.
As the elements available to forms are limited to those hard coded by Telerik and whilst extension methods can be employed to expand this limitation slightly, the ability to create a context specific view would be ideal
The current implementation looks like this
Html.Kendo().Form<Model>()
.Items(items =>
{
items.AddGroup("Test", 1, 10)
.Items(i =>
{
i.Add().Field(x => x.Username)
i.Add().Field(x => x.Password).EditorTemplateView(Html.Partial("MyView"))
}
);
})
In this example, the entire model is provided into MyView.
I suggest adding an EditorTemplateFor that uses the lamda expression provided in the Field() method such as
Html.Kendo().Form<Model>()
.Items(items =>
{
items.AddGroup("Test", 1, 10)
.Items(i =>
{
i.Add().Field(x => x.Username)
i.Add().Field(x => x.Password).EditorTemplateViewFor(Html.Partial("MyView"))
}
);
})
### Bug report
When loading an editor through a partial View using EditorTemplateView(await Html.PartialAsync("PartialViewName")), the following error occurs:
The 'await' operator can only be used within an async lambda expression. Consider marking this lambda expression with the 'async' modifier.
### Reproduction of the problem
@(Html.Kendo().Form<UserViewModel>()
.Name("myForm")
.Items(items =>
{
items.Add().Field(f => f.Username).EditorTemplateView(await Html.PartialAsync("PartialViewName"));
})
)
### Expected/desired behavior
The EditorTemplateView() must accept Html.PartialAsync("PartialViewName").
### Environment
* **Telerik UI for ASP.NET Core version: 2024.4.1112
* **Browser: [all]
The "Switch" component does not expose "Label" configuration.
For example:
@(Html.Kendo().Switch()
.Name("switch")
.Label(f => f
.Content("Theme")
)
)
Whilst I'm aware that I can create a HTML label and add the k-label class. I feel that a Label and a LabelFor are essential parts of the toolkit to prevent brittle code getting created when/if the labels that are created within the toolkit have other requirements
I have created my own implementation for now but I think this should be added to your roadmap, especially as it's such a simple thing to do
Is it possible to implement template options for the "update" and "cancel" column commands of the Grid?
For example:
$("#grid").kendoGrid({
columns: [{
command: [{
name: "edit",
template: {
update: "<button class='customUpdate'>Save</button>",
cancel: "<button class='customCancel'>Cancel</button>",
}
}]
}],
...
});