Multiselect does not populate when there is one record.

7 posts, 2 answers
  1. gregory
    gregory avatar
    41 posts
    Member since:
    Jun 2006

    Posted 14 Sep 2018 Link to this post

    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":"gregorya@uw.edu","LegalFirstName":"Gregory"},{"LegalMiddleName":"R.","PrimaryCostCenterKey":"","LegalLastName":"Gregorio","DisplayName":"Gregorio, Doris R.","PrimaryManagerKey":"","EmployeeId":878008569,"WorkdayPersonKey":83145,"Level":1,"PrimaryUWEmailAddress":"gregorio@uw.edu","LegalFirstName":"Doris"},{"LegalMiddleName":"","PrimaryCostCenterKey":5770,"LegalLastName":"Gregory","DisplayName":"Gregory, Brian","PrimaryManagerKey":353307,"EmployeeId":845001427,"WorkdayPersonKey":383173,"Level":1,"PrimaryUWEmailAddress":"gregorb@uw.edu","LegalFirstName":"Brian"},{"LegalMiddleName":"N","PrimaryCostCenterKey":1114,"LegalLastName":"Gregory","DisplayName":"Gregory, James N","PrimaryManagerKey":216206,"EmployeeId":866004108,"WorkdayPersonKey":125373,"Level":1,"PrimaryUWEmailAddress":"gregoryj@uw.edu","LegalFirstName":"James"},{"LegalMiddleName":"","PrimaryCostCenterKey":2016,"LegalLastName":"Pepper","DisplayName":"Pepper, Gregory","PrimaryManagerKey":123109,"EmployeeId":879007928,"WorkdayPersonKey":117122,"Level":1,"PrimaryUWEmailAddress":"gregor@uw.edu","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":"gregorya@uw.edu","LegalFirstName":"Gregory"}]

     

    What am I doing wrong?

  2. gregory
    gregory avatar
    41 posts
    Member since:
    Jun 2006

    Posted 14 Sep 2018 in reply to gregory Link to this post

    The controller does not populate.
  3. gregory
    gregory avatar
    41 posts
    Member since:
    Jun 2006

    Posted 14 Sep 2018 in reply to gregory Link to this post

    With more than one record, the multiselect is populated.
  4. Answer
    Misho
    Admin
    Misho avatar
    193 posts

    Posted 18 Sep 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. gregory
    gregory avatar
    41 posts
    Member since:
    Jun 2006

    Posted 25 Sep 2018 in reply to Misho Link to this post

    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>

     

     

     

  6. Misho
    Admin
    Misho avatar
    193 posts

    Posted 27 Sep 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Answer
    Misho
    Admin
    Misho avatar
    193 posts

    Posted 28 Sep 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top