KendoUI example of creating a pop-up window. When clicking the create folder button on the folder manager page, a create folder form will pop up in KendoUI.
FolderManager.cshtml
@using Entities.Enums
@model ViewComponentLibrary.Areas.Admin.Models.Cms.Folders.FolderTreeModel
@{
ViewBag.Title = "Template manager";
Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
ViewBag.BodyClass = "content-index index full-width Forms";
}
<div class="dashboardOuter folderManagerContent content-index">
<div class="dashboardHeadings">
<div class="dashboardInfo"> <h1><span class="dashDetail">@Model.RootFolder.ToString()</span> <span class="infoDetail">manager</span></h1> </div>
</div>
<div class="templateManagerInner">
@Html.Partial("FolderTree", Model)
</div>
<div id="btnCreateFolder">
<button class='js_createFolder createFolder b-text b-table-nav' style="height: 35px; margin-top: 10px;"><span class="icon-Folder-add assetIcon"></span>Create folder</button>
</div>
</div>
<div id="window" class="bg-white"></div>
<style>
[REDACTED]
</style>
<script type="text/javascript">
$(document).ready(function () {
SelectedMenuItem($(".menuUtilities"));
$("#btnCreateFolder").click(function (event) {
var window = $("#window").kendoWindow({
scrollable: false,
width: "50%",
content: "/Admin/FolderingSubsite/CreateFolder?folderId=" + @Model.RootFolderId + "&subsiteId=" +@Model.SubSiteId,
close: function (e) {
$(this.element).empty();
}
}).data("kendoWindow");
window.center().open();
window.title("Create Folder");
});
});
</script>
_createFolder.cshtml
@model ViewComponentLibrary.Areas.Admin.Models.Cms.Folders.FolderItem
<div id="content-index-page">
<div id="page">
<div class="sliderPanel">
<h1>Create Folder</h1>
@using (Html.BeginForm("CreateFolder", "FolderingSubsite", FormMethod.Post, new {id = "CreateFolderForm"}))
{
@Html.HiddenFor(m => m.Id)
@Html.HiddenFor(m => m.ParentFolderId)
@Html.HiddenFor(m => m.SubsiteId)
<div class="aqua-box">
<div class="block-elements max-500 no-padding">
@Html.LabelFor(model => model.Title, "Title")
@Html.TextBoxFor(model => model.Title, new { @class = "required txt", autocomplete = "off" })
@Html.ValidationMessageFor(model => model.Title)
</div>
</div>
<div class="controls">
<a class="btn cancel js_close_folder_window">Close</a>
<button type="submit" class="confirm"><span>Confirm</span></button>
</div>
}
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#CreateFolderForm").submit(function () {
event.preventDefault();
$.ajax({
method: "POST",
url: $(this).attr("action"),
data: $(this).serialize()
}).done(function (data) {
CloseWindow();
location.reload();
});
return false;
});
$(".js_close_folder_window").click(function () {
CloseWindow();
});
function CloseWindow() {
$("#window").kendoWindow();
var dialog = $("#window").data("kendoWindow");
dialog.close();
};
});
</script>
Created: 24-Jul-2023