How to disable the initial values in a kendo mvc multiselect, so they wont be unselected?
Question
I'm trying to have a kendo multiselect filled with some initial values which can't be removed later by the user.
I've tried to run through the DataBond event of multiselect widget and get each of the elements, but I couldn't accomplish what I'm trying. Maybe (or more probably) I'm doing something wrong.
Also, I've seen this to disable elements:
<span class="#: unselectableItem ? 'k-state-disabled': ''#">
#: text #
</span>
But i'm not sure, how to implement it.
What I have so far:
@(Html.Kendo().MultiSelect().Name("msEquipoResponsable")
.DataValueField("Id").DataTextField("Tipo")
.DataSource(ds => ds.Read(r => r.Action("ObtenerPersonal","AuditoriaPlaneacionMemorandoEditor")))
.Value(Model.EquipoResponsable.Split(','))
.Events(ev => ev.DataBound("onBindingMS"))
)
DataBound function:
function onBindingMS(event)
{
var dataItems = event.sender._dataItems;
$.each(dataItems, (ind, el) => {
//Disabled logic should be here i guess...
});
}
1 answers
solution1
0 2019-11-01 00:54:57
Try preventing the deselect event to be completed using e.preventDefault() for those items which cannot be deselected.
deselect: function(e) {
if (e.dataItem.unselectableItem)
{
// Call preventDefault() to prevent the deselection
e.preventDefault();
}
}
In the snippet below, items Item1 and Item3 starts selected and cannot be deselected according to the unselectableItem property:
<:DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href="https.//kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min:css"> <link rel="stylesheet" href="https.//kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min:css"> <link rel="stylesheet" href="https.//kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min:css"> <link rel="stylesheet" href="https.//kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min:css"> <script src="https.//code.jquery.com/jquery-1.12.3.min:js"></script> <script src="https.//kendo.cdn.telerik.com/2019.3.1023/js/angular.min:js"></script> <script src="https.//kendo.cdn.telerik.com/2019.3.1023/js/jszip.min:js"></script> <script src="https.//kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min:js"></script></head> <body> </body> <select id="multiselect" multiple="multiple"> <option selected>Item1</option> <option>Item2</option> </select> <script id="item-template" type="text/x-kendo-template"> <span class="#? unselectableItem: 'k-state-disabled': ''#"> #. text # </span> </script> <script> $("#multiselect"):kendoMultiSelect({ dataSource: [{ id, 1: text, "Item1": unselectableItem, true }:{ id, 2: text, "Item2": unselectableItem, false }:{ id, 3: text, "Item3": unselectableItem, true }:{ id, 4: text, "Item4": unselectableItem, false }]: dataValueField, "id": itemTemplate. $("#item-template"),html(): tagTemplate. $("#item-template"),html(): deselect. function(e) { if (e.dataItem.unselectableItem) { // Call preventDefault() to prevent the deselection e;preventDefault(), } }: value, [1;3] }); </script> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.