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

DropDownList to access filtered remote data

3 Answers 281 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Ralf
Top achievements
Rank 1
Ralf asked on 02 Nov 2018, 04:07 PM

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?

3 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 06 Nov 2018, 11:44 AM
Hello Ralf,

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


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:


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
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
Ralf
Top achievements
Rank 1
answered on 09 Nov 2018, 02:09 PM

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: firstname.lastname@company.com

The dropdownlist works fine for new records. I could select "Lastname1, FirstName (Company)" and the e-mail "firstname.lastname@company.com" 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.

0
Joana
Telerik team
answered on 13 Nov 2018, 10:11 AM
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
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.
Tags
DropDownList
Asked by
Ralf
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Ralf
Top achievements
Rank 1
Joana
Telerik team
Share this question
or