How to render the FileExplorer inside dialog
FileExplorer inside the dialog control
You can render thea FileExplorer control within a dialog by any of the following methods:,
- Loading it directly in dialog using its ‘contentUrl’.
- Rendering it using the dialog’s contentTemplate property.
ASP.NET MVC
Loading FileExplorer directly in dialog using its ‘contentUrl’
To achieve this requirement, you need to pass the FileExplorer view page URLurl via model to the dialog’s contentUrl property. After that, you need to call the FileExplorer adjustSize method to adjust FileExplorer display within the rendered dialog component.
Refer to the following code snippet.Please check below code snippet,
C#
[Index.cshtml]
@{
Html.EJ()
.Dialog("dialog")
.Title("Dialog")
.ContentType("ajax")
.ShowOnInit(true)
.ClientSideEvents(e => e.Open("onDialogOpen"))
.EnableModal(true)
.Width("70%")
.Height("70%")
.IsResponsive(true)
.EnableResize(false)
.Render();
}
<script>
//Button click event function to open dialog
function OpenDialog() {
var dialogObj = $("#dialog").ejDialog("instance");
if (!isFileExplorerInit) {
dialogObj.option("contentUrl", "/Home/FileExplorer");
}
dialogObj.open();
}
//Dialog open event function
function onDialogOpen(args) {
if (!isFileExplorerInit) {
var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");
//To adjust FileExplorer size within rendered dialog
fileExplorerObj.adjustSize();
isFileExplorerInit = true;
}
}
<script>
C#
[FileExplorer.cshtml]
@Html.EJ().FileExplorer("fileExplorer").Width("100%").Height("100%").FileTypes("*.png, *.jpg, *.jpeg").ClientSideEvents(e => { e.Select("OnSelect"); }).Path("~/content/images/FileExplorer/").Layout(LayoutType.Tile).AjaxAction(@Url.Content("/Home/FileActionDefault")).IsResponsive(true).ShowContextMenu(false).AllowMultiSelection(false).Tools(tools => tools.AddressBar(addressBar).Navigation(navigation).Editing(editing).SearchBar(searchBar)).ToolsList(toolsList).ClientSideEvents(cc=>cc.Create("filecreate"))
@Html.EJ().ScriptManager()
If unobtrusive mode is enabled, you shouldneed to call the ej.widget.init() method in dialog AJAX success callback event in order to load the FileExplorer control from partial view. Refer to the following code sample.Please refer to below code block,
Javascript
//Dialog ajax success callback function
function success(e) {
ej.widget.init();
}
Final output
Sample:
Rendering FileExplorer using the dialog’s contentTemplate property
To achieve this requirement, you need to render the FileExplorer inside the dialog’s contentTemplate property. After that, you need to call the FileExplorer adjustSize method to adjust FileExplorer display within the rendered dialog component.
Refer to the following code sample.Please check below code block,
C#
[Index.cshtml]
@{
Html.EJ()
.Dialog("dialog")
.Title("Dialog")
.ContentType("ajax")
.ShowOnInit(true)
.ClientSideEvents(e => e.Open("onDialogOpen"))
.EnableModal(true)
.Width("70%")
.Height("70%")
.ContentTemplate(@<div>@Html.EJ().FileExplorer("fileExplorer").FileTypes("*.png, *.gif, *.jpg, *.jpeg, *.docx").Path("~/content/images/FileExplorer/").AjaxAction(@Url.Content("/Home/FileActionDefault")).IsResponsive(true).Width("100%").MinWidth("150px").ShowContextMenu(false).AllowMultiSelection(false).Tools(tools => tools.AddressBar(addressBar).Navigation(navigation).Editing(editing).SearchBar(searchBar)).ToolsList(toolsList)</div>)
.IsResponsive(true)
.EnableResize(false)
.Render();
}
<script>
//Button click event function to open dialog
function OpenDialog() {
var dialogObj = $("#dialog").ejDialog("instance");
dialogObj.open();
//To restore dialog size based on FileExplorer
dialogObj.restore();
}
//Dialog open event function
function onDialogOpen(args) {
if (!isFileExplorerInit) {
var fileExplorerObj = $("#fileExplorer").data("ejFileExplorer");
//To adjust FileExplorer size within rendered dialog
fileExplorerObj.adjustSize();
isFileExplorerInit = true;
}
}
<script>
Final output
Sample:
https://github.com/SyncfusionExamples/EJ1-floating-file-manager-using-dialog-control
