Dropdownlist model binding behaviour

[louis]

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)?

[louis]

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

[Parthiban]

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?

[louis]

No, still no solution. I am hoping that this isn't a bug, and it's something that we may have overlooked.

[louis]

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.

[Uilton]

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)

[Baskar]

I am facing similar issue, on giving Html attribute the cascading is not working, do you have any solution for this

[Patrice]

The solution provided by Uilton works for me. Thank you sir, your english was at least good enough to help!

[Don]

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?