ich muss einen Treeview (bootstrap-treeview von Jon Miles) mit Daten füllen. Aufgabe dieses Treeviews ist eine Auswahl an Datensätzen anzuzeigen, die man dann als Vorlage zum Kopieren auswählt.
Da dieser Treeview aber nicht immer benötigt wird, wäre es sinnvoll ihn erst zu füllen wenn er wirklich gebraucht wird.
Dieser Tree ist derzeit in einem hidden modalen Dialog untergebracht und bekommt seine Daten als Json-Text über den ViewBag.
Nun möchte ich quasi in dem Moment wenn der modale Dialog sichtbar wird erst die Daten laden.
Idee war eine Action (JsonResult) mittels Ajax anzutriggern und die empfangenen Daten dann dem Treeview zuzuweisen.
Blöderweise muss dafür aber anscheinend die View neu geladen werden.
Wie könnte man so ein "popup"-Treeview anders erzeugen oder die Daten eben später in die View laden?
Das modale view derzeit:
<!-- ################### Modaler Dialog zur Auswahl Copy ###################### -->
<div class="modal fade" id="copyDialog" tabindex="-1" role="dialog" aria-labelledby="copyDialogLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h5 class="modal-title" id="copyDialogLabel">Funktionsgruppe aus Vorlage kopieren</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- Body -->
<div class="modal-body">
<form id="functionSelectForm">
<div id="copyTree" class=""></div>
</form>
</div>
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
<button type="button" class="btn btn-primary" id="copyDialogOk">Ok</button>
</div>
</div>
</div>
</div>
Die Initialisierung sieht derzeit so aus:
<!-- SCRIPTSECTION -->
<script type="text/javascript">
// ########## COPYTREE #############
//CopyTree Initialisieren
var CopyTree;
var treeData = @Html.Raw(ViewBag.copyData);
CopyTree = $('#copyTree').treeview({
data: treeData,
showCheckbox: true,
checkedIcon: "far fa-check-circle",
uncheckedIcon: "far fa-circle",
expandIcon: "fa fa-caret-right",
collapseIcon: "fa fa-caret-down",
emptyIcon: "fa",
selectedIcon: "fa fa-map-marker-alt",
showTags: true,
levels: 0,
enableLinks: true
});
…