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

Adding a dropdownlist to UI Grid

3 Answers 93 Views

Grid

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

Jon asked on 26 Sep 2016, 09:28 AM

I am having issues adding a dropdown combo box to my UI grid.

Context: A user is setting up a batch of jobs. Each job is for a single customer. That is, a batch can have multiple jobs, each job is for one customer. My structure is ManageJobs, which holds JobDetails and each JobDetails has a Customer ID and Customer name.

The JobDetailsViewModel holds the Customer ID for whom the job is for and a name for display purposes. I have taken out any extraneous fields that are not relevant, there are other columns in the grid which do not require a dropdown. When the user is setting up a particular JobDetail, the dropdown needs to display a list of possible customers and select which one they want. ManageJobs contains a list of possible customers they can choose from, when selected this entry is stored on the JobDetails.

Here is where I am at:

BatchViewModel contains (amongst others) a list of JobDetails and the master customer list. The master customer list is populated by the controller.

public class BatchViewModel

{

public List<JobDetailsViewModel> JobDetails { get; set; }

public List<JobCustomerViewModel> MasterCustomerList { get; set; }

}

This is the view:

@(Html.Kendo().Grid<JobDetailsViewModel>()

.Name("Grid")

.NoRecords("No details")

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Columns(columns =>

{

columns.Bound(c => c.CustomerName).Title("Customer Name")); // This is the dropdown column I want to show

columns.Bound(c => c.FilePath).Title("File")); //extraneous detail

columns.Command(c => { c.Edit().Text("Edit Job Details"); c.Destroy(); }).HtmlAttributes(new { style = "width: 30%" }); //my CRUD operations

})

.ToolBar(toolbar => { toolbar.Create().Text("Add New Job Detail"); })

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => {

model.Id(o => o.Id);

})

.HtmlAttributes(new { style = "display:table; width:100%; height: 100%;" })

//Omitted crud operations for simplicity

.Pageable()

)

My viewmodel:

public class JobDetailsViewModel

{

public Guid Id { get; set; }

// OTHER FIELDS

public Guid CustomerId { get; set; }

public string CustomerName { get; set; }

}

I have tried various things via tutorials and whatever else, but I cannot get the dropdowns working at all. Can you suggest which way I need to go for this? I am really stuck.

Many thanks

3 Answers, 1 is accepted

answered on 29 Sep 2016, 09:49 AM

I did manage to get this sorted. Posting my solution and another question....

Solution in case anyone is looking:

In the CSHTML:

columns.ForeignKey(p => p.CustomerId, (System.Collections.IEnumerable)ViewData["CustomersDropDown"], "Id", "Name")

model.Field(f => f.Customer).Editable(true).DefaultValue(ViewData["defaultCustomersDropDown"] as JobCustomerViewModel);

My new viewmodel:

public class JobCustomerViewModel

{

public Guid Id { get; set; }

public string Name { get; set; }

}

In my controller I populated the viewdata dictionary with some lists of default values based on my JobCustomerViewModel:

ViewData["CustomersDropDown"] = manageJobsViewModel.selectedJob.Customers.ToList();

ViewData["defaultCustomersDropDown"] = manageJobsViewModel.selectedJob.Customers.First();

Now, the second question I have is that the dropdown list appears perfectly fine, formatted very nicely. However I have a second dropdown list for an enum on the same grid but the default style looks completely different. I have discovered that the customers dropdown list is using the built-in kendo styles, "k-widget k-dropdown k-header". I am trying to apply these styles to the other dropdown but only in edit mode.... any idea how I can manage that?

Thanks