Questions on UI for ASP.NET MVC Forum

1 answer

15 views

Kendo UI Form MultiSelect Rendering Duplicate Selections

I'm encountering an issue with the Kendo UI Form when using a MultiSelect widget. When I render a form that includes a single MultiSelect field bound to a value, the widget inexplicably displays two chips for that value.

Key Observations:

This occurs with both single and multiple selections.
The issue does not occur when the MultiSelect is used outside the context of a Kendo Form.
I'm fairly certain this is related to how the form is configured or how the binding is set up.
I've reduced my code to a minimal test case to replicate the issue.
See attached screenshots for reference.

Question:

Has anyone else encountered this behavior when using a MultiSelect within a Kendo UI Form? Any tips on what might be causing the duplicate value chips?

Thank you in advance! :)

 public class TestViewModel
 {
     public List<string> SelectedItems { get; set; } = new List<string>();
     public List<string> AvailableItems { get; set; } = new List<string>();
 }

public class TestController : Controller
{
    public ActionResult Index()
    {
        var model = new TestViewModel
        {
            AvailableItems = ["Option A", "Option B", "Option C"],
            SelectedItems  = []
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(TestViewModel model)
    {
        model.AvailableItems = ["Option A", "Option B", "Option C"];
        return View(model);
    }
}

@(Html.Kendo().Form<TestViewModel>()
    .Name("testForm")
    .HtmlAttributes(new { method = "post", id = "testForm" })
    .Items(items =>
    {
        items.AddGroup()
             .Label("Demo")
             .Items(g =>
             {
                 g.Add().Field(m => m.SelectedItems)
                      .Label("Pick Items")
                      .Editor(e => e.MultiSelect()
                          .BindTo(Model.AvailableItems)
                          .Placeholder("Select…")
                      );
             });
    })
)

Form

MultiSelect

answered on 16 May 2025

1 answer

90 views

when i click my dropdown list(Multiselect)it is not opening in my application. Please note the same is working fine in trial version(2022.1.119.545) but stop working when i moved to licensed version

when i click my dropdown list(Multiselect)it is not opening in my application. Please note the same is working fine in trial version(2022.1.119.545) but stop working when i moved to licensed version(2022.2.510.545)

DropDownList

MultiSelect

answered on 11 Jul 2024

1 answer

76 views

Regarding kendoMVC multiSelect and Schedular

when i double click on an boxes on scheduler on the same page duplicate of kendo multiselects gets created right bellow the original one.

i am using the custom template for kendo template editable functionality to create an appointment .

inside CustomeditorTemplate there is another PO template is used to select multiple POS using multiselect

Code of index file :

------------------------------------------------------------------------------------------------------------------------------------------------

<div class="row" style="margin-bottom: 1%;">

<div class="col-5 ">
<div class="row " style=" float: left; padding: inherit;">
<div class="col-4 p-2" style="padding-left:0px"><a class="k-button k-button-icontext" style="background-color: #42B0C1; color: white; width: auto; " id="ViewAppt" href="/AMS/ConfrimedDeliveries">PO - Appointment List</a></div>

@if (IsInternalUser == true)
{

<div class="col-4 p-2"> <a class="k-button k-button-icontext" style="background-color: #ECB92B; color: white; " id="LoadingDocksScreen" href="/AMS_LoadingDock/Index"><span class="k-icon k-i-building-blocks"></span>Loading Docks</a></div>

<div class="col-4 p-2" style=" "> <a class="k-button k-button-icontext" style="background-color: #2B58EC; color: white; " id="dc24button" href="#">Loading Docks Screen</a></div>
}
</div>
</div>

@*<div class="col-2">
@(Html.Kendo().DropDownListFor(m=>m)
.Name("locations")
//.OptionLabel("All")
.OptionLabel("Select Plant")
.DataTextField("LocationName")
.DataValueField("LocationCode")
.Value(strLocationCode)
//.AutoBind(false)
.Events(e => e.Select("locationsChange"))
//.HtmlAttributes(new { style = "width: 150px;" })
.DataSource(ds =>
{
ds.Read("GetLocations", "AMS_LoadingDock");
})
.Deferred()
)
</div>*@
@*@(Html.Kendo().MultiSelect()
.Name("locations")
.Placeholder("Please select Plant")
.AutoClose(true)
.AutoWidth(true)
.TagMode(TagMode.Single)
//.do(true)
//.NoDataTemplateId("noDataTemplate")
.DataTextField("LocationName")
.Value(strLocationCode)
.Events(events => events.Change("locationsChange"))
.HtmlAttributes(new { style = "padding-right: 1%; width:13%;" })
.DataValueField("LocationCode")
.Filter("contains")
.DataSource(ds =>
{
ds.Read("GetLocations", "AMS_LoadingDock");
})
.Deferred())*@

<div class="col-7">

<div class="row" style=" padding: inherit;">

@(Html.Kendo().DropDownListFor(m=>m)
.Name("locations")
//.OptionLabel("All")
.OptionLabel("Select Plant")
.DataTextField("LocationName")
.DataValueField("LocationCode")
.Value(strLocationCode)
//.AutoBind(false)
.Events(e => e.Select("locationsChange"))
.HtmlAttributes(new { @class = "float-right p-2 col-3" })
.DataSource(ds =>
{
ds.Read("GetLocations", "AMS_LoadingDock");
})
.Deferred()
)
@(Html.Kendo().MultiSelectFor(m=>m)
.Name("Docks")
.Placeholder("Select Dock")
//.OptionLabel("All")
// .OptionLabel("Select Docks")
.TagMode(TagMode.Single)

.DataTextField("dockname")
.DataValueField("dockid")
.Enable(false)
//.AutoBind(false)
.Events(e => e.Change("DockChange"))

// .Events(e => e.Select("locationsChange"))
//.HtmlAttributes(new { style = "width: 150px;" })
//.DataSource(ds =>
//{
// ds.Read("GetLocations", "AMS_LoadingDock");
//})
.HtmlAttributes(new { @class = "float-right p-2 col-3" })
//.Filter("contains")
// .Events(e => e.Select("locationsChange"))

.DataSource(source =>
{

source.Read(read =>
{
read.Action("LoadingDocks_Read1", "AMS_LoadingDock")
.Data("filterDocks");
})
.ServerFiltering(false);
})
//.CascadeFrom("locations")
.Deferred())
@if (IsInternalUser == true)
{

@(Html.Kendo().MultiSelectFor(m=>m)
.Name("Suppliers")
.Placeholder("Select Supplier")
//.OptionLabel("All")
//.OptionLabel("Select Vendor")
.DataTextField("VendorNo")
.DataValueField("VendorNo")
.Enable(false)
.TagMode(TagMode.Single)
.Events(e => e.Change("SupplierChange"))
// .Events(e => e.Select("locationsChange"))
// .Events(e => e.Open("locationsChange"))

// .Value(strLocationCode)
//.AutoBind(false)
//.Events(e => e.Select("locationsChange"))
//.HtmlAttributes(new { style = "width: 150px;" })
//.DataSource(ds =>
//{
// ds.Read("GetLocations", "AMS_LoadingDock");
//})
.HtmlAttributes(new { style = "", @class = "float-right p-2 col-3" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("ReadSuppliers", "AMSAppointments")
.Data("filterSuppliers");
})
.ServerFiltering(false);
})
//.CascadeFrom("locations")
.Deferred()
)
}

@if (IsInternalUser == true)
{
<div class="p-2 col-2">
<a class="k-button showConfigurations " style="background-color: white; color: grey; float: inline-end; " id="showConfigurations" href="#"><i class="bi bi-gear-fill"></i></a>  
<button class="k-button k-button-icontext " id="BlockTimeForDock" data-toggle="modal" data-target="#exampleModal" style="background-color: #E99414; color: white;" disabled>Block </button>
</div>

}

</div>

</div>

@*@if (canBookAppt == true)
{
<button class="k-button k-button-icontext"
style="background-color:#42B0C1; color: white;"
id="ExpectedDeliveryQueueBtn">
<i class="bi bi-calendar3"></i>Go to Expected Delivery Queue
</button>
}*@

</div>

<div id="schedulerContainer">
@(Html.Kendo().Scheduler<Fellowship.Models.Appointmentmodel>()
.Name("scheduler")
.Date(DateTime.UtcNow)
.Toolbar(x=>x.Pdf())

//.WorkDayStart(startTM, 00, 00)
//.WorkDayEnd(endTM, 00, 00)
.MinorTickCount(1)

.Views(views =>
{
views.DayView();
views.MonthView(month =>
{
month.Selected(true);
month.EventsPerDay(8);
month.EventHeight("auto");
month.AdaptiveSlotHeight(true);
month.EventSpacing(5);
});
})
.Messages(m => m.RecurrenceEditor(e => e.RecurrenceEditorTitle("View")))
.Messages(m => m.Editor(e => e.EditorTitle("Book Appointment")))

.DateHeaderTemplate("<strong>#=kendo.toString(date, 'dd<br> dddd')# </strong>")

.Height(650)
.AllDaySlot(false)
.AutoBind(false)
.EventTemplate("#if(!IsBlocked){# #if('" + IsInternalUser + "'=='True') {#<div class='background-lighter' style='background-color :#= Ldockcolorcode#;'></div><div style='height: #= BlurPercentage#% ;background-color :#= Ldockcolorcode#;'> #= VendorNo#  #= PODisplayInfo# </div>#} else{# <div> Location: #= locationCode#</div> #}# #}else{# <div class='background-lighter' style='background-color : grey;'></div>#}#")
//.EventTemplate("#if('" + IsInternalUser + "'=='True') {#<div style='font-weight: 600'> PO- #= POHeader#</div><div> Supplier- #= VendorNo# </div><div> Pallet- #= TotalNoOfPallets#</div>#} else{# <div style='font-weight: 600'> PO- #= POHeader#</div><div> Location- #= locationCode#</div><div> Pallet- #= TotalNoOfPallets#</div> #}#")
//.EventTemplate("<div style='font-weight: 600'>PO- #= POHeader#</div><div>  Line- #= lineno#</div></p>")
.Editable(editable =>
{
editable.TemplateName("_CustomEditorTemplate").Window(w => w.Width(1100));

// if(canBookAppt == false)
// {
//editable.Create(false);
// }
})
.Views(views =>
{
views.DayView();
//views.WorkWeekView(workWeekView => workWeekView.Selected(true));
views.WeekView(weekView => weekView.Selected(true)).SelectedDateFormat("{1:Y}");
views.TimelineView();
//views.CustomView("CustomDayView", view => view.Title("Day"));
//views.CustomView("CustomWeekView", view => view.Title("Week").Selected(true));
//views.TimelineView();
})

.DataSource(d => d
.Model(m =>
{
m.Id(f => f.TaskID);
m.Field(f => f.Title);
//m.Field(f => f.Duration);
m.Field(f => f.POHeader);
// m.Field(f => f.POs);
m.Field(f => f.LoadingDocks);
m.Field(f => f.appointmentType);
})
.Read("Read", "AMSAppointments")
.Create(c=>c.Action("Appointment_Create", "AMSAppointments"))
.Destroy("Appointment_Delete", "AMSAppointments")
.Update("Appointment_Update", "AMSAppointments")
.Events(e =>
{
e.RequestEnd("scheduler_RequestEnd");
e.RequestStart("scheduler_RequestStart");
})
)
.Events(e =>
{
e.DataBound("scheduler_dataBound");
e.Edit("scheduler_edit");
e.Save("scheduler_Save");
//e.Cancel("scheduler_Cancel");
////e.Navigate("scheduler_Change");
//e.DataBinding("scheduler_DataBinding");
//e.Change("scheduler_Change");
//e.Add("scheduler_add");

})
.Mobile(MobileMode.Auto)
.Deferred()

)
@(Html.Kendo().Tooltip()
.For("#scheduler")
.Filter(".k-event:not(.k-event-drag-hint) > div, .k-task")
.Position(TooltipPosition.Top)
.Width(140)
//.ContentTemplateId("template")
.LoadContentFrom("scheduler_Tooltip", "AMSAppointments")
.Events(events => events.RequestStart("tooltip_requestStart"))
.Deferred()
)

@*<a href="\#" class="editeventt" data-uid= #=uid# data-taskid= #=model.Title#> Supplier: #= model.VendorNo#</a>*@

@*<script id="template" type="text/x-kendo-template">
#var element = target.is(".k-task") ? target : target.parent();#
#var uid = element.attr("data-uid");#
#var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#
#var model = scheduler.occurrenceByUid(uid);#

#if(model) {#
PO- #=model.POHeader#
<br> #=kendo.format('{0:t}',model.start)# to #=kendo.format('{0:t}',model.end)#

#} else {#
<strong>No event data is available</strong>
#}#
</script>*@
</div>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

CustomEditorTemplate :

<div id="appointmentDiv" class="container">

<div class="form-group row" style="display: none;">
<label class="control-label col-md-4"> Standing Appointment</label>
<div class="col-md-8">
@(Html.CheckBoxFor(model => model.isStandingApmnt))
</div>
</div>

<div class="form-group row">
<div class="col-md-4">
@*@(Html.LabelFor(model => model.Title))*@
<label>Title</label>
</div>
<div class="col-md-8" data-container-for="Title">
@(Html.TextBoxFor(model => model.Title, new { @class = "appointmentTitle k-textbox", data_bind = "value:title", @style="width:100%;" , required = "required" }))

</div>
</div>

<div class="form-group row d-none " id="titlecombobox">
<label class="control-label col-md-4">Vendor</label>
<div class="col-md-8" data-container-for="VendorNo">
@(Html.TextBoxFor(model => model.VendorNo, new { @class = "", @style = "width:100%;" , @readonly = "readonly" }))
</div>
</div>

<div class="form-group row " id="vendornamebox">
<label class="control-label col-md-4">Vendor</label>
<div class="col-md-8" data-container-for="VendorName">
@(Html.TextBoxFor(model => model.VendorName, new { @class = "k-textbox", data_bind = "value:VendorName", @style = "width:100%;", @readonly = "readonly" }))
</div>
</div>

<div class="tab-content">
<div id="inComing" class=" form-group row tab-pane active">
<div class="k-edit-field pofield">
<div id="POsdropdowns"></div>
</div>
</div>

</div>

<div class="form-group row">
@*@(Html.LabelFor(model => model.Start, "Start Date and Time", htmlAttributes: new { @class = "control-label col-md-4" }))*@
<label class="control-label col-md-4">Start Date and Time</label>
<div class="col-md-8" data-container-for="start">
@(Html.Kendo().DateTimePickerFor(model => model.Start)
.Name("startDateTime")
.HtmlAttributes(new { data_bind = "value:start,invisible:isAllDay", @class = "appointmentDate", required = "required", onkeydown = "return false;" })
//.HtmlAttributes(new { data_bind = "value:start,invisible:isAllDay", @style = "z-index: inherit; width: 100%;", required = "required", onkeydown="return false;" })
//.HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay"))

.Events(e =>
{
e.Change("StartChange");
}).Deferred()
)
@*@(Html.Kendo().DatePickerFor(model => model.Start)
.Name("startDate")
//.HtmlAttributes(generateDatePickerAttributes("startDate", "start", "value:start,visible:isAllDay"))
.Deferred())*@

<span data-bind="text: startTimezone"></span>
@*<span data-for="start" class="k-invalid-msg"></span>*@
</div>
</div>
@*</div>*@

<div class="form-group row" style="display:none">
@(Html.LabelFor(model => model.Duration, "Duration (Minutes)", htmlAttributes: new { @class = "control-label col-md-4" }))

<div class="col-md-8" data-container-for="recurrenceRule">
@(Html.Kendo().DropDownListFor(model => model.Duration)
.DataTextField("Text")
.DataValueField("Value")
.OptionLabel("Select...")
//.HtmlAttributes(new { @style = "width:100%;"})
.HtmlAttributes(new { style = "width:100%", required = "required" })
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "5",
Value = "5"
},
new SelectListItem() {
Text = "10",
Value = "10"
},
new SelectListItem() {
Text = "15",
Value = "15"
},
new SelectListItem() {
Text = "20",
Value = "20"
},
new SelectListItem() {
Text = "25",
Value = "25"
},
new SelectListItem() {
Text = "30",
Value = "30"
},
// new SelectListItem() {
// Text = "35",
// Value = "35"
//},
new SelectListItem() {
Text = "40",
Value = "40"
},
new SelectListItem() {
Text = "45",
Value = "45"
},
new SelectListItem() {
Text = "50",
Value = "50"
},
new SelectListItem() {
Text = "55",
Value = "55"
},
new SelectListItem() {
Text = "60",
Value = "60"
},
//new SelectListItem() {
// Text = "90",
// Value = "90"
//},
//new SelectListItem() {
// Text = "120",
// Value = "120"
//}
})
.Value(Convert.ToString(Model.Duration))
.Deferred()
)

</div>
</div>

<div class="form-group row">
@(Html.LabelFor(model => model.LoadingDocks,"Dock Number", htmlAttributes: new { @class = "control-label col-md-4" }))

<div class="col-md-8" data-container-for="LoadingDocks">
@(Html.Kendo().DropDownListFor(model => model.LoadingDocks)
.DataTextField("dockname")
.DataValueField("dockid")
.OptionLabel("Select...")
//.BindTo((System.Collections.IEnumerable)ViewData["LoadingDocks"])
.DataSource(source =>
{
source.Read(read =>
{
read.Action("RemoteDataSource_GetLoadingDocks", "AMSAppointments");
});
})
.Events(e => { e.Open("OnLDOpen"); })
.Template("<span style=\"background-color:\\#: data.dockcolorcode2 \\#;width:10px;height:10px;display:inline-block;border:1px solid \\#: data.dockcolorcode \\#; \"></span><span class=\"\\#: data.dockclass \\#\" > \\#: data.dockname \\#</span>")
//.HtmlAttributes(new { @style = "width:100%;" })
.HtmlAttributes(new { @style = "width:100%;", })
.Deferred()
)
</div>
</div>

<div class="form-group row hideFgfCarrrer">
<div class="col-md-4">
@*@(Html.LabelFor(model => model.Title))*@
<label>FGF Career</label>
</div>
<div class="col-md-8" data-container-for="Title">
@(Html.TextBoxFor(model => model.Fgfcareer, new { @class = "k-textbox", data_bind = "value:title", @style="width:100%;" , required = "required" }))

</div>
</div>
<div class="form-group row totalpallets firstElement">
@(Html.LabelFor(model => model.TotalNoOfPallets, "Total Pallets", htmlAttributes: new { @class = "control-label col-md-4" }))
<div class="col-md-8" data-container-for="recurrenceRule">
@(Html.Kendo().TextBoxFor(model => model.TotalNoOfPallets)
.HtmlAttributes(new { data_bind = "value:TotalNoOfPallets", @class = "", @style = "width:100%;", id = "TotalNoOfPallets", @readonly = "readonly" })
.Deferred())
@*<input type="text" id="TotalNoOfPallets1" class="" style="width:100%;" data-bind="value: TotalNoOfPallets" />*@

</div>
</div>

<div class="form-group row reccontainer d-none">
@*@(Html.LabelFor(model => model.RecurrenceRule, htmlAttributes: new { @class = "control-label col-md-4" }))*@
<label class="control-label col-md-4">Frequency</label>
<div class="col-md-8" data-container-for="recurrenceRule">
@(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
.HtmlAttributes(new { data_bind = "value:recurrenceRule", @style = "width:100%;" })
.Frequency(frequency => frequency
.Add(RecurrenceEditorFrequency.Never)
.Add(RecurrenceEditorFrequency.Daily)
.Add(RecurrenceEditorFrequency.Weekly)
)
.Deferred()
)
</div>
</div>
</div>

----------------------------------------------------------------------------------------------------------------------------------------------------------------

PO Template:

<div class="form-group row" id="POcombobox">

<label class="control-label col-md-4">PO Number</label>

<div class="col-md-8" data-container-for="PO">
@(Html.Kendo().MultiSelectFor(m=>m)
.Name("selectPoDisplayInfo")
.DataTextField("poDisplayInfo")
.DataValueField("poDisplayInfo")
.Placeholder("Select PO...")
.AutoBind(false)
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.ServerPaging(true)
.PageSize(80)
.Type("aspnetmvc-ajax").ServerFiltering(true)
.Transport(transport =>
{
transport.Read(r => r.Action("PoDisplayInfo_Read", "AMSAppointments").Data("getTaskId"));
})
.Schema(schema =>
{
schema.Data("Data")
.Total("Total");
});
})
.Filter(FilterType.Contains)

.Virtual(v => v.ItemHeight(34).ValueMapper("selectPoDisplayInfo_ValueMapper"))
.Events(e =>
e.Change("addSelectPoDisplayInfoFilter")

)
.HtmlAttributes(new { @class = "mb-2"})
.Deferred()
)

</div>
</div>
<div id="gridArea" data-container-for="PO">
@(Html.Kendo().Grid<Fellowship.Models.PODetailsMainModel>
()
.Name("POGrid")
.Events(e => e.DataBound("POList_dataBound"))
.Events(e =>
{
e.Change("onPOChange")
.DataBound("onPODatabound");
//e.Filter("onFilter");
})
.AutoBind(true)
.HtmlAttributes(new { @class = "invPOGrid" })
.Columns(columns =>
{
columns.Bound(c => c.aprelid).Hidden(true).HtmlAttributes(new { @class = "aprelidVal" });
columns.Bound(c => c.Line_UID).Hidden(true).HtmlAttributes(new { @class = "lineUIDVal" });
columns.Bound(c => c.Buy_from_Vendor_No_).Hidden(true).HtmlAttributes(new { @class = "vendorNameval" });
columns.Bound(c => c.PO_Number).Hidden(true).HtmlAttributes(new { @class = "POval" });
columns.Bound(e => e.poDisplayInfo).Title("PO Number").MinResizableWidth(310).Width(310).Filterable(ftb => ftb.Multi(true).Search(true)).HtmlAttributes(new { @class = "podisplayinfo" });
columns.Bound(c => c.line_no_).Title("Line").Filterable(false).Width(65).HtmlAttributes(new { @class = "line_no_" });
columns.Bound(c => c.Item).Hidden(true).HtmlAttributes(new { @class = "Item" });
//columns.Bound(c => c.noofpallets).Title("Pallets").Width(90).Filterable(false).HtmlAttributes(new { @class = "pallets" })
// //.ClientTemplate("<input class='pallet-number form-control w-100' min='1' type='number' value='#:noofpallets#' />");
// .ClientTemplate("<input id='txtPallets' class='pallet-number form-control w-100' min='1' type='number' value='#:noofpallets#'/>");
columns.Bound(c => c.noofpallets).Title("Pallets").Width(90).Filterable(false).HtmlAttributes(new { @class = "pallets" })
.ClientTemplate("#=palletsTemplate(data)#");
// .ClientTemplate("<input id='txtPallets' class='pallet-number form-control w-100' min='1' type='number' value='#:noofpallets#'/>");

//columns.Bound(c => c.deliverydate).Title("Date").Width(90).Filterable(false).HtmlAttributes(new { @class = "PODate" })
// .ClientTemplate("#= deliverydate == null ? '' : kendo.toString(kendo.parseDate(deliverydate), 'MM/dd/yyyy') #");
columns.Bound(c => c.deliverydate).Title("Date").Width(90).Filterable(false).HtmlAttributes(new { @class = "PODate" })
.ClientTemplate("#=deliverDateTemplate(data)#");
//.ClientTemplate("#= deliverydate == null ? '' : kendo.toString(kendo.parseDate(deliverydate), 'MM/dd/yyyy') #");

//columns.Bound(c => c.proposedTime).Title("Time").Width(80).Filterable(false).HtmlAttributes(new { @class = "POTime" })
// .ClientTemplate("#if (data.proposedTime) {# #:kendo.toString(proposedTime.Hours, '00')#:#:kendo.toString(proposedTime.Minutes, '00')# #}#");
columns.Bound(c => c.proposedTime).Title("Time").Width(80).Filterable(false).HtmlAttributes(new { @class = "POTime" })
.ClientTemplate("#=proposedTimeTemplate(data)#");
//.ClientTemplate("#if (data.proposedTime) {# #:kendo.toString(proposedTime.Hours, '00')#:#:kendo.toString(proposedTime.Minutes, '00')# #}#");
//.ClientTemplate("#= kendo.toString(new Date(0, 0, 00,proposedTime.substring(0,2),proposedTime.substring(2,4)), 'hh:mm tt' ) #");
//columns.Bound(c => c.apporush).Title("IsRush").Filterable(false)
// .HeaderTemplate("<label for='isRushHeader'>Rush</label><input name='isRushHeader' class='isRushHeader' type='checkbox' style='margin-left:0.5em;'>")
// .ClientTemplate("<input " +
// " name='isRush' " +
// " id='isRush' class='isRushs' " +
// " type='checkbox' " +
// " #=apporush ? checked='checked' :'' # />"
//).Width(80).Hidden();
})
.Resizable(resize => resize.Columns(true))
.Scrollable(scroll => scroll.Endless(true))
.HtmlAttributes(new { style = "height: 30%" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(50)
.Model(model =>
{
model.Id(p => p.Line_UID);
//model.Field(p => p.poid);
model.Field(f => f.line_no_).Editable(false);
model.Field(f => f.Buy_from_Vendor_Name).Editable(false);
model.Field(f => f.noofpallets).Editable(false);
model.Field(f => f.deliverydate).Editable(false);
})
.Events(e => e.RequestEnd("SetTotalPallets").Change("onChanged"))
.Read(read => read.Action("Virtualization_ReadPO", "AMSAppointments").Data("getUpdateFlag"))
)
.NoRecords("No Records found.")
.AutoBind(false)
.Deferred()
)
</div>

------------------------------------------------------------------------------------------------------------------------

Before doubleClick

After doubleclicking the block duplicate kendomultislect is created

MultiSelect

Scheduler

answered on 05 Jun 2024

1 answer

109 views

Sort MultiSelectFor data

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);
 }

MultiSelect

Sortable

answered on 13 Nov 2023

0 answers

91 views

Changing DataGrid Selection Checkbox Image

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

Grid

MultiSelect

Styling

asked on 02 Nov 2023

1 answer

135 views

make drop-down lists smaller

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

DropDownList

MultiSelect

updated answer on 04 Oct 2023

0 answers

330 views

Kendo Grid column as a multiselect dropdown widget (.net mvc, jQuery)

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);
                    }
                }
            ]
        });

And in another script tag i am preparing the multiselct widget

<script id="industryTemplate" type="text/x-kendo-template">
    @(Html.Kendo().MultiSelect()
        .Name("Industry")
        .DataValueField("Value")
        .DataTextField("Text")
        .BindTo((IEnumerable<SelectListItem>)ViewData["IndustryList"])
    )
</script>

My output on screen for Industry column always remains like :

DropDownList

Grid

MultiSelect

asked on 22 Aug 2023

1 answer

112 views

MVC Grid filter not working on mutiselect editor column

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

Filter

Grid

MultiSelect

answered on 24 Oct 2022

1 answer

112 views

Is Keyboard Navigation possible for MultiSelect Header Templates?

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")
                              ...
                    )

described 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>

MultiSelect

answered on 23 Aug 2022

1 answer

1.9K+ views

Multi-Select with check boxes

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?

MultiSelect

answered on 20 May 2022