Incorrect id attribute is generated when the Value() configuration contains spaces. As a result a RadioButton component is not initialized.
This is a regression introduced with v2022.1.301
The following RadioButton definition:
@(Html.Kendo().RadioButton().Name("radioBtn1").Value("Value with spaces"))
generates an incorrect id attribute
<input id="radioBtn1_Value with spaces" name="radioBtn1" type="radio">
kendo.syncReady(function() {
jQuery("#radioBtn1_Value with spaces").kendoRadioButton({
"checked": false,
"value": "Value with spaces"
});
});
A valid id attribute should be generated.
1569749
This is a strange bug I came across when making a simple grid for a small personal project. I created a class called Book, which looks like this:
[Table("Books")]
public class Book
{
[Key]
public int Id { get; set; }
[Required]
public string Title { get; set; } = null!;
public Checkout? Checkout { get; set; }
[NotMapped]
public bool CheckedOut => Checkout != null;
}
I then created a simple Razor view on which to show the books on a grid. Here is what the code for the page looks like:
@{
ViewData["Title"] = "All Books";
}
@(
Html.Kendo().Grid<LibraryMvc.Core.Entities.Book>()
.Name("bookGrid")
.Pageable(p => {
p.PageSizes(new[] {20, 50, 100 });
p.Numeric(true);
p.Input(true);
})
.Editable(e => e.Mode(GridEditMode.InLine))
.Filterable()
.Sortable()
.Scrollable()
.ToolBar(t => t.Create())
.Columns(col => {
col.Bound(c => c.Id).Title("ID");
col.Bound(c => c.Title).Title("Title");
col.Bound(c => c.CheckedOut).Title("Checked Out");
col.Command(com => {
com.Edit();
com.Destroy();
}).Title("Manage");
})
.DataSource(ds =>
ds.Ajax()
.PageSize(20)
.Model(md => {
md.Id(f => f.Id);
md.Field(f => f.Id).Editable(false);
md.Field(f => f.CheckedOut).Editable(false);
})
.Read(r => r.Action("Book_Read", "Book"))
.Create(c => c.Action("Book_Create", "Book"))
.Update(c => c.Action("Book_Update", "Book"))
.Destroy(c => c.Action("Book_Destroy", "Book"))
)
)
When running my app with this code, I noticed that client-side validation would not work on the grid. Nothing would stop me from adding multiple Book rows with empty Titles, despite Title being a [Required] property based on my Book class's Data Annotations:
I assumed I did something wrong, so I scoured the internet and Telerik's support items in hopes of finding something, but then I came across this when inspecting the page's elements in Chrome's dev tools:
Look at the script tag. For whatever reason, the kendoTextBox ended up using the Razor view's ViewData["Title"] property. Oops!
To work around this, I ended up changing my Book class's Title field to BookTitle, as shown below:
[Table("Books")]
public class Book
{
[Key]
public int Id { get; set; }
[Required]
[Column("Title")]
public string BookTitle { get; set; } = null!;
public Checkout? Checkout { get; set; }
[NotMapped]
public bool CheckedOut => Checkout != null;
}
With this property name changed, I was able to get client-side validation to work as needed:
A second workaround involved getting rid of the ViewData["Title"] definition on my Razor view:
Given all this, it looks like something that's generating the client-side validation on the page is getting tripped up over the word "Title" being used by multiple items on the page.
The Drawer, when in overlay mode, adds a k-drawer-content class to the first element of the passed content, but does not wrap the content in a container element, leading to incorrect rendering.
<button id='show'>Show</button>
@(Html.Kendo().Drawer()
.Name("drawer")
.Template(@"
<ul>
<li data-role='drawer-item' class='k-state-selected'><span></span><span class='k-item-text'>A</span></li>
<li data-role='drawer-item'><span></span><span class='k-item-text'>B</span></li>
<li data-role='drawer-item'><span></span><span class='k-item-text'>C</span></li>
</ul>
")
.Mode("overlay")
.Position("left")
.SwipeToOpen(true)
.Content(@<text>
<div id="A">Item A content</div>
<div id="B" class='hidden'>Item B content</div>
<div id="C" class='hidden'>Item C content</div>
</text>)
.Events(x => x.ItemClick("onItemClick")))
<script>
$('#show').click(function () {
var drawerInstance = $("#drawer").getKendoDrawer()
drawerInstance.show();
});
function onItemClick(e) {
$('body').find('.k-drawer-content > div').addClass("hidden");
$('body').find('.k-drawer-content').find("#" + e.item.find(".k-item-text").text()).removeClass("hidden");
}
</script>
<style>
.hidden {
display: none;
}
</style>
Sample application:
TelerikAspNetCoreApp226.zip
Only the <div id="A">Item A content</div>
element is treated as a content for the Drawer
The passed content should be wrapped in a container
### Bug report
The CheckBox TagHelper does not render the attribute "required" and a custom class.
### Reproduction of the problem
The CheckBox TagHelper definition:
<kendo-checkbox id="KendoCheckboxRequiredByHtml" class="form-check-input" required>
</kendo-checkbox>
It generates the following markup:
<input id="KendoCheckboxRequiredByHtml" name="KendoCheckboxRequiredByHtml" type="checkbox" value="true" data-role="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
<input name="KendoCheckboxRequiredByHtml" type="hidden" value="false">
A sample for reproduction is attached.
### Expected/desired behavior
The attribute "required" and the class "form-check-input" to be set to the generated input element.
### Environment
* **Kendo UI version: 2022.2.510
* **Browser: [all]
When a Telerik UI for ASP.NET Core MultiSelect is used in a Form, a JS error is thrown:
jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #
at Function.se.error (jquery.min.js:2)
at se.tokenize (jquery.min.js:2)
at se.select (jquery.min.js:2)
at Function.se [as find] (jquery.min.js:2)
at S.fn.init.find (jquery.min.js:2)
at new S.fn.init (jquery.min.js:2)
at S (jquery.min.js:2)
at Object.data ((index):24)
at init.setup (kendo.all.js:6596)
at init.read (kendo.all.js:6574)
The issue occurs when using jQuery 3.6.0, but is absent with jQuery v 1.12.4
@(Html.Kendo().Form<FormViewModel>()
.Name("exampleForm")
.HtmlAttributes(new { action = "Items", method = "POST" })
.Validatable(v =>
{
v.ValidateOnBlur(true);
v.ValidationSummary(vs => vs.Enable(true));
})
.Items(items =>
{
items.Add()
.Field(f => f.MultiSelect)
.Label(l => l.Text("MultiSelect:"))
.Editor(e =>
{
e.MultiSelect()
.HtmlAttributes(new { })
.Placeholder("Select...")
.DataTextField("ProductName")
.DataValueField("ProductID")
.HtmlAttributes(new { style = "width:100%" })
.Height(520)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Items_GetProducts", "Form");
})
.ServerFiltering(true);
});
});
})
)
public class FormViewModel
{
public List<ProductViewModel> MultiSelect { get; set; }
}
Runnable sample available in ticket 1540812
JavaScript error should not be thrown.
When deleting a record in a grouped editable Grid, the "Destroy" action is triggered twice.
The "Destroy" action should not be triggered twice.
The TextBox TagHelper does not render the maxlength and placeholder attributes when set via data annotations.
For a model property defined the following way
[Display(Name = "Example", Prompt = "Example Prompt")]
[StringLength(maximumLength : 5, MinimumLength = 1, ErrorMessage = "Must be between 1 and 5")]
public string Example { get ; set ; }
the TextBox TagHelper generetes
<input
class="form-control k-input-inner"
data-val="true"
data-val-length="Must be between 1 and 5"
data-val-length-max="5"
data-val-length-min="1"
id="Example"
name="Example"
value=""
data-role="textbox"
style="width: 100%;"
aria-disabled="false"
autocomplete="off"
aria-invalid="true"
aria-describedby="Example_validationMessage">
when the default ASP.NET Core TagHelper generates markup containing the maxlength and placeholder attributes:
<input
class="form-control k-invalid"
type="text"
data-val="true"
data-val-length="Must be between 1 and 5"
data-val-length-max="5"
data-val-length-min="1"
id="Example"
maxlength="5"
name="Example"
placeholder="Example Prompt"
value=""
aria-invalid="true"
aria-describedby="Example_validationMessage">
The maxlength and placeholder attributes are set to the generated input element.
When the user creates a folder and tries to add a file to the Editor an error occurs that the file is not found. This behavior is observed only if the application is Core 3.1.
Currently, in the console, an error 404 occurs that the resource is not found.
The image should be added to the Editor without errors.
Kendo.Mvc.UI.GridBoundColum.SerializeValues throws an exception when using an Enum, decorated with FlagsAttribute.
This is a regression introduced with v2022.2.510. Possibly related to telerik/kendo@423e1e9
Using a ForeignKey column, bound to Enum, where the Enum has the FlagsAttribute throws an exception:
columns.ForeignKey(m => m.MyEnum, ....); // MyEnum is an enum with the FlagsAttribute
Using an Enum, decorated with FlagsAttribute should be possible, as in previous versions and an exception should not be thrown.
We noticed while testing the latest version (UI for ASP.NET Core R2 2022 (version 2022.2.510)) that hidden grid columns are incorrectly exported to Excel. Rolling back one version resolves the issue so it appears to be an issue in the new version.
I verified it in the grid demos on your site, and also verified that the bug is not present in the jQuery version.
jQuery version - no issue
ASP.NET Core version - BUG
When using the TaxtBoxFor HTML helper and the MaxLength is set via DataAnnotation the maxlength
attribute is not rendered.
Model:
public class MyModel
{
[MaxLength(5)]
public string Text { get; set; }
}
View:
@Html.Kendo().TextBoxFor(m => m.Text)
The Telerik UI for ASP.NET Core HTML Helper renders the following markup, without the maxlength
attribute:
<span class="k-widget k-textbox" style="">
<input data-val="true" data-val-maxlength="The field Text must be a string or array type with a maximum length of '5'." data-val-maxlength-max="5" id="Text" name="Text" value="" data-role="textbox" aria-disabled="false" class="k-input" autocomplete="off" style="width: 100%;">
</span>
The default Html.TextBoxFor helper renders the following markup, containing the maxlength
attribute:
<input data-val="true" data-val-maxlength="The field Text must be a string or array type with a maximum length of '5'." data-val-maxlength-max="5" id="Text" maxlength="5" name="Text" type="text" value="">
The Telerik UI for ASP.NET Core HTML Helper should render the maxlength
attribute.
### Bug report
When Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation NuGet package is installed in Telerik UI for ASP.NET Core application, it throws an exception:
FileNotFoundException: Could not load file or assembly 'Microsoft.DotNet.InternalAbstractions, Version=1.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60'. The system cannot find the file specified.
### Reproduction of the problem
1. Create Telerik UI for ASP.NET Core MVC application (.NET Core version 6.0).
2. Install Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation NuGet package (version 6.0.5).
3. Turn on the Razor Runtime Compilation:
//Program.cs file
// Add services to the container.
builder.Services.AddControllersWithViews()
.AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver = new Newtonsoft.Json.Serialization.DefaultContractResolver())
.AddRazorRuntimeCompilation();
4. Run the application and review the exception.
Attached is a runnable sample for reproduction.
### Workaround
Install Microsoft.DotNet.InternalAbstractions NuGet package (version: 1.0.0)
### Environment
* **Kendo UI version: 2022.2.510
* **jQuery version: 1.12.4
* **Browser: [all]
When the FileManager is defined using TagHelpers the defined schema is not serialized
The following FileManager definition:
<kendo-filemanager name="filemanager" upload-url="@Url.Action("FileManagerUpload", "FileManager")">
<filemanager-datasource>
<transport>
<read url="@Url.Action("FileManagerRead", "FileManager")" type="POST" />
<create url="@Url.Action("FileManagerCreate", "FileManager")" type="POST" />
<destroy url="@Url.Action("FileManagerDestroy", "FileManager")" type="POST" />
<update url="@Url.Action("FileManagerUpdate", "FileManager")" type="POST" />
</transport>
<schema>
<filemanager-model id="path" has-children="hasDirectories">
<fields>
<field name="path" type="string" from="Path"></field>
<field name="name" type="string" from="Name"></field>
<field name="extension" type="string" from="Extension"></field>
<field name="created" type="date" from="Created"></field>
<field name="createdUtc" type="date" from="CreatedUtc"></field>
<field name="modified" type="date" from="Modified"></field>
<field name="modifiedUtc" type="date" from="ModifiedUtc"></field>
<field name="size" type="number" from="Size"></field>
</fields>
</filemanager-model>
</schema>
</filemanager-datasource>
<toolbar>
<items>
<item name="createFolder" />
<item name="upload" />
<item name="sortDirection" />
<item name="sortField" />
<item name="changeView" />
<item name="spacer" />
<item name="details" />
<item name="search" />
</items>
</toolbar>
</kendo-filemanager>
generates the following script, without a schema definition:
<script>
kendo.syncReady(function() {
jQuery("#filemanager").kendoFileManager({
"uploadUrl": "/FileManager/FileManagerUpload",
"toolbar": {
"items": [{
"name": "createFolder"
}, {
"name": "upload"
}, {
"name": "sortDirection"
}, {
"name": "sortField"
}, {
"name": "changeView"
}, {
"name": "spacer"
}, {
"name": "details"
}, {
"name": "search"
}]
},
"dataSource": {
"schema": {
"model": {
"id": "path",
"hasChildren": "hasDirectories"
}
},
"transport": {
"destroy": {
"type": "POST",
"url": "/FileManager/FileManagerDestroy"
},
"read": {
"type": "POST",
"url": "/FileManager/FileManagerRead"
},
"update": {
"type": "POST",
"url": "/FileManager/FileManagerUpdate"
},
"create": {
"type": "POST",
"url": "/FileManager/FileManagerCreate"
}
}
}
});
});
</script>
The FileManager DataSource schema should be serialized
The Core wrapper does not have a "Type" option:
.DependenciesDataSource(d => d
.Model(m =>
{
m.Id(f => f.DependencyID);
m.PredecessorId(f => f.PredecessorID);
m.SuccessorId(f => f.SuccessorID);
**m.Type(f => f.Type);**
})
.Read("Read_Dependencies", "Gantt")
.Create("Create_Dependency", "Gantt")
.Destroy("Destroy_Dependency", "Gantt")
)
Both the MVC wrapper and the jQuery widget allow to specify a field in the data that will be used as "type". Currently the Core wrapper does not allow specifying a field, and dependencies will work only if the data contains a field named "Type".
The DatePicker's popup has a CSS min-height property set that causes it to sometimes have an empty blank space at the bottom.
Review another occurence.
There should be a blank space in the DatePicker's popup.
### Bug report
When the DropDownTree control is added as a Form editor through the Editor() method, there is an ArgumentNullException "Value cannot be null. (Parameter 'key')".
### Reproduction of the problem
Attached is a demo that replicates the issue.
If the DropDownTree is defined outside of the Form, it is bound to the Model property as expected.
### Expected/desired behavior
The DropDownTree editor should bind to the Model property in the Form.
### Environment
* **Kendo UI version: 2022.1.412
* **jQuery version: 1.12.4
* **Browser:** [all]
DataSource Wrappers do not expose a configuration property do create a kendo.data.SchedulerDataSource. This is needed to configure a shared DataSource between the Filter and the Scheduler
The wrapper should be able to integrate the Filter with Scheduler as referenced by the Filter's Documentation
1565222
### 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]
### Bug report
When the filter is applied through the search panel, the query (more specifically, the filter expressions) is not built correctly. This results in displayed rows that have values that do not match the value from the search panel.
### Reproduction of the problem
1. Enable Search panel and group paging of the grid.
2. Set a value in the search panel and group by a column.
3. Expand the group and verify that there are items with values that do not match the filter expression from the search panel.
Short video demonstration:
https://screencast-o-matic.com/watch/crXFlXVI3i0
### Expected/desired behavior
The returned results should comply with the filter expression built from the Search panel.
### TicketID:
_1543306
### Additional notes and explanation
The Search panel builds the filter expression with the logic operator "or". While this is correct when the actual query is further built from the data source's internals (group function of the kendo.data.js file), the filter will be built with the "or" logic instead of "and". This query has to be restructured in order to send two filter objects with the "and" logic. The first filter object should contain all filter expressions built from the search panel with the "or" logic operator and the second filter object should contain an expression with the operator "eq", the field by which the group is built, and the value. The two filter objects should be combined with the "and" logic.
### Environment
* **Kendo UI version:** 2021.3.1109
* **jQuery version:** 1.12.4
* **Browser:** [all]
When the Grid's Group Paging is enabled and its content is grouped, the Multicheckbox Filter doesn't filter the group data correctly.
The group shows rows that shouldn't be included when the column is filtered properly
The group should only show the filtered rows
1546090