Display dropdownlist instead of numeric textfield when the grid is in edition mode

[Fiery]

Hello,

it's been some hours that i have been trying to display a dropdownlist in my grid instead of the numeric textfield that appears for a specific column ( which is a foreign key).

When i click on the edit button, this column displays a textfield with the possibility to select the ID only. I want the name instead.

This is my code:

 PS: the rows displayed in my grid are NoteForm objects and the foreign key i'm talking about is languageId ( the table is language)

[Table("note")]

  public class NoteForm

  {

      [Required]

      [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]

      [Display(Name = "Title")]

      public string Title { get; set; }

 

      [Required]

      [Display(Name = "Text")]

      public string Text { get; set; }

 

      [Required]

      [Display(Name = "Language")] 

      public int languageId { get; set; }

      [ForeignKey("languageId")]

      [UIHint("LangDropDown")]<!--- I TRIED TO ADD THIS ATTRIBUTE -->


      public virtual Language language { get; set; }

 

 

      [Key]

      public int id { get; set; }

 

      public int userId { get; set; }

   

  }

 

  [Table("Language")]

  public class Language

  {

      public string lang { get; set; }

 

      [Key]

      public int id { get; set; }

  }

My View:

 

@using Kendo.Mvc.UI

@model DevelopmentNotesProject.Models.NoteForm

 

@{

    ViewBag.Title = "Index";

}

 

 

<script type="text/javascript">

    function formatter(value) {

        return value.substring(0, 50);

    }

</script>

 

 

<section id="listing">

    <h2>My Notes</h2>

 

        @(Html.Kendo().Grid<DevelopmentNotesProject.Models.NoteForm>()

        .Name("grid")

        .Columns(columns =>

        {

            columns.Bound(c => c.Title).Width(160).ClientTemplate(string.Format("{0}...", "#= formatter(Title) #"));

            columns.Bound(c => c.Text).Width(450).ClientTemplate(string.Format("{0}...", "#= formatter(Text) #"));

            columns.ForeignKey(p => p.languageId, (System.Collections.IEnumerable)ViewData["lang"], "Id", "Name").Title("Language").Width(140).EditorTemplateName("LangDropDown"); <!--LangDropDown is the name of my partial view i have created in the Shared/Partial folder-->


            columns.Command(command => { command.Edit(); command.Destroy(); });

       

        })

        .HtmlAttributes(new { style = "height: 380px;" })

        .Scrollable()

        .Groupable()

        .Sortable()

        .Pageable(pageable => pageable

            .Refresh(true)

            .PageSizes(true)

            .ButtonCount(5))

         .DataSource(dataSource => dataSource // Configure the grid data source

                  .Ajax() // Specify that ajax binding is used

                  .Read(read => read.Action("Notes_Read", "MyNotes")) // Set the action method which will return the data in JSON format

                  .Destroy(update => update.Action("Notes_Destroy", "MyNotes"))

                  .Update(update => update.Action("Notes_Update", "MyNotes"))

                  .Model(model =>

                      {

                          model.Id(p => p.id);

                      })

               )

         .Selectable()

        )

 

 

 

  </section>

 

@Html.ActionLink("Add a new note", "Add", "MyNotes")

 

 @section Scripts {

        @Scripts.Render("~/bundles/jqueryval")

    }

My partial View:

@using Kendo.Mvc.UI

@(Html.Kendo().DropDownList()
    .Name("Alllanguages")
    .DataValueField("Id")
    .DataTextField("Name")
    .BindTo((System.Collections.IEnumerable)ViewData["lang"])
)

Controller:

 

public ActionResult Index()
{
    var dbo = new UsersContext();
    ViewData["lang"] = dbo.Language.Select(b => new { Id = b.id, Name = b.lang });
    return View();
}

Thanks a lot for your help

[Vladimir Iliev]

Hi Fiery,


From the provided information it seems that the following points might be related to current behavior:

• Editor templates should be nested inside "~/Views/Shared/EditorTemplates" folder - please make sure the editors are correctly nested inside this folder. More information is available in this help article.
• Editor name should be the same as field name (even better approach would be to use strongly type DropDownListFor builder) - currently the editor name is set invalidly to another field: 

  @using Kendo.Mvc.UI
  
  @(Html.Kendo().DropDownList()
      .Name("languageId")

Regards,
Vladimir Iliev
Telerik

 

 

[Fiery]

it works, perfectly.
Thank a lot for your help