Adding a dropdownlist to UI Grid

4 posts, 0 answers
  1. Jon
    Jon avatar
    4 posts
    Member since:
    Sep 2016

    Posted 26 Sep Link to this post

    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

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 29 Sep Link to this post

    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:




    Regards,
    Viktor Tachev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    4 posts
    Member since:
    Sep 2016

    Posted 29 Sep Link to this post

    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

     

     

     

     

     

     

     

     

  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 30 Sep Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top