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>