Adding Values to Multiselect After Ajax Call--Possible bug?

2 posts, 0 answers
  1. Pedro
    Pedro avatar
    5 posts
    Member since:
    Sep 2014

    Posted 11 Aug 2015 Link to this post

    Hello,

     I have been trying to figure out how to set value of my multiSelect after server filtering and adding some conditions so that some elements cannot be deleted.  The multiselect works fine *as long* as the user uses the mouse to select elements to add. Once the user decides to filter by using the keyboard the multiselect does not render the added item correctly even though the values i set to them are correct.Here is my code:

    Edit.cshtml:

       @Html.Kendo().MultiSelect().Name("msGroupMembers").DataTextField("FullName").DataValueField("Id").Value(new[] { new { FullName = Model.SelectedTO.Select(x => x.Text), Id = Model.SelectedTO.Select(x => x.Value) } }).Filter(FilterType.Contains).Events(e => e.Change("onChangeEdit").Close("onCloseEdit").Select("onSelect")).DataSource(source => source
                            .Custom()
                            .Transport(transport => transport
                            .Read(read =>
                            {
                                read.Action("GetGroupMembers", "ScheduleRequest")
                                .Data("testOfficerFiltering");
                            }))
                            .ServerFiltering(true)).HtmlAttributes(new { required = "required" })

     Controller:

      public ActionResult SetGroupMembers(List<int> items, string teamLead)
            {
                Business.Entities.RTSSUser user = userService.GetRTSSUser(User.Identity.Name);

                // check to see if we have a lead.
                int lead;
                bool result = int.TryParse(teamLead, out lead);
                if (!result)
                {
                    lead = -1;
                }

                try
                {
                    int findLead = items.FindIndex(s => s == lead);
                    int findOwner = items.FindIndex(s => s == user.Person.Id);

                    //if our owner is also the lead, place in first spot
                    if (findLead == findOwner && findOwner == -1)
                    {
                        items.Insert(0, user.Person.Id);
                    }

                    else if (findLead == -1)
                    {
                        items.Insert(1, lead);
                    }

                    else if (findOwner == -1)
                    {
                        items.Insert(0, user.Person.Id);
                    }

                }
                catch (Exception e)
                {
                    // handle an empty list passed.
                    List<int> msUsers = new List<int>();
                    msUsers.Insert(0, user.Person.Id);
                    return Json(msUsers, JsonRequestBehavior.AllowGet);
                }
               
                
                return Json(items, JsonRequestBehavior.AllowGet);
            }​

    Javascript:
    function onChangeEdit(e) {
       
        var lead = $("#cbTeamLeadName").data("kendoComboBox").value();

        var msValue = this.value();
        var arrayLength = msValue.length;
        var newArrayValue = new Array();

        //store values into array
        for (var i = 0; i < arrayLength; i++) {
            newArrayValue.push(msValue[i]);
            console.log(msValue[i]);
        }    

        //get owner
        $.ajax({
            type: 'GET',
            url: SetGroupMembersUrl,
            data: {
                "items": newArrayValue,
                "teamLead": lead
            },
            contentType: 'application/json',
            async: true,
            cache: false,
            dataType: 'json',
            traditional: true,
            success: function (data) {          
                populateMs(data);
             
            },        
            error: function () {
                console.log("Could not get AgencyName");
            }
        });
        
    }

     
    function populateMs(e) {
        var multiSelect = $("#msGroupMembers").data("kendoMultiSelect");
        multiSelect.dataSource.filter({});
        multiSelect.value([])
        multiSelect.refresh();
        multiSelect.value(e);
        alert("Dat: " + e);
    }

    I have found this similar thread: http://stackoverflow.com/questions/22010796/kendo-multiselect-value-setting-bug and was wondering if it is a bug or if i am doing something wrong. Thanks in advance!

  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 13 Aug 2015 Link to this post

    Hello,

    If the multiselect is filtered then the most likely reason for the problem is that the current view does not contain the values set with the value method. Clearing the filter should fix this but because you are using serverFiltering, you need to wait for the request to be completed e.g.
    function populateMs(e) {
        var multiSelect = $("#msGroupMembers").data("kendoMultiSelect");
        multiSelect.dataSource.filter({});
        multiSelect.dataSource.one("change", function () {
            multiSelect.value(e);
        });               
    }



    Regards,
    Daniel
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top