Hey, I'm trying to sort the data in the MultiSelectFor, so it can be displayed in alphabetical order.
@(Html.Kendo().MultiSelectFor(model => model.UserIds)
.HtmlAttributes(new { @class = "large" })
.Placeholder("Select users ...")
.DataValueField("Value")
.DataTextField("Text")
.AutoClose(false)
.DataSource(.DataSource(ds => ds.Read("AvailableUsers", "UserApi"))
)
I've searched for this issue and tried some suggested things but with no success:
@(Html.Kendo().MultiSelectFor(model => model.UserIds)
.HtmlAttributes(new { @class = "large" })
.Placeholder("Select users ...")
.DataValueField("Value")
.DataTextField("Text")
.AutoClose(false)
.DataSource(ds => ds.Custom()
.Transport(t => t
.Read(r => r
.Action("AvailableUsers", "UserApi")
.Data("{ any: false }")
)
)
.Sort(s => s
.Add("Value")
.Descending()
))
)
public JsonResult AvailableUsers()
{
var userRepo = new UserRepository(ntfy);
var result = userRepo.GetAll().Select(_ => new SelectListItem
{
Text = string.Format("{0} ({1} {2})", _.Username, _.Firstname, _.Lastname),
Value = _.Id.ToString()
});
return this.Json(result, JsonRequestBehavior.AllowGet);
}
Hello,
I was wondering if there is a way to change the asp.net mvc data grid checkbox selection option's image from a checkbox to say, a star.
Or would I need to essentially rebuild the functionality through a custom template?
Thanks
I'm upgrading a project from 2021.2.511 to 2023.2.829 and I have a page which is extremely data heavy. Using the .Size(ComponentSize.Small) option still results in a much larger drop-down list than before.
How can I reduce the size of these drop-downs further? In the old version, they simply inherited the font-size of the parent div.
This also applies to the multiselect controls as well
I am trying to create a kendo grid with one of the column as a multiselect dropdown widget, so users can select multiple values for a column named industry in a single record. I am not able to do so.
Please help.
This is how i have prepared my grid :
$("#ListofMF").kendoGrid({
dataSource: {
data: extractedData,
schema: {
model: {
fields: {
Id: {type: "integer"},
FullName: { type: "string" },
Temp1: { type: "boolean" },
Temp2: { type: "boolean" },
Industry: { type: "string" },
//Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
//scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: true,
pageSize: 6
},
columns: [
{
title: " ",
width: 30,
field: "Id",
hidden: true
},
{
title: " ",
width: 40,
filterable: false,
headerAttributes: { style: "font-weight: bold;" },
template: '<input type="checkbox" class="isMFSelected"/>'
},
{
field: "FullName",
title: "Data",
//width: "140px",
headerAttributes: { style: "font-weight: bold;" }
},
{
field: "Temp1",
title: "Temp 1",
width: "130px",
filterable: false,
headerAttributes: { style: "font-weight: bold;" },
template: '<input type="checkbox" class="Temp1" #=Temp1? "checked=checked" : "" #/>'
},
{
field: "Temp2",
title: "Temp 2",
width: "130px",
filterable: false,
headerAttributes: { style: "font-weight: bold;" },
template: '<input type="checkbox" class="Temp1" #=Temp1 ? "checked=checked" : "" #/>'
},
{
field: "Industry",
title: "Industry",
editor: function (container, options) {
// Get the industry template and apply it to the column editor
console.log(container.html);
var industryTemplate = $("#industryTemplate").html();
container.html(industryTemplate);
}
}
]
});
<script id="industryTemplate" type="text/x-kendo-template">
@(Html.Kendo().MultiSelect()
.Name("Industry")
.DataValueField("Value")
.DataTextField("Text")
.BindTo((IEnumerable<SelectListItem>)ViewData["IndustryList"])
)
</script>
Model for the Tag property is of complex type object
[UIHint("TaskTagEditor")]
public List<NameId> TaskTags { get; set; }
// Class ----
public class NameId
{
public int Id { get; set; }
public string Name { get; set; }
}
Kendo grid field:
columns.Bound(p => p.TaskTags).Width(240).ClientTemplate("#=taskTagsTemplate(TaskTags)#").EditorTemplateName("TaskTagEditor").Title("Tasks") .Filterable(p => p.Multi(true) .CheckAll(false) .ItemTemplate("TaskTagsFilterItemTemplate") .DataSource(d => { d.Read(read => read.Action("GetTaskTagsEditor", "TaskManager")); }) );
Client Template and Item template js:
function taskTagsTemplate(data) {
var template = "";
for (var i = 0; i < data.length; i++) {
template += (data.length == 1 || i == 0) ? data[i].Name : ("," + data[i].Name);
}
return template;
}
function TaskTagsFilterItemTemplate(e) {
return "<span><label><input class='tag-filter-input' type='checkbox' name='" + e.field + "' value='#= Id #'/><span>#= Name #</span></label></span><br/>"
}
Editor :
GetTaskTagsEditor
@model List<GrapeTree.Core.Model.TaskManager.NameId>
@(Html.Kendo().MultiSelectFor(m => m)
.DataTextField("Name")
.DataValueField("Id")
.AutoBind(false)
.TagMode(MultiSelectTagMode.Multiple)
.DataSource(d =>
{
d.Read(read => read.Action("GetTaskTagsEditor", "TaskManager"));
})
)
Controller method for option:
public ActionResult GetTaskTagsEditor() {
var tagList = _taskManager.GetActiveTaskTags()
.Select(tag => new NameId
{
Id = tag.Id,
Name = tag.Name
}).OrderBy(x => x.Name);
var jsonSerializerSettings = new JsonSerializerSettings { ContractResolver = new DefaultContractResolver() };
var json = JsonConvert.SerializeObject(tagList.ToList(), Formatting.Indented, jsonSerializerSettings);
return Content(json, "application/json");
}
Incell Editor is working fine and Filter about to bind with muti select value but filtering doesn't work for this complex object
Currently I have two buttons assigned to the HeaderTemplateId for my MultiSelectFor Kendo control, I'm able to navigate to the items in the list but would also like to tab into or use arrow keys to navigate to the header template as well. I couldn't find any documentation for this particular use case, is there functionality to enable keyboard navigation for the header template?
MultiSelectFor control:
@(Html.Kendo().MultiSelectFor(model => model.Name).Name("MultiSelect1") .Placeholder("Select item") .DataTextField("Text") .DataValueField("Value") .HeaderTemplateId("HeaderTemplate") ... )
<script type="text/x-kendo-template" id="HeaderTemplate">
<button class="k-button" onclick="SomeFunctionA(this)">Select All</button>
<button class="k-button" onclick="SomeFunctionB(this)">Remove All</button>
</script>
I'm updating an application (based on version v2021.2.511) porting bits of code to a new application based on v2022.2.510). I'm trying to get a multi-select drop-down list with checkboxes working. The requirment is for the check boxes to be checked if an item in the list is selected, and unchecked if it is unselected.
The following styles were added:-
<style type="text/css">
@*.EditButton {
display:@ViewBag.EditButton;
}*@
.nopadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
.k-multiselect:after {
content: "\25BC";
position: absolute;
top: 30%;
right: 10px;
font-size: 10px;
}
.k-multiselect-wrap.k-floatwrap li.k-button .k-icon.k-i-close
{
display: none !important;
}
}
</style>
<style scoped>
.k-widget.k-multiselect {
width: 300px;
vertical-align: middle;
display: inline-block;
}
</style>
The multiselect definition is:-
@(Html.Kendo().MultiSelect()
.Name("msSpecialty")
.DataValueField("Code")
.DataTextField("Description")
.Placeholder("All specialties...")
.ItemTemplate("<input type='checkbox' /> #=data.Description#")
.AutoClose(false)
.ClearButton(false)
.TagMode(TagMode.Multiple)
//.TagTemplate(" <span>#= Description #</span>")
.Events(e => e.Close("onSpecListChange").DataBound("specListDataBound").Change("chkFix"))
.DataSource(src => src.Read(rd => rd.Action("getOpenClockSpecDDL", "Validation")).ServerFiltering(false))
.HtmlAttributes(new { style = "width:300px;" })
)
And the javascript:-
var currentSpec = '-X-';
function onSpecListChange() {
var items = this.ul.find("li");
checkInputs(items);
//check if list has changed since last close, if so, fire change event (Avoids unnescessary requeries)
var multiselect = $("#msSpecialty").data("kendoMultiSelect");
var Svalue = multiselect.value().sort();
var SpecString = "";
if (Svalue != null & Svalue != '') {
for (i = 0; i < Svalue.length; i++) {
SpecString = SpecString + Svalue[i] + "|";
}
}
else {
SpecString = "-X-";
}
if (currentSpec != SpecString) {
onChange();
}
}
function checkInputs(elements) {
elements.each(function () {
var element = $(this);
var input = element.children("input");
input.prop("checked", element.hasClass("k-state-selected"));
});
}
function specListDataBound() {
var items = this.ul.find("li");
setTimeout(function () {
checkInputs(items);
});
}
function chkFix() {
var items = this.ul.find("li");
setTimeout(function () {
checkInputs(items);
});
}
function onChange()
{
}
I assume the styles have changed between the versions, because this code is not working. The checkboxes aren't being checked on selection, the list doesn't close when clicked away from, and the closed multiselect isn't displaying properly. How can I get it working as it was please?
I have a simple multiselect like so:
@(Html.Kendo().MultiSelectFor(x => x.CourseId)
.DataValueField("Id")
.DataTextField("Name")
.Placeholder("Select Course...")
.ClearButton(false)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCourseCodeList", "Home");
})
.ServerFiltering(true);
})
.MaxSelectedItems(1)
.HtmlAttributes(new { @class = "" }))
When I enter text, the search is submitted once with the text entered, then a second time with the Placeholder text, or if no Placeholder, with empty string.
public JsonResult GetCourseCodeList(string text, int categoryId=0)
{
var items = _courseData.Where(x =>
x.Name.Contains(text) &&
(categoryId == 0 || x.CategoryId == categoryId)).OrderBy(x => x.Name).ToList();
var userinput = text;
var result = new JsonResult
{
JsonRequestBehavior = JsonRequestBehavior.AllowGet,
Data = items
};
return result;
}
A sample project replicating the issue is here : https://github.com/SteveWortho/TLCKendoTest
It must be something simple I am doing wrong - any advice appreciated.
Using;
VS2017 Pro Version 15.5.1
KendoUI MVC 2017.3.1026
Chrome Version 63.0.3239.132 or Microsoft Edge or FireFox. Issue is repeatable.
So I must be firing the onChange event a second time with some of this configuration maybe?
But it is such a simple example.
Thanks in advance,
Steve
Hi,
I need sample code for implementing select all /deselect all with combo box in kendo mvc grid
thanks in advance
@model IEnumerable<Emplopyee>
@(
Html.Kendo().MultiSelectFor(m => m)
.DataTextField("Name")
.DataValueField("Id")
.HtmlAttributes(new { @style = "height:auto; overflow-x:auto ;" })
.Filter(FilterType.Contains.ToString())
.BindTo((IEnumerable<Employee>)ViewData["Employees"])
)
I'm having an issue getting the selected item from the passed event, mostly because the demo uses "e.dataitem"
like this:
function onSelect(e) {
if ("kendoConsole" in window) {
var dataItem = e.dataItem;
kendoConsole.log("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");
}
}
@(Html.Kendo().MultiSelect()
.Name("JobIds")
.HtmlAttributes(new { style = "Width:700px; height:60px; overflow-y:scroll;", aria_label = "editor" })
.DataTextField("job_name")
.DataValueField("job_id")
.HeaderTemplate("<div class=\"dropdown-header\">" +
"<span style=\"width=350px\">Job Name</span>" +
"<span style=\"width=350px\">Parent Name</span>" +
"</div>\n <table>")
.ItemTemplate("<span class = \"namespan\">#: data.job_name #</span> <span class=\"parentspan\">#: data.job_parent #</span >")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("JobSearch", "SupportEditor");
})
.ServerFiltering(true);
})
.Events(e =>
{
e.Select("Job_onSelect")
})
function Job_onSelect (e) {
var dataItem = e.dataItem;
console.log("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");
}
event :: select (undefined : undefined)
function Job_onSelect(e) {
console.log($("#JobIds").data("kendoMultiSelect").value().toString());
}