In my ASP.NET  MVC existing project we have used trail Telerik UI for ASP.NET  MVC version 2022.1.119.545 and after that we have upgraded to developer version 2022.2.510.545 we have facing issue with dropdown with multi select checkbox not working in developer version

Hello,
I am currently converting kendo external template to CSP template. Below is the code for the CSP template

Html.Kendo().Template().AddComponent(tabStrip => tabStrip.TabStrip()
        .Name("ed_${data.TabGuid}")
        .SelectedIndex(0)
        .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
        .HtmlAttributes(new { gridName = "Grid" + id)
        .Events(ev => ev.Activate("tabEvent"))
        .Items(items => items.Add().Text("TabName")
            .LoadContentFrom(Url.Action("ControllerName", "ActionName",
                    new
                    {
                        param= "${data.Property1}",  
                        param1= false,
                        param2= false,
                        param3= false
                    })))
    );

The current URL forming is considering ${data.Property1} as a string in the content URL formed in the kendo deferred script.
Is there any way that it could consider ${data.Property1} as a template literal inside contentUrl?

I need to control access, through the session credentials of my web application, to some pdf files that IIS has in order to only allow access to said resource if I am logged into the app.
I am researching to implement this with 'Forms Authentication' I don't know if this is the best option or maybe I should consider 'Basic Authentication' or JWT.

When a treeview is first rendered is displays an animation indicating data is being loaded. I ahve a treeview that initially doesn't contain data, and only shows data after a user has entered a search.

I can refresh the treeview using   $("#treeview").data("kendoTreeView").dataSource.read();  but no animation is shown. I would have thought it would have been logical to show an animation as default behaviour, matching the grid and other controls.

How can I enable the animation on this call please?

We recently uprevved to the 2024.2.514 version of kendo ui and there appears to be a defect with manually handling the export excel event from a grid. We need to be able to show a hidden column so it appears in the export, then hide it again.

Previously we were able to call e.preventDefault, show the column, and call e.sender.saveAsExcel() before hiding the column and it worked. Now when we do this the "exporting ..." overlay remains. If I use jquery to remove the overlay the export button does not work when clicked a second time.

Our example is in razor and actually functions better than this jquery example below which doesn't even save the file.

https://dojo.telerik.com/oMEpuDAY

In other words the following code from https://docs.telerik.com/kendo-ui/knowledge-base/grid-include-hidden-columns-in-excel-export doesn't work anymore.

var exportFlag = false;
$("#grid").data("kendoGrid").bind("excelExport", function (e) {
    if (!exportFlag) {
        e.sender.showColumn(1);
        e.preventDefault();
        exportFlag = true;
        setTimeout(function () {
            e.sender.saveAsExcel();
        });
    } else {
        e.sender.hideColumn(1);
        exportFlag = false;
    }
});

I am trying to add a new form to an existing ASP.NET MVC 5  application (.NET Framework). I have been unable to get the TimePicker control to return the value set in the UI. The control renders correctly and shows the values I would expect. But when I submit the form, the model's property value linked to the TimePicker is always all zeros or null. What am I doing wrong here?

Example code:

Model.cs

public class TestModel
{
  public TimeSpan Start { get; set; }
}

TestController.cs

public class TestController : Controller
{
  public ActionResult Index()
  {
    TestModel testModel = new TestModel();
    testModel.Start = new TimeSpan(7, 30, 0);
    return View("Schedule", testModel);
  }

  [HttpPost]
  public ActionResult Schedule (TestModel schedule)
  {
    // I intend to save 'schedule' value to database here.
    // but schedule.Start property is always [0, 0, 0]
    // If TestModel.Start is defined as TimeSpan?, then the property is always null
    ...
    return RedirectToAction(...);
  }
}

Schedule.cshtml

@model TestModel
@{
  Layout = "~/Views/Shared/_Layout.cshtml"
}

@using (Html.BeginForm("Schedule", "TestController", FormMethod.Post))
{
    <div class="form-horizontal container-fluid" style="margin-left:15px;">

        <div class="row">
            @Html.Label("Start Time")
            @(Html.Kendo().TimePickerFor(m => m.Start).Name("Start").HtmlAttributes(new { @style = "width:100px;" }))
        </div>
        <div class="row">
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </div>
}

 

I have tried a variety of different MVC ways to instantiate the TimePicker:  TimePickerFor (as above) or just TimePicker, defining .Name() property or not, defining .Value(model.Start) or not, adding .Min & Max properties. The result in the Schedule controller is the same: no value assigned to any TimePicker control.

The other thing I tried was change the TestModel.Start property to DateTime. Doing that, the form submit is always short-circuited, apparently because of a model validation issue in the TImePicker control. Form focus always changes to the TimePicker control. I have not been able to view the actual validation error.

Hoping someone can identify the problem with my code. The TimePicker control seems ideal for the application I have in mind but if I can't get it working I'll have to do something else.

I am testing this code in VS 2022. The version of Kendo our application uses is older: v2022.1.301.

FYI, our application already uses a wide variety of Kendo controls including Grid, DateTimePicker, DropDownList and several others. We have not had trouble using those controls. But as far as I can tell, this is the first instance of TimePicker being added.

Thanks,
Jeff

Hi,

I have a kendo MVC grid in a page.in that page i have button. when i click button i want to open a kendowindow popup.

so here is my issue.

when i am clicking that button am saving grid values and  i am opening kendo window popup. so if i have a errors in grid then i dont want to open kendow window popup. how to achieve this.  below is my button click code.

 $("#btnAddProject").click(function (e) {
            var grid = $("#Grid").data("kendoGrid");
            grid.saveChanges();

            var myWindow = $("#AddProjectWindow");
            myWindow.data("kendoWindow").open();
            myWindow.data("kendoWindow").center();
        });

Please see the code i have and sorting is not working and If I server operation to false then data is not loading

 

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

                @(Html.Kendo().Grid<LifeLabs.FIT.Web.RequisitionFileViewModel>()
                                                                        .Name("problemQueue-no-followups-grid")
                                                                        .EnableCustomBinding(true)
                                                                        .Columns(columns =>
                                                                        {
                                                                            columns.Bound(c => c.OrderId).Hidden();
                                                                            columns.Bound(c => c.FormatedOrderCode).Title("Order Code").Width(85);
                                                                            columns.Bound(c => c.AccessionNumber).Title("Accession#").Width(85);
                                                                            columns.Bound(c => c.Physician).Title("Requester Name").Width(110).Sortable(true);
                                                                            columns.Bound(c => c.CreatedOn).ClientTemplate("#= moment(CreatedOn).add(moment().utcOffset(), 'minutes').format('YYYY/MM/DD HH:mm:ss') #").Width(110);
                                                                            columns.Bound(c => c.UpdatedOn).ClientTemplate("#= moment(UpdatedOn).add(moment().utcOffset(), 'minutes').format('YYYY/MM/DD HH:mm:ss') #").Title("Moved to Queue").Width(110);
                                                                            columns.Bound(c => c.Status)
                                                                            .ClientTemplate("#if(IsLocked){#<div>#=Status#</div>#}else{if(isLongTermFollowUp==1){#<div style='background-color:red'><a href='/Order/EditRequisition?id=+#=OrderId#&Queue=3'>#=Status#</a></div>#}    else{#<div><a href='/Order/EditRequisition?id=+#=OrderId#&Queue=3'>#=Status#</a></div>#}}#").Width(65);
                                                                            columns.Bound(c => c.IsLocked).Title("Locked").Width(50)
                                                                            .ClientTemplate("#if(IsLocked){#<div><i class='fa fa-check'></i></div>#}else{#<div></div>#}#");
                                                                            columns.Bound(c => c.UserNote).Title("Notes").Sortable(true).Width(200);
                                                                            //columns.Bound(c => c.isLongTermFollowUp).Title("Long Term F/U").Width(125)
                                                                            //.ClientTemplate("#if(isLongTermFollowUp){#<div><i class='fa fa-check'></i></div>#}else{#<div></div>#}#");
                                                                        })
                                                                        //.ClientRowTemplate("#if(isLongTermFollowUp==1) {#<tr style='background-color:red' data-uid='#= uid #'></tr>#}")
                                                                        .HtmlAttributes(new { style = "height: 430px;" })
                                                                        .Scrollable()
                                                                        .Sortable(sorting => sorting.Enabled(true))
                                                                        .Pageable(pageable => pageable
                                                                        .Refresh(true)
                                                                        .PageSizes(true)
                                                                        .ButtonCount(5))
                                                                        .DataSource(dataSource => dataSource
                                                                        .Ajax()
                                                                        .Read(read => read.Action("GetProblemQueueList", "ProblemQueue", new { type = "no" }))
                                                                        .ServerOperation(true)
                                                                        )
                )

I am using a kendo popup window as a form to edit items on a grid. If there are errors with defining the properties if should return to the window with error messages. This is Controller action. Currently if the modelstate is not valid it returns a view without and styling (just Html)> If I return View instead of Partial the page loads correctly but as a full page and not a window

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