I am trying to sort alphabetically string values inside the multi filter combobox in Kendo Grid to filter. Now it shows randomly there is no any order in mvc. Here is the code
columns.Bound(c => c.EmpName).Title("Employee Name") .Filterable(filterable => filterable .Multi(true)
So I have data in this format
{
name: health
data:[[1,2],[2,2],[3,4]]
type:"area"
visible:true
},
{
name: health2
data:[[1,2],[2,2],[3,4]]
type:"line"
visible:true
}
I have attached a screenshot of what i want to achieve need guidance to do this I'm new to kendo .
Hi team,
I found that since 2022 R2, the height of a multiselect varies when adding tags. From 30px height with no values to 32px height with one or more tags.
https://dojo.telerik.com/UVUSaSIn
As a result, there is a nasty pumping effect in the page.
Please advise,
Best regards,
Laurent.
We updated Kendo UI for JQuery from v2021.2.511 to v2022.1.325 and we observed that certain screen reader functions were broken.
The following issues were observed when screen reader is activated on any KendoMultiSelect control:
a. The selected item and tag are not being announced. The selected item and the tag were announced by narrator before the update.
b. The number of available suggestions is not announced. This was announced before the update.
c. When scan mode is activated, users cannot navigate the list items using the up/down arrow keys.
d. When a user enters a search string that is not in the datasource, narrator does not announce that. Before the update, narrator would announce "Selection contains zero items".
For other controls like checkboxes, narrator does not announce the name or label of the controls when in focus.
Is there a different attribute other than aria-label that we need defined on these controls to get screen readers to announce them?
I'd appreciate any help to get these issues fixed.
Thanks!
OS: Windows 11
Browser: Edge Chromium.
Kendo UI version: v2022.1.325
Screen Reader: Windows Narrator
I have some model with selected ids:
class
Model{
public
IList<
int
> SelectedIds {
get
;
set
; }
}
in my partial view I render Multiselect control:
@(Html.Kendo().MultiSelectFor(f => f.SelectedIds)
.Name("SelectedIds")
.Placeholder("​Select Items...")
.Filter(FilterType.Contains)
.IgnoreCase(true).TagMode(TagMode.Single)
.TagTemplate("<
span
>​Selected #=data.dataItems.length# ​from #=data.maxTotal#</
span
>")
.DataSource(a => a.Read("Get​ItemsListAction", "​Controller"))
.DataValueField("Id")
.DataTextField("Value")
.AutoClose(false)
)
and it renders next wrong Javascript code (see value of the "value" at the end of the expression :):
jQuery(
function
(){jQuery(
"#SelectedIds"
).kendoMultiSelect({
"dataSource"
:{
"transport"
:{
"read"
:{
"url"
:
"/sspd/​Controller/Get​ItemsListAction"
},
"prefix"
:
""
},
"schema"
:{
"errors"
:
"Errors"
}},
"dataTextField"
:
"Value"
,
"filter"
:
"contains"
,
"ignoreCase"
:
true
,
"tagMode"
:
"single"
,
"tagTemplate"
:
"\u003cspan\u003e​Selected#=data.dataItems.length# ​from #=data.maxTotal#\u003c/span\u003e"
,
"autoClose"
:
false
,
"dataValueField"
:
"Id"
,
"placeholder"
:
"Select Items..."
,
"value"
:[
"System.Collections.Generic.List`1[System.Int32]"
]});});
BUT!
When I change the Name in Razor code to something other name, for example, "bla-bla-bla" it renders correct code and I see in the web page multiselect with selected items:
jQuery(
function
(){jQuery(
"#bla-bla-bla"
).kendoMultiSelect({
"dataSource"
:{
"transport"
:{
"read"
:{
"url"
:
"/sspd/​Controller/Get​ItemsListAction"
},
"prefix"
:
""
},
"schema"
:{
"errors"
:
"Errors"
}},
"dataTextField"
:
"Value"
,
"filter"
:
"contains"
,
"ignoreCase"
:
true
,
"tagMode"
:
"single"
,
"tagTemplate"
:
"\u003cspan\u003eSelected#=data.dataItems.length# from #=data.maxTotal#\u003c/span\u003e"
,
"autoClose"
:
false
,
"dataValueField"
:
"Id"
,
"placeholder"
:
"Select Items..."
,
"value"
:[28620,32216]});});
In other words, rendered javascript is incorrect when Model's property for the selected ids is the same with parameter value passed to Html.Kendo().MultiSelect().Name method
Whats wrong in my code?
<%= Html.Kendo().MultiSelectFor(m => m.FilterRoleIds)
.Placeholder("Select Roles")
.DataTextField("RoleName")
.DataValueField("ApRoleId")
.BindTo(ViewBag.ApRolesList)
%>
<%= Html.Kendo().MultiSelectFor(m => m.FilterCompanyIds)
.Placeholder("Select Companies")
.DataTextField("CompanyName")
.DataValueField("CompanyId")
.BindTo(ViewBag.CompanyList)
%>
<
script
language
=
"javascript"
type
=
"text/javascript"
>
function additionalData() {
return {
roleIds: "<%= ApRoleController.ReturnListValues(Model.FilterRoleIds) %>",
companyIds: "<%= ApRoleController.ReturnListValues(Model.FilterCompanyIds) %>"
};
}
</
script
>
public static string ReturnListValues(List<
string
> list)
{
if (list == null || list.Count == 0) return "";
string s = string.Empty;
foreach (var item in list)
{
if (s != string.Empty)
s += ",";
s += item;
}
return s;
}
<
script
language
=
"javascript"
type
=
"text/javascript"
>
function additionalData() {
var roleIds = <%= Html.Raw(Json.Encode(Model.FilterRoleIds)) %>;
var data = {};
for(var i=0; i<
roleIds.length
;i++){
data["FilterRoleIds[" + i + "]"] = roleIds[i];
}
return data;
}
</script>