Hi there,
i have a window with a form. in these form there are three fields bound to my model.
One of the fields shouldn't be visible when the window was opened.
Here is the html helper code:
@{Html.Kendo().Window()
.Name("MeterData" + Model.Plan["Number"])
.Title("Vertragskontonummer: " + Model.PlanAccount.PlanAccount.Number + " Vertrags-Nr.: " + Model.Plan["Number"])
.Content(@<text>
<div class="window-plan-content">
<partial name="_PlanDetailData" />
<div style="padding-top: 20px; width: 100%;">
<div class="row window-form-content" style="border-radius: 13px 13px;">
<span class="accordeon-text-header" style="padding: 20px 0px 0px 20px;">Neuen Zählerstand angeben:</span>
</div>
<div class="row window-form-content">
<span class="accordeon-text" style="padding-top: 10px; padding-bottom: 20px; padding-left: 20px;">
Hier können Sie Ihren aktuellen Zählestand eingeben. Um sicher zu sein, dass Sie den richtigen Zähler<br />
abgelesen haben, sehen Sie hier Ihre zuletzt angegebene Zählernummer, die mit der Nummer auf Ihrem zähler<br />
übereinstimmen sollte.
</span>
</div>
<div class="row window-form-content" style="border-radius: 0px 0px 13px 13px;">
@(Html.Kendo().Form<Wsw.MeineWsw.Dks.Models.LastMeterReading>()
.Name("MeterDataDetailsForm")
.HtmlAttributes(new { action = "SaveMeterData", method = "PUT", style = "width: 100%;"})
.Layout("grid")
.ButtonsTemplate("<button id=\"closeMeterDetails" + Model.Plan["Number"] + "\" class=\"k-button open-modal-box\">Zurück</button><button id=\"submit-meter\" class=\"k-button k-primary k-form-submit open-modal-box\" type=\"submit\" planAccount=\"" + Model.PlanAccount.PlanAccount.Number + "\" plan=\"" + Model.Plan["Number"] + "\" meterNumber=\"" + Model.PlanAccount.Meters.Where(m => m.PlanAccountNumber == Model.PlanAccount.PlanAccount.Number).FirstOrDefault().Number + "\" registerKind=\"" + Model.PlanAccount.Meters.Where(m => m.PlanAccountNumber == Model.PlanAccount.PlanAccount.Number).FirstOrDefault().RegisterKind + "\" disabled=\"true\">Zählerstand übernehmen</button>")
.Grid(g => g.Cols(1).Gutter(20))
.Validatable(v =>
{
v.ValidateOnBlur(true);
v.ValidationSummary(vs => vs.Enable(false));
})
.Items(items =>
{
items.AddGroup()
.Layout("grid")
.Grid(g => g.Cols(2).Gutter(10))
.Items(i =>
{
i.Add()
.Field(f => f.Value)
.Label("Neuen Zählerstand angeben:")
.Editor(e => e.NumericTextBox().Spinners(false).Format("n0"))
.InputHtmlAttributes(new { style = "border-radius: 8px;" });
i.Add()
.Field(f => f.Date)
.Label("Ablesedatum")
.InputHtmlAttributes(new { style = "border-radius: 8px;" })
.Editor(e => e.DateInput().Format("dd.MM.yyyy").Messages(m => m.Day("tt").Month("mm").Year("jjjj")).Max(DateTime.Now).Min(DateTime.Now.AddDays(-14)));
i.Add()
.Field(f => f.Comment)
.Label("Kommentar")
.Id("ReadingComment")
.InputHtmlAttributes(new { style = "border-radius: 8px;" });
});
})
.Events(ev => ev.Submit("onFormSubmitMeter").Change("validateMeterForm")))
</div>
</div>
</div>
</text>
)
.Visible(false)
.Modal(true)
.Draggable(true)
.Scrollable(false)
.Width(1085)
.Height(746)
.Events(e => e.Activate("toogleMeterReadingCommentVisibility"))
.Render();
}And here is the way I tried to toogle the visibility of the field:
function toogleMeterReadingCommentVisibility(e) {
var parentEle = document.getElementById('ReadingComment-form-label').parentNode;
parentEle.style.display = 'none';
console.log(parentEle);
}After setting display = 'none' the DOM-Element has changed as expected, but only in the console. The field is still visibile.
Thanks for help.
Timo
Never mind... I found out, that there are more than one window with identical element-ids.
I fixed that and now it works like a charm.
Sorry for your trouble.