Hello,

create/update posts an empty model to the controller.

It was working in a very old asp.net mvc project. I setup a new asp.net core project. I spent some hours to fix this, but no luck.

Reading the data source is ok and the data is shown in column 'valuestream'. At the moment for 'Agenda' two values are shown, editable with a mutiselect.

Controller:

public ActionResult ManagerQuestionnaireCreate([DataSourceRequest] DataSourceRequest request, QuestionnaireViewModel rs)
{ 

....

return Json(new[] { rs }.ToDataSourceResult(request, ModelState));
}

Model:

View:

I have a grid with custom editors and they are bound to the grid as such.

columns.Bound(x => x.Parent).EditorTemplateName("ParentEditor").ClientTemplate("#= Parent === undefined || Parent === null ? '' : parentTemplate(Parent)#");
columns.Bound(x => x.Child).EditorTemplateName("ChildEditor").ClientTemplate("#= Child === undefined || Child === null ? '' : childTemplate(Child)#");

The two editor templates look like this:

@model List<ParentViewModel>  
@(Html.Kendo()  
     .MultiSelectFor(m => m)  
     .DataTextField("Name")  
     .DataValueField("Id")  
     .Placeholder("Select one or more parents")  
     .AutoBind(true)  
     .TagMode(MultiSelectTagMode.Multiple)   
     .DataSource(source =>  
     {  
         source  
         .Read(read =>  
         {  
             read.Action("GetParent", "Lookup");  
         });  
     })  
     .Events(events => events.Change("onParentChange"))  
)  


@model List<ChildViewModel>
@(Html.Kendo()
      .MultiSelectFor(m => m)
      .DataTextField("Name")
      .DataValueField("Id")
      .Placeholder("Select one or more children")
      .AutoBind(true)
      .TagMode(MultiSelectTagMode.Multiple)
      .DataSource(source =>
      {
          source
          .Read(read =>
          {
              read.Action("GetChild", "Lookup").Data("getCurrentParents");
          })
          ;
      })
)

The UI is properly populating when the grid loads and looks like this:

Coumn Parent|Column Child
A           |A1
B           |B1, B2

When the user edits the row and removes item B from Column Parent, this code is invoked (which I got from Kendo UI Snippet | Kendo UI Dojo)

function onParentChange(e) {
    var selectedonParentChange = this.value();
    let dataItems = e.sender.dataItems();

	var multiSelect = $("#Child").data("kendoMultiSelect");
	var value = multiSelect.value();
	multiSelect.dataSource.filter(getFilterObj(dataItems));
	multiSelect.dataSource.filter({});  // Adding or removing has no effect
    multiSelect.refresh();
	multiSelect.value(value);
	console.log("Second value: " + multiSelect.value());
    var dataSource = multiSelect.dataSource;
    dataSource.read();
}

function getFilterObj(dataItems){
  let filtObj = {
    logic: "or",
    filters: [],
  };

  if(dataItems.length > 0){
    for (var i = 0; i < dataItems.length; i++) {
      filtObj.filters.push({
        field: "ParentId",
        operator: "eq",
        value: dataItems[i].Id
      });
    }
  } else {
    filtObj.filters.push({
        field: "ParentId",
        operator: "eq",
        value: ""
      });
  }

  return filtObj;
}

After the code runs, the UI looks like this:
Coumn Parent|Column Child
A           |A1

So far so good.  The problem is that when the user hits save this ends up on the Network in the form data:

Parent[0].Id: ParentIdA
Parent[0].Name: A
Child[0].Id: ChildId1
Child[0].Name: A1
Child[0].ParentId: ParentIdA
Child[1].Id: ChildId2
Child[1].Name: B1
Child[1].ParentId: ParentIdB
Child[2].Id: ChildId3
Child[2].Name: B2
Child[2].ParentId: ParentIdB

Hi, 

I have been trying to implement the multiSelect with no avail. 

I have been trying to implement the multiselect and although in the pop up is working, meaning I am able to see the possible values as well as I am able to select the values, when I press save. The model that is used to create the whole object contains null instead of the selected values.

When I check in the WebApp the payload the MultiSelect looks like this:

ActivitiesUuids[0].Disabled: false

ActivitiesUuids[0].Group:

ActivitiesUuids[0].Selected: false

ActivitiesUuids[0].Text: name of the activity (I have changed the name for security)

ActivitiesUuids[0].Value: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx (I have changed the Guid number into x, the value is actually a proper Guid)

My Models:

    public class CourseContentViewModel
    {public List<Guid>? RelatedCourseContensUuids { get; set; }  //contains a list of values that has been/should be chosen from the multiselec}

    public class CombinedCourseContentViewModel
    {public SelectList RelatedCourseContens { get; set; }  //contains a list of the values that multiSelect has to choose from}

Controller:

This is inside the Index and List methods.

           ICollection<CourseContentResponseDTO> responseDTOs = await _akdService.CourseContentsAllAsync();

           combinedCourseContentViewModel.RelatedCourseContentViewModel = new SelectList(responseDTOs, "Uuid", "Name");

Grid implementation:

@(Html.Kendo().Grid<WebApp.Models.CourseContentViewModel>().Name("grid")
    .Columns(columns =>
    {
        columns.Bound(n => n.Name).Filterable(false).Title("Username").Width(250);
        columns.Command(command => { command.Edit().Text("Edit"); command.Destroy().Text("Delete"); }).Width(200);
    })
    .ToolBar(toolBar =>
    {
        toolBar.Create().Text("Create");
    })
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("CourseContentCreateUpdate"))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(30)
    .Model(model =>
    {
        model.Id(p => p.Uuid);
    })
    .Read(read => read.Action("List", "CourseContent"))
    .Update("Update", "CourseContent")
    .Create(create => create.Action("Create", "CourseContent"))
    .Destroy(destroy => destroy.Action("Delete", "CourseContent"))
    )
    )

This is my pop-up template multiselect (other components likes comboBoxes are working fine):

            <label class="Headings">Related Course Content</label>
            <kendo-multiselect for="RelatedCourseContensUuids"
                               name="RelatedCourseContensUuids"
                               datatextfield="Text"
                               datavaluefield="Value"
                               placeholder="No items selected..."
                               bind-to="combinedCourseContentViewModel.RelatedCourseContentViewModel">
            </kendo-multiselect>

My implementation of comboBoxes is almost the same except difference in naming of the tag helpers.

Hope you can help! 

Juste

Hello,

I have this code on my index.cshtml:

@(Html.Kendo().MultiSelect()
    .Name("selectedmembers")
    .Placeholder("Please select the members on the job...")
    .DownArrow(true)
    .AutoClose(false)
    .DataTextField("MemberName")
    .DataValueField("MemberId")
    .Filter("contains")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetPeople", "Combo");
        });
    })
    )

And my GetPeople code looks like this:

public JsonResult GetPeople(string text)
{
    using (var db = new chilternModel())
    {
        var members = db.Members.Select(member => new Member()
        {
            MemberName = member.MemberName,
            MemberId = member.MemberId
        });

        return Json(members.ToList());
    }
}

When I run the code I get undefined as the text value.  The database is a mySql running locally.

I have checked the members variable and it has the appropriate information for a jsonResult to be returned, but the control seems to ignore the text field (and I assume the MemberId as well)

Thanks in advance.

Michael

I have a multiselect whose items cascade from the the selected value of a drop down list.

When the page is loaded, the drop down list selection defaults to the first item in the list, which results in two items in the multiselect and the multiselect popup height shows the two items.

If a different drop down list option is selected, there are 15 items in the multiselect but the popup height still shows two items at a time. The scroll buttons work, but I would like to increase the height so that more options are visible. I have tried setting the height of the multiselect, but it has no effect.

Is there a way to resize the popup height when the items in the multiselect changes or to specify a minimum height of say 4 lines?

Thank you

I want to use this demo:  https://demos.telerik.com/aspnet-core/multiselect and have a checkbox on left side of the list.
Upon selecting the tag I want to see the count of items selected instead of showing them as chips with names as selected.

I want to use this demo : https://demos.telerik.com/kendo-ui/dropdownlist/index and have a checkbox and show count for no of tags selected as in this demo: Kendo UI Snippet | Kendo UI Dojo (telerik.com).

I see a jquery approach but I want to implement a html tag helper approach in both cases for asp net core
I have attached a image that I have as UI

Hello,

How do I disable popup if no DropDownList/Multiselect contains no data or filtering does not find any items using html helpers:

    @(
        Html.Kendo().DropDownList()
                  .Name("Testi")
                  .DataTextField("Text")
                  .DataValueField("Value")
                  .BindTo(Source)
     )

If I instantate controls using jQuery I would get this done setting noDataTemplate to false:
$("#Testi").kendoDropDownList({ noDataTemplate: false, ..

On html helpers there is no option to set NoDataTemplate boolean value and setting string value empty or null does not work.

Mikko

After converting my project from .NET 4.7.2 to .NET 6.0 I am facing below JS error for Kendo UI multiselect

readyException.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'off')
    at init._editable (kendo.multiselect.js:537:40)
    at init.readonly (kendo.list.js:201:18)
    at new init (kendo.ts:796:30)
    at HTMLSelectElement.eval (kendo.core.js:3469:32)
    at Function.each (core.js:260:19)
    at jQuery.fn.init.each (core.js:82:17)
    at $.fn.<computed> [as kendoMultiSelect] (kendo.core.js:3468:26)
    at HTMLDocument.<anonymous> (List:668:63)
    at mightThrow (deferred.js:124:29)
    at process (deferred.js:192:12)

Hello,

I have following MultiSelectFor:

    @(Html.Kendo().MultiSelectFor(x => x.TitleAttachmentForm.AuthorsList)
                                                    .AutoBind(true)
                                                    .DataTextField("SearchValue")
                                                    .DownArrow()
                                                    .DataValueField("Id")
                                                    .DataSource(ds => ds
                                                    .Custom()
                                                    .Transport(transport => transport
                                                    .Read(r => r
                                                    .Url("?handler=AuthorPublisherRead").Data("authorDataFunction")
                                                    ))
                                                    .ServerFiltering(true)
                                                    )
                                                    .Filter(FilterType.StartsWith)
                                                    .Height(400)
                                                    .ItemTemplate("<span class=\"k-state-default \"><strong>#= (data.Title == null) ? '' : data.Title # #: data.Firstname # #: data.Lastname #</strong><p>#: data.SubDisplayValue #</p></span>")
                                                    .TagTemplate("<span>#= (data.Title == null) ? '' : data.Title # #: data.Firstname # #: data.Lastname #</span>")
                                                    )

The MultiSelectFor is binded to following remote api:

  public async Task<JsonResult> OnGetAuthorPublisherRead([CanBeNull] string filterValue, [CanBeNull] string bindedvalue)

    {
      //Deleted
    }

This is used to filter for items on the remote site and get the binded value.

In my DropDownListFor I can use authorDataFunction to receive the value and the text of my DropDown:

   function authorDataFunction() {
            
            return {
                __RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
                filterValue: $("#mydropdown").getKendoDropDownList().filterInput.val(),
                bindedvalue: $("#mydropdown").getKendoDropDownList().value()

            };
        }

I played around with the api, however, I am not able to receive the input text and value(s):

    function authorDataFunction() {
            var multiselect = $("#TitleAttachmentForm_AuthorsList").data("kendoMultiSelect");
          

            return {
                __RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
                filterValue: multiselect.filterInput.val(),
                bindedvalue:multiselect.value()
            };
        }

Its telling me, that filterInput is undefined. also multiselect.text() does not work.

How can I access the binded value and the input in the .net core component?