Adding a dropdownlist to UI Grid

[Jon]

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

[Viktor Tachev]

Hi Jon,

As I understand your scenario you would like to have a dropdown editor in one of the columns in the Grid. Please examine the following demo that illustrates how you can implement the approach:

• http://demos.telerik.com/aspnet-mvc/grid/editing-custom

Regards,
Viktor Tachev
Telerik by Progress

[Jon]

Hi

 

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

 

 

 

 

 

 

 

 

[Viktor Tachev]

Hello Jon,

There should be no need to use custom styles for any of the DropDowns. They should take the styles from the css files for the corresponding skin.

If the appearance does not seem correct please open the browser console by pressing F12 and see if there are any errors listed. More specifically check for any missing styles.

Regards,
Viktor Tachev
Telerik by Progress