Retrieving value from DropDownList before initial modal/pop-up rendering

[TW]

I developed an Editor template which is displayed as a modal/pop-up form used to update row data
values on a grid.  I need to show/hide sections on the form based on the values set on the
dropdownlist.  The show/hide functionality works when the dropdownlist value changes. 

However,  I need to set which sections/panels are hidden when the form initially loads before the page is rendered.
I’ve tried retrieving the selected option value in the $(document).ready() function as illustrated in the
source code I’ve included. However, the value/text is either null or undefined when the ready function is invoked.
After the  $(document).ready() function execution completes,  dropdownlist fields display the data from the grid correctly.

How would I go about retrieving the initial value of the dropdown lists before form is rendered in order to process the logic needed to
show / hide the appropriate sections on the form?


Listed below is source code from my EditTemplate:

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

        <div class="form-group">
            @Html.LabelFor(model => model.StepNumber, htmlAttributes: new { @class = "control-label col-md-2" })
            @Html.EditorFor(model => model.StepNumber)
            @Html.ValidationMessageFor(model => model.StepNumber, "", new { @class = "text-danger" })
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.TaskName, htmlAttributes: new { @class = "control-label col-md-2" })
            @Html.EditorFor(model => model.TaskName)
            @Html.ValidationMessageFor(model => model.TaskName, "", new { @class = "text-danger" })
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.ActionID, htmlAttributes: new { @class = "control-label col-md-2" })
            @(Html.Kendo().DropDownList().Name("ActionIDText").DataValueField("ID").DataTextField("ActionName")    
                        .OptionLabel("--select action--").BindTo((System.Collections.IEnumerable)ViewData["actions"])
                        .Value(Model.ActionIDText))
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ActionTarget, htmlAttributes: new { @class = "control-label col-md-2" })
            @(Html.Kendo().DropDownList().Name("ActionTarget")
                        .DataValueField("ID")
                        .DataTextField("ActionTarget")
                        .OptionLabel("--select target--")
                        .BindTo((System.Collections.IEnumerable)ViewData["targets"])
                        .Value(Model.ActionTarget))
        </div>
        <div id="UserPanel" style="display:none" class="form-group">
            @Html.LabelFor(model => model.UserID, htmlAttributes: new { @class = "control-label col-md-2" })
            @(Html.Kendo().DropDownList()
                        .Name("UserID").DataValueField("ID").DataTextField("FullName")
                        .OptionLabel("--select User--").BindTo((System.Collections.IEnumerable)ViewData["users"])
                        .Value(Model.UserID) )
        </div>
        <div id="GroupPanel" style="display:none" class="form-group">
                @Html.LabelFor(model => model.GroupID, htmlAttributes: new { @class = "control-label col-md-2" })
                @(Html.Kendo().DropDownList().Name("GroupIDText").DataValueField("ID").DataTextField("GroupName")
                                .OptionLabel("--select group--").BindTo((System.Collections.IEnumerable)ViewData["groups"])
                                .Value(Model.GroupIDText) )
        </div>
        <div id="SupervisorPanel" style="display:none" class="form-group">
                 @Html.Label("Supervisor", htmlAttributes: new { @class = "control-label col-md-2" })
                 @(Html.Kendo().DropDownList()
                        .Name("ManagerID").DataValueField("ID").DataTextField("FullName")
                        .BindTo((System.Collections.IEnumerable)ViewData["users"])
                        .OptionLabel("--select manager --").Value(Model.UserID) )
       </div>
}

<script>
    $(document).ready(function () {
        alert("read....");
        ConfigureIntialPanel();
        alert("done");
    });

    /* Set initial state of Panels  */
    function ConfigureIntialPanel() {

        var target = $("#ActionTarget option:selected").text();
        var targetvalue = $("#ActionTarget option:selected").val();
        alert('target = ' + target + '      targetvalue =' + targetvalue);

        var target2 = $("#ActionTarget").find("option:selected").text();
        var targetvalue2 = $("#ActionTarget").find("option:selected").prop("value");
        alert('target2 = ' + target2 + '      targetvalue2 =' + targetvalue2);

        if (targetvalue == "Individual") {
            $('#UserPanel').show();
            $('#GroupPanel').hide();
            $('#SupervisorPanel').hide();
            /* alert('targetvalue = Individuel   /   Panel = ' + panel); */
        }
        else if (targetvalue == "Group") {
            $('#UserPanel').hide();
            $('#GroupPanel').show();
            $('#SupervisorPanel').hide();
            /* alert('targetvalue = Groupd   /   Panel = ' + panel);  */
        }
        else if (targetvalue == "Supervisor") {
            $('#UserPanel').hide();
            $('#GroupPanel').hide();
            $('#SupervisorPanel').show();
            /*  alert('targetvalue = Super   /   Panel = ' + panel);  */
        }
        else {
            $('#UserPanel').hide();
            $('#GroupPanel').hide();
            $('#SupervisorPanel').hide();
            /* alert('targetvalue = **Unknown   /   Panel =' + panel);  */
        }
    };

</script>

<script>
            $('#ActionTarget').change(function () {
                var target = $('#ActionTarget option:selected').text();
                var targetvalue = $('#ActionTarget').val();
                 var panel = '#' + target + 'Panel';

                 if (targetvalue == "Individual") {
                     $('#UserPanel').show();
                     $('#GroupPanel').hide();
                     $('#SupervisorPanel').hide();
                 }
                 else if (targetvalue == "Group") {
                     $('#UserPanel').hide();
                     $('#GroupPanel').show();
                     $('#SupervisorPanel').hide();
                 }
                 else if (targetvalue == "Supervisor") {
                     $('#UserPanel').hide();
                     $('#GroupPanel').hide();
                     $('#SupervisorPanel').show();
                 }
            });

</script>

[Boyan Dimitrov]

Hello,

As far as I understand the main problem is that you need a way to access the model object before the edit form is displayed. The edit event of the Kendo UI Grid will show the edit form and I guess this is the reason why it does not work for your case. My suggestion would be to use custom command for editing instead of the default edit command. In this case you are able to call the editRow method in order to force displaying the edit popup form. Prior the opening it is possible to access the actual model object (the dropdownlist is bound to the actual model). 

The Grid / Custom command demo shows how to access the data item (model associated with the row which contains the custom button) when the custom command button is clicked. 

Regards,
Boyan Dimitrov
Progress Telerik