This is a migrated thread and some comments may be shown as answers.

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

2 Answers 157 Views
MultiColumnComboBox
This is a migrated thread and some comments may be shown as answers.
Wasim
Top achievements
Rank 1
Wasim asked on 27 Dec 2018, 04:17 AM

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 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 28 Dec 2018, 09:22 AM
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.
0
Wasim
Top achievements
Rank 1
answered on 30 Dec 2018, 07:45 AM
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.
Tags
MultiColumnComboBox
Asked by
Wasim
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Wasim
Top achievements
Rank 1
Share this question
or