Hello there,
i have a project with MVC Asp.Net, Kendo v. "2024.4.1112.462" and would like to
- load data into grid, the data is returned by MVC Controller
- the spinner with the "loading data in progress" should never appear
- so the user can "play" on the grid header filters while loading data is ongoing 
- when the user clicks on "apply" on grid header filter, the previous request must be canceled to run the new request with latest filters applied, in this way the c#  CancellationToken is Canceled on server side.

Can you tell me how to "cancel" the actual http request from the kendo grid (client) and execute the new one, as described in the last point?

thanks in advance

Good morning,
i am using MVC.ASP net in my project and i'm trying to send the DataSourceRequest to a service , via rabbitmq.

the message should contains all the request filters set in the ui in order to create an excel report. i have tried to use the System.Text.Json serialization but it's not working properly. it serializes only the first level props.
i have found a ".ToJson" extension  but it's returning a Dictionary<string, object>, not usefule here.

can you suggest how to serialize the DataSourceRequest in Json format? with all nested and recursive properties?

the filters can be about dates, strings, combobox, and so on

thanks in advance

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>