### Bug report
The attributes set through the "HtmlAttributes", "ContentHtmlAttributes", and "LinkHtmlAttributes"methods are not applied to the TreeView items.
### Reproduction of the problem
1. Create a TreeView and set attributes by using the "HtmlAttributes", "ContentHtmlAttributes", "LinkHtmlAttributes"methods:
@(Html.Kendo().TreeView()
.Name("treeview-kendo2")
.Items(treeview =>
{
treeview.Add().Text("My Documents")
.SpriteCssClasses("k-icon k-i-globe")
.Expanded(true)
.Url("/")
.HtmlAttributes(new { @class = "fairydust1" })
.ContentHtmlAttributes(new { data_navigate = "navigate_content", @class = "trigger", title = "content_title" })
.LinkHtmlAttributes(new { data_navigate = "navigate_link", @class = "trigger", title = "content_link" });
})
)
2. Run the page and inspect the TreeView item.
### Expected/desired behavior
The attributes are serialized and rendered.
### Environment
* **Kendo UI version: 2021.2.616
* **jQuery version: 1.12.4
* **Browser: [all]
### Bug report
When adding custom attributes to the CheckBox Taghelper, they are not added to the input element.
### Reproduction of the problem
1. Define a CheckBox Taghelper and add 'data-bind="checked: Test"' to its tag:
<kendo-checkbox name="Name" data-bind="checked: Test"></kendo-checkbox>
2. Inspect the CheckBox element and you will see that the "data-bind" attribute is missing.
3. When using the HtmlHelper version of the CheckBox, the attributes added through the HtmlAttributes() option are added as expected.
A REPL sample for reproduction: https://netcorerepl.telerik.com/mIuZlRle01kh6Ly043
### Expected/desired behavior
The specified attributes must be added to the input element of the CheckBox Taghelper.
### Environment
* **Telerik UI for ASP.NET Core version: 2024.2.514
* **Browser: [all]
When my company's users create a new "customer site" they upload the customer's logo and then choose some colours that will form the basis of theming for the customer's site. In that way, a customer will 'feel' like they have their own branded experience when using 'their' website.
The colours are inevitably based on the customer's logo. To use the colour picker component, I have to train my users to go to Paint, load the logo, choose the colour using the colour picker, go into the palette and 'copy the crazy 6-digit numbers that may contain letters of the alphabet that starts with a #' and paste that into the colour picker of our web site.
Rather, I would prefer if they could simply use an eyedropper from the ColorPicker component using functionality similar to https://imagecolorpicker.com/en It would save training and greatly improve the useability of my website.
Can I put that forward as being a feature request?
Thanks
Dave A
Implement an AllowCustom option in the MultiSelect, which would make possible to select a custom value that is not present in the data.
This option is available in the Kendo UI for Angular MultiSelect:
https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselectcomponent#allowcustom
https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/custom-values
Open this dojo example: https://dojo.telerik.com/BzNkZgSf
The input tooltip shows:
k-editor-link-url
because the input's title attribute is set like this: title="k-editor-link-url"
Instead of the name of a class, the tooltip should show "Web address", "Text", or "ToolTip" respectively.
Consider changing the design for the ColorPicker's input mode selection.
Currently, this is done through clicking a button with "up" and "down" arrow icons:
A more UI-friendly design for the mode selection would be nice to have, for instance, a radio group, dropdown, switch, etc.
When the fonts and font size dropdown is selected, it will be helpful to view the preview of fonts before applying it to text. Similarly for font size also it will be good to preview them.
In the table wizard the caption alignment dropdown looks very long than required
### Suggestion
Either the dropdown size can be collapsed, or we can describe the images to accommodate the longer size:
This just seems like a minor oversight since the Enable(bool) method exists on the DatePicker html helper and other Kendo taghelpers support the enable or enabled attribute, but there doesn't seem to be an enable-like attribute for the kendo-datepicker. Thanks!
<kendo-datepicker for="ReadOnlyDate" enable="false"></kendo-datepicker>
The custom ordering of the filter values in the Telerik UI ASP.NET Core Grid does not function correctly when using TagHelpers.
A REPL sample for reproduction: https://netcorerepl.telerik.com/wIYNvEvn00CAqNGL14
The filter values should be presented in the same order as specified in the Filterable configuration.
### Bug report
When using the @Html.EditorFor(m => m) configuration to initialize a MultiSelect TagHelper editor, and passing a specified value for its "id" attribute, the "name" attribute of the <select> element contains a prefix.
### Reproduction of the problem
1. Set the MultiSelect TagHelper as an editor editor of a specified Model property and set the "id" attribute using ViewData:
//Model
[UIHint("CustomMultiSelect")]
public IEnumerable<string> Names { get; set; }
//~.Views/Shared/EditorTemplates/CustomMultiSelect.cshtml
@model IEnumerable<string>
@{
var id = ViewData["id"]?.ToString();
}
<kendo-multiselect for="@Model" placeholder="some custom behavior" bind-to='ViewData["Data"] as List<string>' id='@id'></kendo-multiselect>
2. Define @Html.EditorFor(a=>a.Names, new{id="customId"}) in a form:
@model MyModel
<form id="myForm" data-method="POST" asp-action="Save" asp-controller="Home" class="k-form k-form-md">
<div class="k-form-layout k-d-grid">
<div class="k-form-field">
@Html.EditorFor(a=>a.Names, new{id="customId"})
</div>
</div>
...
</form>
3. When the MultiSelect is loaded, its "name" attribute is "Names.Names" rather than "Names":
When using the HtmlHelper version of the MultiSelect, the "name" attribute is correct:
//~.Views/Shared/EditorTemplates/CustomMultiSelect.cshtml
@model IEnumerable<string>
@{
var id = ViewData["id"]?.ToString();
}
@(Html.Kendo().MultiSelectFor(m => m)
.Placeholder("some custom behavior")
.BindTo((List<string>)ViewData["Data"])
.HtmlAttributes(new { id = @id })
)
### Expected/desired behavior
When using the @Html.EditorFor(m => m) configuration, the "name" attribute of the MultiSelect TagHelper must match the Model property name when the "id" attribute is set to a custom value.
### Environment
* **Telerik UI for ASP.NET Core version: 2024.3.806
* **Browser: [all]
### Bug report
On mobile devices, when the TaskBoard columns are filled with cards, the users have trouble scrolling horizontally through the columns. When they attempt to scroll the screen, they accidentally drag cards instead of scrolling the columns. This makes navigation in the TaskBoard quite difficult, particularly for projects with a large number of cards.
### Reproduction of the problem
1. Create a TaskBoard with at least two columns.
2. Fill the columns with cards.
3. Open the browser DevTools and switch to mobile view. Tap a card to scroll the columns horizontally or tap at the bottom of the TaskBoard to activate the horizontal scrollbar.
4. The last card is accidentally dragged.
A Dojo sample for reproduction: https://dojo.telerik.com/izASODan
### Expected/desired behavior
When the user makes a hold/long press/long tap, show the "indicator for drag and drop" and then he/she continues with the gesture by moving the card to the desired column and lift the finger. This way, the accidental dragging will be prevented. For more information, refer to the GitHub issue.
Note: The cards in the TileLayout can be dragged only through the card's title element. The TaskBoard cards can be dragged through the card's body, as well.
### Environment
* **Kendo UI version: 2024.3.806
* **jQuery version: 3.7.0
* **Browser: [all]
REPL to reproduce the problem following the steps below: https://netcorerepl.telerik.com/wSYNlmbA55iBcMhu20
Steps to reproduce
Type "wil" to get suggestions:
Hit tab to accept the first suggestion.
Click the arrow to display the list of options:
Observe the list of unrelated options, and the textbox now containing the value of the first option listed:
Additional information
The "normal" read request sends what is ultimately handled as a DataSourceRequest object in the controller that includes (among other things) information on how the data should be sorted. The "value mapper" request, on the other hand, sends only the raw values that need to be mapped (without any information on how they are being sorted by the DataSource). As a result, the positional index returned to the value mapper is incorrect if/when the data is sorted differently.
For example, the "normal" read request calls the controller action, it retrieves data [A, C, D, B], and the DataSourceRequest is applied to sort it as [A, B, C, D] and this is how it's displayed in the dropdown list. If the value "B" needs to be mapped, the "value mapper" request calls a similar (but different) controller action, it retrieves the same set of data [A, C, D, B] but does not make any attempt to sort it, finds "B" in the list (#4), and this is returned to the component (which then sets the dropdown's selectedIndex = 4, but in the dropdown's sorted list of data, this corresponds with the value "D", not "B" [which would be 2]).
### Bug report
The label configuration is not available for the plotband when using the TagHelper version of the Bar Chart.
### Reproduction of the problem
1. Open the following REPL sample: https://netcorerepl.telerik.com/woEMFDll17ui7F4122
2. The label of the plotband is not available.
3. The label option is available when defining the Chart by using HtmlHelpers: https://netcorerepl.telerik.com/QSYMvNFP187x0nAl24
### Expected/desired behavior
The plotband must have a label option.
### Environment
* **Telerik UI for ASP.NET Core version: 2024.3.806
* **Browser: [all]
I'm in the process of rewriting all Kendo components to use CSP compatible templates. I'm looking at https://docs.telerik.com/aspnet-core/html-helpers/template/overview which shows how we'd use TemplateComponentName() for popup editors and that we would need to rewrite everything in the popup editor to use Kendo Template's AddHtml or AddComponent methods.
Original:
<div class="mb-2 row required">
@Html.LabelFor(model => model.FileName, new { @class = "col-sm-4 col-form-label fw-bold text-sm-end" })
<div class="col-sm-6">
@(Html.Kendo().TextBoxFor(model => model.FileName).HtmlAttributes(new { @class = "w-100" }))
</div>
</div>
<div class="mb-2 row">
@Html.LabelFor(model => model.FileDescription, new { @class = "col-sm-4 col-form-label fw-bold text-sm-end" })
<div class="col-sm-6">
@(Html.Kendo().TextBoxFor(model => model.FileDescription).HtmlAttributes(new { @class = "w-100" }))
</div>
</div>
Rewritten:
@(Html.Kendo().Template()
.AddHtml("<div class='mb-2 row required'>")
.AddHtml(@<text>
@Html.LabelFor(model => model.FileName, new { @class = "col-sm-4 col-form-label fw-bold text-sm-end" })
</text>)
.AddHtml("<div class='col-sm-6'>")
.AddComponent(c => c.TextBoxFor(model => model.FileName).HtmlAttributes(new { @class = "w-100" }))
.AddHtml("</div></div>")
.AddHtml("<div class='mb-2 row'>")
.AddHtml(@<text>
@Html.LabelFor(model => model.FileDescription, new { @class = "col-sm-4 col-form-label fw-bold text-sm-end" })
</text>)
.AddHtml("<div class='col-sm-6'>")
.AddComponent(c => c.TextBoxFor(model => model.FileDescription).HtmlAttributes(new { @class = "w-100" }))
.AddHtml("</div></div>")
)
While this works, this markup seems much harder to read than the original. Could this be made to be simpler? Ideally I'd like to be able to drop my existing mix of html and kendo components in one method and it'd parse through to render the template properly.
Grid Hidden Column is set as exportable by default for Pdf and Excel
The Grid Hidden Column should be set as exportable by default for Pdf and Excel.
The Grid Hidden Column should not be set as exportable by default for Pdf and Excel.
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>);
})
The issue is reproducible when the TimePicker's dates configuration is set and its min() API method is called. Afterwards, if the user select a time, the component shows the wrong time (2h earlier) as selected.
The TimePicker shows a selected value that is 2h earlier than the actual time the user has selected.
The time the user selects is shown as selected value.