We're using the MultiColumnComboBoxFor with a large amount of data, and therefore implemented virtualization as is described here: https://demos.telerik.com/aspnet-mvc/multicolumncombobox/virtualization

We ran into multiple problems with this:

1. The line data: convertValues(options.value) did not work for us; the server method never received any values.
   We had to use data: { values: options.value }.
2. Empty values were not displayed correctly in the dropdown:
   
   We changed the following style to display these correctly:
   .k-grid-list.k-virtual-list > .k-item > .k-cell, .k-grid-list.k-virtual-list > .k-item > .k-group, .k-grid-list.k-virtual-list > .k-item > .k-spacer-group {   
   display: table-cell;
   }

Are there any drawbacks to our solution?

Hi,

I need sample code for  implementing select all /deselect all with combo box in kendo mvc grid

thanks in advance

@model IEnumerable<Emplopyee>

@(
                Html.Kendo().MultiSelectFor(m => m)
                    .DataTextField("Name")
                    .DataValueField("Id")

                    .HtmlAttributes(new { @style = "height:auto; overflow-x:auto ;" })
                    .Filter(FilterType.Contains.ToString())
                    .BindTo((IEnumerable<Employee>)ViewData["Employees"])


)

How do you get the pressed button in a button group from a function .

Thanks in advance,

I upgraded my MVC components yesterday and I'm having this issue.

I've attached some before and after pictures. What changes do I need to make to get it looking like the before image?

I'm only using:

.Filterable(filterable => filterable.Mode(GridFilterMode.Row))

Hi, we use a kendo grid with a popup editor.

@(Html.Kendo().Grid<OrderViewModel>()
            .Name("orderGrid")
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("OrderDialog"))
            .ToolBar(x => x.Create().Text("Add Order"))
            .Columns(columns =>
            {
                columns.Bound(column => column.OrderID);
                columns.Bound(column => column.Name);
                columns.Command(column =>
                {
                    column.Edit();
                    column.Destroy();
                }).Width(230);
            })
            .Events(x => x.Edit("onGridEdit"))
            .DataSource(ds => ds.Ajax()
                .Read(r => r.Url("/Orders/Index?handler=ReadOrder"))
                .Update(u => u.Url("/Orders/Index?handler=UpdateOrder"))
                .Create(c => c.Url("/Orders/Index?handler=CreateOrder"))
                .Destroy(d => d.Url("/Orders/Index?handler=DestroyOrder"))
                .Model(m =>
                {
                    m.Id(id => id.OrderID);
                })
                .PageSize(10)
            )
            .Pageable()
        )

The OrderDialog looks something like this

@model Models.OrderViewModel

<div class="k-edit-label">
    @Html.LabelFor(m => m.Name)
</div>
<div class="k-edit-field">
    @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
</div>

...

We would like to be able to hide some fields in the editor if the entity being edited is new (which can be determined by the OrderID). This can be achieved by using the edit event of the grid, but we would rather like to do it based on a model property, like this:

@model Models.OrderViewModel

@if(Model.OrderID == 0)

{

<div class="k-edit-label">
    @Html.LabelFor(m => m.Name)
</div>
<div class="k-edit-field">
    @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
</div>

}

Is this possible? When debugging, it seems the editor is initialized with a null model, so that the line above crashes.

Hi guys, im trying to read network path saved in the database to read an image.

i have the path saved as \\TP-amk-camp02\somefolder\somefolder\2022-01-21 \ Data\ in the database. How can i read the network path to display it on the grid?

see below html markup

  columns.Bound(c => c.ThumnailPath).Title("Thumbnailscan").Width(249).Encoded(false).ClientTemplate(
                        "<div style='text-align:left;'>#=FolderGUID ? FolderGUID : '' #  </div> " +
                            "<div id='ExampleBox_#=FolderGUID ? FolderGUID : -1#' data='#=FolderGUID#' class='Example_Box'>" +
                                "<img  class='Example_Image' id='ExampleImage_#=FolderGUID#' src=' " + Url.Content("#:data.ThumnailPath#") + "thumbnails.jpg'/> " +

kind regards

Tony

Hi, 

?EGood Day,

I am new to kendo ui and we are having an issue due to the upgrade of Jquery (1.x.x->3.6.0). The issue is "Syntax error, unrecognized expression: .field-validation-valid[data-valmsg-for=], .field-validation-error[data-valmsg-for=]" once the validation on the screen fires. Correct me if I am wrong, kendo ui should not be dependent on any Jquery versions. We are also checking if we need to change the validation process instead of using the said kendo validator. We are still hoping that there is still a way to fix this issue.
Below is the kendo version we are currently using.

Kendo Version: 2012.3.1114.340
Platform: ASP.NET MVC

Found the cause _findMessageContainer it is on the kendo.web.js, will just comment this to fix the issue

Today I upgraded one of our web apps to the latest version of UI for ASP.NET MVC and since then the DropDownList component doesn't appear to be rendering/styled correctly. I recreated the theme using the Progress Sass Theme Builder tool to eliminate the stylesheet itself as the issue. I've included screenshots below of what the DropDownList component looks like before and after the upgrade. Can anyone advise? Thanks in advance.

Before upgrade:-

After upgrade:-

Implementation:-

@(Html.Kendo().DropDownListFor(model => model.AssetSubTypeId)
                      .OptionLabel("Asset Type/Subtype...")
                      .BindTo(new SelectList(Lookups.AssetTypeSubType, "Key", "Value"))
                      .Events(events =>
                      {
                          events.Change("onChange_AssetSubTypeDropDownList");
                      }))

I'm having an issue getting the selected item from the passed event, mostly because the demo uses "e.dataitem"

like this:

function onSelect(e) {
        if ("kendoConsole" in window) {
            var dataItem = e.dataItem;
            kendoConsole.log("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");
        }
    }

@(Html.Kendo().MultiSelect()
                              .Name("JobIds")
                              .HtmlAttributes(new { style = "Width:700px; height:60px; overflow-y:scroll;", aria_label = "editor" })
                              .DataTextField("job_name")
                              .DataValueField("job_id")
                              .HeaderTemplate("<div class=\"dropdown-header\">" +
                                        "<span style=\"width=350px\">Job Name</span>" +
                                        "<span style=\"width=350px\">Parent Name</span>" +
                                        "</div>\n <table>")
                              .ItemTemplate("<span class = \"namespan\">#: data.job_name #</span> <span class=\"parentspan\">#: data.job_parent #</span >")
                              .DataSource(source =>
                                {
                                    source.Read(read =>
                                    {
                                        read.Action("JobSearch", "SupportEditor");
                                    })
                                    .ServerFiltering(true);
                                })
                              .Events(e =>
                              {
                                  e.Select("Job_onSelect")
                                  })


function Job_onSelect (e) {
        var dataItem = e.dataItem;
        console.log("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");
    }

event :: select (undefined : undefined)

function Job_onSelect(e) {
console.log($("#JobIds").data("kendoMultiSelect").value().toString());
}

Hi there! In the code below when i reach $("#bans-grid").kendoGrid() function i get the type of error i've mentioned in the title. I don't understand why. Any help will be appreciated!

 $("#saveButton").kendoButton({
              click: function() {

                  var channelsData = $("#bans-grid").data().kendoGrid.dataSource.view();
                  var channelsDataJson = JSON.stringify(channelsData);

                      $("#bans-grid").kendoGrid({
                          dataSource: {
                                 transport: {
                                     update: {
                                         data: channelsDataJson,
                                         url: "/bg/NotosPrime/Bans/BanChannels",
                                         type: "PUT"
                                       }
                                     },
                                     schema: {
                                         model: {
                                             id: "Id"
                                         }
                                     }
                                }
                             });
                             $("#bans-grid").dataSource.sync();
                }
            });