I have a simple multiselect like so:

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.

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

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

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> &nbsp;
                        <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#;'>&nbsp;#= VendorNo# &nbsp;#= PODisplayInfo# </div>#} else{# <div>&nbsp;Location: #= locationCode#</div> #}# #}else{# <div class='background-lighter' style='background-color : grey;'></div>#}#")
                //.EventTemplate("#if('" + IsInternalUser  + "'=='True') {#<div style='font-weight: 600'>&nbsp;PO- #= POHeader#</div><div>&nbsp;Supplier- #= VendorNo# </div><div>&nbsp;Pallet- #= TotalNoOfPallets#</div>#} else{# <div style='font-weight: 600'>&nbsp;PO- #= POHeader#</div><div>&nbsp;Location- #= locationCode#</div><div>&nbsp;Pallet- #= TotalNoOfPallets#</div> #}#")
                //.EventTemplate("<div style='font-weight: 600'>PO- #= POHeader#</div><div>&nbsp;&nbsp;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()
            )
        <!--<script id="template" type="text/x-kendo-template">
                    <div class="template-wrapper text-left">

                            #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) {#
                    <div>Supplier:  #= model.VendorNo#-->
        @*<a href="\#" class="editeventt" data-uid= #=uid# data-taskid= #=model.Title#> Supplier:  #= model.VendorNo#</a>*@
        <!--</div>
            <div>
                PO- #=model.POHeader#
            </div>
            <div>
                No. of pallets:  #=model.TotalNoOfPallets#
            </div>

            #} else {#
                <strong>No event data is available</strong>
            #}#
             </div>
        </script>-->
        @*<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  

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>