Dropdownlist model binding behaviour

9 posts, 0 answers
  1. louis
    louis avatar
    16 posts
    Member since:
    Nov 2011

    Posted 27 Nov 2012 Link to this post

    After several hours of trying, and googling, I realised, in order for my model (in the controller, after a postback) to register the value of my dropdownlist, the .Name property has to actually match the name of my model property.

    This is how my dropdownlist looks like

    @(Html.Kendo().DropDownListFor(m => m.EventTrigger.EventType)
                                          .Name("EventTrigger.EventType")
                                          .DataTextField("EventType")
                                          .DataValueField("EventType")
                                          .BindTo(Model.EventDefs))


    Shouldn't this:
    (m => m.EventTrigger.EventType)

    be sufficient to bind the dropdownlist selected value to my model? Why is the following .Name("") necessary?

    What is the purpose of (m => m.EventTrigger.EventType)?
  2. louis
    louis avatar
    16 posts
    Member since:
    Nov 2011

    Posted 27 Nov 2012 Link to this post

    On the same topic,

    I have a cascading dropdownlist

    @(Html.Kendo().DropDownListFor(m => m.EventTrigger.TriggerType)
                                          .Name("DeviceInterfaces")
                                          .OptionLabel("Select interface...")
                                          .DataTextField("Name")
                                          .DataValueField("Id")
                                          .DataSource(source => source.Read(read => read.Action("GetCascadeDeviceInterfaces""EventTriggers")))
                                          )
    @(Html.Kendo().DropDownListFor(m => m.EventTrigger.TriggerId)
                                          .Name("EventTrigger.TriggerId")
                                          .OptionLabel("Select item...")
                                          .DataTextField("Id")
                                          .DataValueField("Name")
                                          .DataSource(source => source.Read(read => read.Action("GetCascadeIdsByInterface""EventTriggers")
                                                                                        .Data("filterInterface"))
                                                                      .ServerFiltering(true))
                                          .Enable(false)
                                          .AutoBind(false)
                                          .CascadeFrom("DeviceInterfaces")
                                          )

    <script>
        function filterInterface() {
            return {
                deviceInterface: $("#DeviceInterfaces").val()
            };
        }
    </script>


    Now, the above works fine, except, like I mentioned in my first post, in order for me to bind the selected value of my dropdownlist to my model, I somehow need to set the my model property as the .Name() property.

    So what I did, was to change (in my first dropdownlist)
    .Name("DeviceInterfaces")
    to
    .Name("EventTrigger.TriggerType")

    and in my second dropdownlist, I changed
    .CascadeFrom("DeviceInterfaces")
    
    to
    .CascadeFrom("EventTrigger.TriggerType")
    

    And finally, in the script

    <script>
        function filterInterface() {
            return {
                deviceInterface: $("#DeviceInterfaces").val()
            };
        }
    </script>

    to

    <script>
        function filterInterface() {
            return {
                deviceInterface: $("#EventTrigger.TriggerType").val()
            };
        }
    </script>

    However, this has caused the cascading effect of the 2nd dropdown to stop functioning. Selecting any item in my first dropdown, doesn't update the 2nd cascading dropdownlist.

    Please help.

    Maybe I might have missed something somewhere
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Parthiban
    Parthiban avatar
    1 posts
    Member since:
    Oct 2012

    Posted 28 Nov 2012 Link to this post

    I am also facing the exact problem that you have mentioned.

    In addition to the cascading behaviour, the .Value() method is also not working if i change the name same as the nested model member as you have mentioned.  I also figured out that the period (.) in the name (EventTrigger.TriggerId) gets converted into Underscore (EventTrigger_TriggerId) when it sets the ID of the control in the HTML.  So, there is a mismatch caused automatically between the control name and the control ID which i think might cause the problem of the other properties not effective even when we set. 

    But, i'm still struck with it.  Have you found any solution/workaround for it?
  5. louis
    louis avatar
    16 posts
    Member since:
    Nov 2011

    Posted 28 Nov 2012 Link to this post

    No, still no solution. I am hoping that this isn't a bug, and it's something that we may have overlooked.
  6. louis
    louis avatar
    16 posts
    Member since:
    Nov 2011

    Posted 28 Nov 2012 Link to this post

    Just an update. there's no need to specify the .Name property unless you are binding to a model in a different controller.

    .CascadeFrom("EventTrigger_TriggerType")
    function filterInterface() {
        return {
            deviceInterface: $("#EventTrigger_TriggerType").val()
        };
    }

    Change to the above solved my problems, thanks to telerik's support team.
  7. Uilton
    Uilton avatar
    2 posts
    Member since:
    Sep 2012

    Posted 17 Dec 2012 Link to this post

    I've found an alternatively solution:

    If using .DropDownListFor, instead define .Name property to define de element identification use .HtmlAttributes with id attribute, like this:

    @(Html.Kendo().DropDownListFor(m => m.EventTrigger.TriggerType)
                                          .HtmlAttributes(new {id = "DeviceInterfaces"})
                                          .OptionLabel("Select interface...")
                                          .DataTextField("Name")
                                          .DataValueField("Id")
                                          .DataSource(source => source.Read(read => read.Action("GetCascadeDeviceInterfaces""EventTriggers")))
                                          )
    @(Html.Kendo().DropDownListFor(m => m.EventTrigger.TriggerId)
    
    				      .HtmlAttributes(new {id = "TriggerId"})
                                          .OptionLabel("Select item...")                                       .DataTextField("Id")                                       .DataValueField("Name")                                       .DataSource(source => source.Read(read => read.Action("GetCascadeIdsByInterface""EventTriggers")                                                                                     .Data("filterInterface"))                                                                   .ServerFiltering(true))                                       .Enable(false)                                       .AutoBind(false)                                       .CascadeFrom("DeviceInterfaces")                                       )

    <script>
        function filterInterface() {
            return {
                deviceInterface: $("#DeviceInterfaces").val()
            };
        }
    </script>

    It had work for me. Try to use this!!

    God bless you!
    (P.S.: Sorry by my bad english! I'm brazilian and I need to enhance my english knowledgements! :D)
  8. Baskar
    Baskar avatar
    3 posts
    Member since:
    Mar 2013

    Posted 25 Apr 2013 Link to this post

    I am facing similar issue, on giving Html attribute the cascading is not working, do you have any solution for this
  9. Patrice
    Patrice avatar
    4 posts
    Member since:
    Apr 2010

    Posted 20 Aug 2013 Link to this post

    The solution provided by Uilton works for me. Thank you sir, your english was at least good enough to help!
  10. Don
    Don avatar
    5 posts
    Member since:
    Aug 2013

    Posted 26 Aug 2013 Link to this post

    Just curious if you don't bind this to a model ? ... how would you get the value from the dropdownlists?

    @(Html.Kendo().DropDownList()
                              //.Name("DDLtracts")
                              .HtmlAttributes(new { style = "width:300px", id = "tracts"})
                              .OptionLabel("Select Tract...")
                              .DataTextField("TractName")
                              .DataValueField("TractID")
                              .DataSource(source => {
                                  source.Read(read =>
                                  {
                                      read.Action("GetCascadeTracts", "ImageUpload")
                                          .Data("filterTracts");
                                  })
                                  .ServerFiltering(true);
                              })
                              .Enable(false)
                              .AutoBind(false)
                              .CascadeFrom("sections")
                        )
                        <script>
                            function filterTracts() {
                                return {
                                    sections: $("#sections").val()
                                };
                            }
                        </script>                  

    This is how most of my tables look like, i have scripts at bottom of page

     $(document).ready(function () {
            var clients = $("#clients").data("kendoDropDownList"),
                countys = $("#countys").data("kendoDropDownList"),
                townShips = $("#townShips").data("kendoDropDownList"),
                ranges = $("#rangess").data("kendoDropDownList"),
                sections = $("#sections").data("kendoDropDownList"),
                tracts = $("#tracts").data("kendoDropDownList");
           });

            $("#get").click(function () {
                var clientsInfo = "\nDDLclients: { id: " + clients.value() + ", name: " + clients.text() + " }",
                    countysInfo = "\nDDLcountys: { id: " + countys.value() + ", name: " + countys.text() + " }",
                    townShipsInfo = "\nDDLtownShips: { id: " + townShips.value() + ", name: " + townShips.text() + " }",
                    rangesInfo = "\nDDLranges: { id: " + ranges.value() + ", name: " + ranges.text() + "}";
                    sectionsInfo = "\nDDLsections: { id: " + sections.value() + ", name: " + sections.text() + "}";
                    tractsInfo = "\nDDLtracts: { id: " + tracts.value() + ", name: " + tracts.text() + "}";

                    alert("Select Tract To Upload:\n" + clientsInfo + countysInfo + townShipsInfo + rangesInfo + sectionsInfo + tractsInfo);
            });

    but still in the controller i cannot grabt he value from the DropDownList ...

                      
                        string trct = values["tracts"];
                        string filter = values["filterTracts"];
                       
    ... 

    How do i read the value of the dropdownlist, also how would i relay this data from the razor view , to another controller via an Action Link?

    Any of you know?
Back to Top
UI for ASP.NET MVC is VS 2017 Ready