MultiColumnCombo's dropdown list not rendering data properly into the columns

3 posts, 0 answers
  1. Wasim
    Wasim avatar
    5 posts
    Member since:
    May 2018

    Posted 26 Dec 2018 Link to this post

    I am using MultiColumnComboBox in my application which binds to the datasource correctly but when I click the dropdown button, the list does not render properly. All the data shows in one column. The column headings render properly though.

    <div class="col-md-6 col-sm-12" style="margin-top:10px">
         @(Html.Kendo().MultiColumnComboBoxFor(model=>model.Trainers)
            .Name("trainersCombo")
            .DataTextField("emp_badge_no")
            .DataValueField("id")
            .Filter("contains")
            .FilterFields(new string[] { "emp_first_name", "emp_last_name", "emp_company" })
            .Columns(columns =>
            {
                columns.Add().Field("emp_badge_no").Title("Badge No").Width(100);
                columns.Add().Field("emp_company").Title("Company").Width(200);
                columns.Add().Field("emp_first_name").Title("First Name").Width(200);
                columns.Add().Field("emp_last_name").Title("Last Name").Width(100);
             
            })
            .FooterTemplate("Total #: instance.dataSource.total() # items found")
            .HtmlAttributes(new { style = "width:100%;" })
            .Height(400)
            .DataSource(source => source
                    .Custom()
                    .Transport(transport => transport
                    .Read(read =>
                    {
                        read.Action("GetAllEmployees", "CourseTrainer").Data("onAdditionalData");
                    }))
                )
        )
    </div>

    and here is the code for GetAllEmployees

    public JsonResult GetAllEmployees(string badgeNo)
            {
                var items = db.EmployeeMasters.AsQueryable();
     
                if (!string.IsNullOrWhiteSpace(badgeNo))
                {
                    items = items.Where(p => p.emp_badge_no == badgeNo);
                }
     
                var data = items.Select(p => new { p.id, p.emp_badge_no, p.emp_first_name, p.emp_last_name, p.emp_company });
                return Json(data, JsonRequestBehavior.AllowGet);
            }

    I have 2018.3.1017.545 version of Kendo.mvc.dll. Below image shows how the data is render in the drop down.

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4713 posts

    Posted 28 Dec 2018 Link to this post

    Hi Wasim,

    I am attaching here a small example that works fine for me so you can compare against it. I am also adding my layout so you can see the basic list of included files - at this point my best guess is that not all necessary stylesheets are loaded.

    If this does not help you resolve the problem, please modify my sample to showcase the issue you are facing so I can investigate.


    Regards,
    Marin Bratanov
    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.
  3. Wasim
    Wasim avatar
    5 posts
    Member since:
    May 2018

    Posted 30 Dec 2018 in reply to Marin Bratanov Link to this post

    Indeed my kendo.common.min.css was outdated. Although I had used the Telerik Project upgrade wizard to update to the latest version of Telerik assemblies but not sure why this file was not updated.
Back to Top