DropDownList to access filtered remote data

[Ralf]

Hello,

I am trying to implement a dropdownlist in a grid popupedit, that select Users from Azure Active Directory. I access the Azure Active Directoty with the Graph Api, so that I always get only a part of the users in the controller to return to the dropdownlist.

The controller sends the data of the users as SelectListItems (Text: Lastname, Firstname; Value: E-Mail).

The selection of a user in a new record works fine and the email address is saved in the database.

But if I want to edit this record, the dropdownlist is empty, because the dropdownlist needs the value for "Text" the Lastname and Firstname.

Is it possible to insert a value for Text and Value in the DropDownList, when editing a record?

[Dimitar]

Hello Ralf,

There is an existing example that demonstrates how to setup a custom editor for a Grid column:

• Grid Custom Editor Demo for ASP.NET MVC.

In addition to the above, you could also find additional information regarding how to edit  the Grid for ASP.NET MVC through editor templates in the following article:

• Editor Templates.

Concerning changing the value of the DropDownList, this could be achieved through the DataValueField option:

@(Html.Kendo().DropDownListFor(m => m)
.DataValueField("FirstName")
.DataTextField("LastName")
.BindTo((System.Collections.IEnumerable)ViewData["pets"])
)

Also, in case you would like to add additional properties, or use different names than the SelectListItem's Text and Value, you could also create a custom Model for the DropDownList and then set the desired values to the DataTextField and DataValueField options:

public class PetViewModel
{
  public int ID { get; set; }

  public string FirstName { get; set; }

  public string LastName { get; set; }
}

To customize the column content, the ClientTemplate option could be used as follows:

columns.Bound(p => p.Pet).ClientTemplate("#=Pet.FirstName# #=Pet.LastName#").Width(180);

Regards,
Dimitar
Progress Telerik

[Ralf]

Hello Dimitar,

this examples do not help me. I need a solution similar to vitualization.

Here is my code in detail:

The definition of the grid:

@(Html.Kendo().Grid<ProjectRequestViewModel>()
    .Name(componentName: "ProjectRequestGrid")
    .HtmlAttributes(new { style = "height: 600" })
    .Editable(
        editable => editable.Mode(GridEditMode.PopUp).TemplateName(editTemplateName).Window(w => w.Width(width: 1200).Title("Project Request")))
        .Columns(columns =>
        {
            columns.Command(command => { command.Edit().Text(" ")}).Width(pixelWidth: 30);
            columns.Bound(p => p.ProjectTitle).Title("Project Title").Width(pixelWidth: 200).Filterable(ftb => ftb.Multi(value: true).Search(value: true));
            columns.Bound(p => p.ProjectManager).Title("Project Manager").Width(pixelWidth: 180).Filterable(ftb => ftb.Multi(value: true).Search(value: true));
        })

    .ToolBar(toolbar =>
    {
        if (Model.ProjectRequestGridType == ProjectRequestGridType.newRequests)
        {
            toolbar.Create().Text("Create a new project request");
        }
    })

    .DataSource(ds => ds.Ajax()
        .PageSize(pageSize: 8)
        .Events(events => events.Error(handler: "onErrorGrid"))
        .Events(events => events.RequestEnd(handler: "onSave"))
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Id).Editable(enabled: false);
        })
  .Sort(p => p.Add(memberName: "ProjectTitle").Ascending())
  .Read(read => read.Action(actionName: readActionName, controllerName: "ProjectRequest"))
  .Update(update => update.Action(actionName: "ProjectRequestUpdate", controllerName: "ProjectRequest"))
  .Create(create => create.Action(actionName: "ProjectRequestCreate", controllerName: "ProjectRequest"))
  .Pageable()
  .Sortable()
  .Groupable()
  .Filterable()
  .Resizable(resize => resize.Columns(value: true))
              .Reorderable(reorder => reorder.Columns(value: true))
)

The configuration of the DropDownListFor in the view (it is used as a grid popup edit). ProjectManager is a string property.

@(Html.Kendo().DropDownListFor(model => model.ProjectManager)
             .DataTextField("Text")
             .DataValueField("Value")
             .Filter(FilterType.Contains)
             .DataSource(ds =>
                 ds.Read(read => read.Action("GetProjectManager", "ProjectRequest"))
                     .ServerFiltering(true))
             .HtmlAttributes(new { @class = "dialog-form-control" })
             .MinLength(2)
             .Delay(200))

And here the code in the controller for the Ajax-Request of the DropDown-List

public async Task <JsonResult> GetProjectManager(string text)
       {
           IQueryable<PeopleSearchPerson> peopleSearch = new List<PeopleSearchPerson>().AsQueryable();

           if (!string.IsNullOrWhiteSpace(text))
           {
               peopleSearch = await PeopleSearchService.SearchPeopleNameStartsWithAsync(text);
           }
           IEnumerable<SelectListItem> peopleStrings = peopleSearch.AsEnumerable().Select(s => new SelectListItem()
           {
               Text = $"{s.DisplayName}, {s.Email}",
               Value = s.Email
           });

           return Json(peopleStrings, JsonRequestBehavior.AllowGet);
       }

The function "PeopleSearchService.SearchPeopleNameStartsWithAsync" search in the Azure Active Directory with tha value typed in the dropbox (maximum number of 100 entries).

The controller action send SelectListItem's like this:

• Text: Lastname1, FirstName (Company)
• Value: [e-mail]

The dropdownlist works fine for new records. I could select "Lastname1, FirstName (Company)" and the e-mail "[e-mail]" is saved in the property "ProjectManager" in the database.

But if i open the record again, the dropdown list shows no value. I think this is because the dropdownlist gets the e-mail value from the database but have no selectlist item to match.

Is it possible to set a selectlist item for the dropdownlist?

I tried to use the virtualization feature of the dropdownlist, but i have the problem that the PeopleSearchService did not give back a IQueryable with all people.

[Joana]

Hi Ralf,

Make sure that the Model bound to the DropDownList (model.ProjectManager)  is properly associate to the one bound to the Grid.

You could use the following demo for a reference how to associate the DropDownList with the Grid. The DropDownList is bound to a CategoryViewModel:

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

public class CategoryViewModel
{
   public int CategoryID { get; set; }
   public string CategoryName { get; set; }
}

@model Kendo.Mvc.Examples.Models.CategoryViewModel

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("CategoryID")
        .DataTextField("CategoryName")
        .BindTo((System.Collections.IEnumerable)ViewData["categories"])
)

 and the Grid is bound to ProductViewModel which has a Category property of type CategoryViewModel which is later used for binding the DropDownList.

If you could send us a simple isolated project with the scenario we will be able to provide you more detailed assistance with binding the DropDownList and successfully setting the selected item.

Regards,
Joana
Progress Telerik