Multiselect does not populate when there is one record.

[gregory]

I am going a bit nuts here, I have a multiselect that is passing the filters structure to my controller which successfully parses the value and returns a json object from the database back to the client. Everything works fine when there is more than one record. However, when there is one record, the instance.dataSource.total reports one record correctly, and the json looks fine, but the multiselect is not populated and it shows the no data template instead. Here is the relevant client side code: 

<h4>Select approvers</h4>
        <select id="approvers" style="width: 100%;"></select>
        <p class="demo-hint">
            Click the MultiSelect to see the customized appearance.
        </p>
    </div>

    <script>
        $(document).ready(function() { 

var SuggestedApproversDs = new kendo.data.DataSource({
serverFiltering: "true", 
transport: {
read: {
// This Kendo UI will post various arguments to the Contract.cfc, which will use the KendoUtils cfc to extract the value of the //filter[filters][0][value] argument that is sent.
// Note: since this template is in a different directory, we can't specify the cfc template without the full path name.
url: "/cssweb/applications/contractsV5/Contract.cfc?method=getUsersForRoutingPicker", // The cfc component which processes the query and returns a json string. We are passing the like operator which will use a like statement in the cfc. The other value is 'equal'.
dataType: "json",// The method in the cfc expects a json object.
contentType: "application/json; charset=utf-8", // Note: when posting json via the request body to a coldfusion page, we must use this content type or we will get a 'IllegalArgumentException' on the ColdFusion processing page.                 
type: "POST"
}, //...read:
parameterMap: function (options) {                   
return JSON.stringify(options); // You must use the parameterMap in order to stringify the data to send to the server when using serverFiltering. Note, if you get an error here, try getting the browser out of compatibility mode and run page2.cfm within this folder. I am not sure why, but on occassion, I get an error on this line when the grid does not pass the arguments right.           
}
// Note: the first dropdown does not use the parameterMap function as we are not using serverFiltering.
}, //...transport:
// Note: virtual multi-selects must have a schema and model, otherwise you will get an 'Uncaught TypeError: e.slice is not a function' error. 
schema: {
model: {
id: "WorkdayPersonKey", 
fields: { // Hefm Dept and entity are required.
PrimaryUWEmailAddress: { type: "string" },
DisplayName: { type: "string" }
}//...fields
}//...model
}//...schema
});//var DepartmentCategoryDs...

// Create the multi-select 
var approvers = $("#approvers").kendoMultiSelect({
                dataTextField: "DisplayName",
                dataValueField: "PrimaryUWEmailAddress",
//headerTemplate: $("#contactHeader").html(),
                footerTemplate: '<div>Total #= instance.dataSource.total() # items found</div>',
                //itemTemplate: '<span class="k-state-default"><h3>#= data.DisplayName #</h3><p>#= data.PrimaryUWEmailAddress #</p></span>',
                //tagTemplate:  '<span>#= data.DisplayName#</span>',
filter: "contains",
dataSource: SuggestedApproversDs,
            }).data("kendoMultiSelect");//var approvers... --->

            var approvers = $("#approvers").data("kendoMultiSelect");
            //approvers.wrapper.attr("id", "approvers-wrapper");
        });


    </script>

 

The json string when there are multiple records (works fine- two records show):

[{"LegalMiddleName":"E","PrimaryCostCenterKey":5774,"LegalLastName":"Alexander","DisplayName":"Alexander, Gregory E","PrimaryManagerKey":212165,"EmployeeId":867007144,"WorkdayPersonKey":203298,"Level":1,"PrimaryUWEmailAddress":"[e-mail]","LegalFirstName":"Gregory"},{"LegalMiddleName":"R.","PrimaryCostCenterKey":"","LegalLastName":"Gregorio","DisplayName":"Gregorio, Doris R.","PrimaryManagerKey":"","EmployeeId":878008569,"WorkdayPersonKey":83145,"Level":1,"PrimaryUWEmailAddress":"[e-mail]","LegalFirstName":"Doris"},{"LegalMiddleName":"","PrimaryCostCenterKey":5770,"LegalLastName":"Gregory","DisplayName":"Gregory, Brian","PrimaryManagerKey":353307,"EmployeeId":845001427,"WorkdayPersonKey":383173,"Level":1,"PrimaryUWEmailAddress":"[e-mail]","LegalFirstName":"Brian"},{"LegalMiddleName":"N","PrimaryCostCenterKey":1114,"LegalLastName":"Gregory","DisplayName":"Gregory, James N","PrimaryManagerKey":216206,"EmployeeId":866004108,"WorkdayPersonKey":125373,"Level":1,"PrimaryUWEmailAddress":"[e-mail]","LegalFirstName":"James"},{"LegalMiddleName":"","PrimaryCostCenterKey":2016,"LegalLastName":"Pepper","DisplayName":"Pepper, Gregory","PrimaryManagerKey":123109,"EmployeeId":879007928,"WorkdayPersonKey":117122,"Level":1,"PrimaryUWEmailAddress":"[e-mail]","LegalFirstName":"Gregory"}]

Json string when there is one record (and the control is not populated). 

[{"LegalMiddleName":"E","PrimaryCostCenterKey":5774,"LegalLastName":"Alexander","DisplayName":"Alexander, Gregory E","PrimaryManagerKey":212165,"EmployeeId":867007144,"WorkdayPersonKey":203298,"Level":1,"PrimaryUWEmailAddress":"[e-mail]","LegalFirstName":"Gregory"}]

 

What am I doing wrong?

[gregory]

The controller does not populate.

[gregory]

With more than one record, the multiselect is populated.

[Misho]

Hello,

I've created a sample that is using Kendo Northwind service in the datasource with a similar to yours setup which appears to be working correctly:
https://dojo.telerik.com/ATOGaNuB
Could you please modify this sample so the issue could be observed and send it back so we could be able to replicate, investigate it on our side and provide you with more reliable solution.

Thank you for your collaboration.

Best Regards,
Misho
Progress Telerik

[gregory]

The problem that I have using that code is that I can't pass the email address that was typed in by the user into the form. The widget is not passing any values to the controller. I could not figure this out so I had to use the approach that I used in the example above in order to pass values to the controller. 

Here is the code adapted from your example- no arguments are sent unfortunately. If I could somehow send the typed in value- that would work, but the suggested code as is does not do this. 

$(document).ready(function () {

        var SuggestedApproversDs = new kendo.data.DataSource({
          serverFiltering: true,
          transport: {
            read: {
              url: "/cssweb/applications/contractsV5/Contract.cfc?method=getUsersForRoutingPicker",
            }
          }
        });

        // Create the multi-select
        var approvers = $("#approvers").kendoMultiSelect({
          dataTextField: "DisplayName",
          dataValueField: "PrimaryUWEmailAddress",
          //headerTemplate: $("#contactHeader").html(),
          footerTemplate: '<div>Total #= instance.dataSource.total() # items found</div>',
          //itemTemplate: '<span class="k-state-default"><h3>#= data.DisplayName #</h3><p>#= data.PrimaryUWEmailAddress #</p></span>',
          //tagTemplate:  '<span>#= data.DisplayName#</span>',
          filter: "contains",
          dataSource: SuggestedApproversDs,
        }).data("kendoMultiSelect");//var approvers... --->

        var approvers = $("#approvers").data("kendoMultiSelect");
        //approvers.wrapper.attr("id", "approvers-wrapper");


      });
    </script>

 

 

 

[Misho]

Hi,

We need additional time to review the request and provide you with answer. We will write back to you with the follow up as soon as possible.
Thank you for your understanding.

 

Best Regards,
Misho
Progress Telerik

[Misho]

Hi,

I've created a complete sample ASP.NET MVC project similar to your setup which shows how to implement Kendo Multiselect widget in a form with server filtering.
With this setup the  dataValueField is passed successfully to the controller.

Here is the sample code:

View:

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
        <select multiple="multiple" id="email" name="email" style="width: 300px" />
        <input type="submit" value="Submit" />
        @Model
}
<script>
    var SuggestedApproversDs = new kendo.data.DataSource({

        type: "json",
        serverFiltering: true,
        transport: {
            read: "Home/GetProductsAjax",
            parameterMap: function (e) {
                return {
                    text: $("#email").getKendoMultiSelect().input.val()
                }
            }
        }
    });


    $("#email").kendoMultiSelect({
        autoBind: true,
        dataTextField: "DisplayName",
        dataValueField: "PrimaryUWEmailAddress",
        footerTemplate: '<div>Total #= instance.dataSource.total() # items found</div>',
        filter: "contains",
        dataSource: SuggestedApproversDs
    });
</script>

Controller:

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]

        public ActionResult Index(string email)
        {
            return View(model: email);
        }
        public JsonResult GetProductsAjax(string text)
        {
            var products = Enumerable.Range(0, 10).Select(i => new ProductViewModel
            {
                PrimaryUWEmailAddress = "name" + i + "@test.com",
                DisplayName = "name" + i
            });

            if (!string.IsNullOrEmpty(text))
            {
                products = products.Where(p => p.DisplayName.Contains(text));
            }

            return Json(products, JsonRequestBehavior.AllowGet);
        }
    }

Here is a video showing the result on my end: http://take.ms/gcKBkR

You could find the whole project in the attachment.

Best Regards,
Misho
Progress Telerik