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

3 posts, 0 answers
  1. Fiery
    Fiery avatar
    2 posts
    Member since:
    Apr 2015

    Posted 30 Apr 2015 Link to this post

    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

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2196 posts

    Posted 04 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. Fiery
    Fiery avatar
    2 posts
    Member since:
    Apr 2015

    Posted 04 May 2015 in reply to Vladimir Iliev Link to this post

    it works, perfectly.
    Thank a lot for your help
Back to Top