How I add DropDownList in a custom template for popup editing?

5 posts, 1 answers
  1. Pierre
    Pierre avatar
    257 posts
    Member since:
    Apr 2007

    Posted 24 Sep 2018 Link to this post

    Hi, I work with the sample GridCustomPopupTemplate but in the sample you do not show how to add an dropdownList for an ForeignKey column. In Inline mode editing all work good. But how to do it in an custom popup template?

    My template for now:

    @model PortailGES.Models.ActionGES
     
     
     
     
    <div class="editor-label">
        @Html.LabelFor(model => model.SecteurId, "Secteur")
    </div>
    <div class="editor-field">
        @Html.Kendo().DropDownListFor(m => m.SecteurId)
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.Titre)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Titre)
        @Html.ValidationMessageFor(model => model.Titre)
    </div>

     

    The DropDownListis empty. I see that in the ViewData.Values[0].Items I got the source items for Secteur but how to make the link with the DropDownList DataSource?

    Thanks

  2. Georgi
    Admin
    Georgi avatar
    544 posts

    Posted 26 Sep 2018 Link to this post

    Hello Pierre,

    It is necessary to bind the drop down to the values collection which is used for the foreign key column.

    For your convenience I am attaching a small sample which demonstrates how to use a drop down for a foreign key column within a custom popup template.
     

    Regards,
    Georgi
    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.
  3. Pierre
    Pierre avatar
    257 posts
    Member since:
    Apr 2007

    Posted 27 Sep 2018 in reply to Georgi Link to this post

    Sorry, I do not understand your sample. I will try to be more specific. My FK in the main grid look like:

    columns.ForeignKey(m => m.SecteurId, Model.Secteurs, "SecteurID", "Nom").Title("Secteur");

     

    Model.Secteurs is another collection present in the viewmodel of that page with Value=SecteurId and Text=Nom

    So I try your line of code:

    @Html.Kendo().DropDownListFor(m => m.SecteurId).DataTextField("Nom").DataValueField("SecteurId").BindTo((System.Collections.IEnumerable)ViewData["Secteurs"]).ValuePrimitive(true)

     

    But the dropdown is empty. I think the problem is located at ViewData["Secteur"] that are null. I do not access it like it should. I join a picture of the live watch for the ViewData 

  4. Pierre
    Pierre avatar
    257 posts
    Member since:
    Apr 2007

    Posted 27 Sep 2018 in reply to Pierre Link to this post

    Regarding the picture I post on my last message, I try that :

    (System.Collections.IEnumerable)ViewData.Values.ToArray()[0]

    instead of 

    (System.Collections.IEnumerable)ViewData["Secteurs"]

    Now I got 3 Undifined items in my dropdownList (so I read 3 items like in the collection, but the name and ID are not binded correctly).

    I try (System.Collections.IEnumerable)ViewData.Values.ToArray()[0].Items But got exception on Items could not be found

  5. Answer
    Georgi
    Admin
    Georgi avatar
    544 posts

    Posted 01 Oct 2018 Link to this post

    Hi Pierre,

    You could populate the ViewData within the action which returns the view with the grid.

    e.g.

    public ActionResult Index()
    {
        ...
        ViewData["Secteurs"] = model.Secteurs;
        return View(model);
    }

    And bind the drop down to ViewData["Secteurs"].

    e.g.

    @Html.Kendo().DropDownListFor(m => m.SecteurId).DataTextField("Nom").DataValueField("SecteurId").BindTo((System.Collections.IEnumerable)ViewData["Secteurs"]).ValuePrimitive(true)

    Also, I have examined the screenshot and noticed that the items are already available in ViewData.Values[0].Items. So binding the drop down as follows should also work.

    (System.Collections.IEnumerable)ViewData.Values.ToArray()[0].Items


    Regards,
    Georgi
    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.
Back to Top