Hidden dropdownlist postback issue

[Phani Kiran]

I have come across scenario that I will have to hide a dropdownlist but need to send the selected value on postback.

Could some one help me with this.

Below is the sample code I am using to load the dropdownlist

@{
                var kendoDropdown = Html.Kendo().DropDownList()
                    .Name("MUAInput")
                    .BindTo(Model.SelectableMUAItems)
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .OptionLabel("Select")
                    .HtmlAttributes(new { name = "MUAInput" });

                if (Model.IsRequired)
                {
                    kendoDropdown.Events(evt =>
                    {
                        evt.Change("onRequiredKendoDropdownChanged");
                    });
                }

            kendoDropdown.HtmlAttributes(new { data_input_required = string.Empty, name = "MUA" });

                kendoDropdown.Render();
            }

[Alexander]

Hi Phani Kiran,

Generally, you can explicitly hide the DropDownList by taking advantage of the "k-hidden" class offered by Kendo which will preserve the DOM incarnation of the DropDownList within the DOM tree. In comparison to hiding the component via the "display-none" style will effectively remove the element from the tree.

Having this in mind, I have assembled a runnable sample for you to review which hides the DropDownList via button interaction:

<button onclick="onHideShow()">Hide/Show DropDownList</button>

@(Html.Kendo().DropDownList()
    .Name("dropdownlist")
    .DataTextField("ProductName")
    .DataValueField("ProductID")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("RemoteDataSource_GetProducts", "DropDownList");
        });
    })
    .HtmlAttributes(new { style = "width: 100%" })
)

<script>
    function onHideShow(){
        var dropdownlistWrapper = $("#dropdownlist").data("kendoDropDownList").wrapper;
        dropdownlistWrapper.toggleClass("k-hidden");
    }
</script>

And obtain both the value and textual content of the component by using the .value() and .text() methods. Notice, that the values are passed via the "success" callback for a simulated ajax request:

<script>
    function onMakeAjaxCall(){
        $.ajax({
            method: "GET",
            url: "@Url.Action("RemoteDataSource_GetProducts", "DropDownList")",
            dataType: "json",
            success: function(response){
                var dropdownlistValue = $("#dropdownlist").data("kendoDropDownList").value();
                var dropdownlistText = $("#dropdownlist").data("kendoDropDownList").text();
                alert(`Text: ${dropdownlistText} Value: ${dropdownlistValue}`)
            }
        });
    }   
</script>  

Here is a Telerik REPL example for you to review that further showcases the mentioned above:

• Telerik REPL for ASP.NET Core Example

As well as a visual incarnation of the produced result:

Finally, I would like to mention that I noticed there is no active support license associated with your account. Which overall limits our support service. In order to take full advantage of all the newly inducted features, bug fixes, and support service I recommend either renewing or acquiring a new license. You can find our Support Plans in the following resource:

• Support Plans

I hope this helps.

Kind Regards,
Alexander
Progress Telerik