Skip to content

Commit

Permalink
Sync with Kendo UI Professional
Browse files Browse the repository at this point in the history
  • Loading branch information
Kendo Bot committed Jan 14, 2020
1 parent 22a1a6b commit febb27d
Show file tree
Hide file tree
Showing 50 changed files with 1,947 additions and 280 deletions.
3 changes: 2 additions & 1 deletion docs-aspnet/_config-mvc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -371,7 +371,8 @@ defaults:
path: "html-helpers/navigation/breadcrumb"
values:
title_prefix: "MVC Breadcrumb Component"
-
title: "Breadcrumb"
-
scope:
path: "html-helpers/navigation/button"
values:
Expand Down
2 changes: 2 additions & 0 deletions docs-aspnet/_config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -326,6 +326,8 @@ navigation:
title: "Layout"
"html-helpers/navigation":
title: "Navigation"
"html-helpers/navigation/breadcrumb":
title: "Breadcrumb"
"html-helpers/navigation/radiobutton":
title: "RadioButton"
"html-helpers/navigation/menu/contextmenu":
Expand Down
6 changes: 6 additions & 0 deletions docs-aspnet/accessibility/accessibility-compliance-core.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@
<td>AAA</td>
<td>n/a</td>
</tr>
<tr>
<td>Breadcrumb</td>
<td>Yes</td>
<td>AA</td>
<td><a href="http://demos.telerik.com/aspnet-core/breadcrumb/keyboard-navigation">Yes</a></td>
</tr>
<tr>
<td>Button</td>
<td>Yes</td>
Expand Down
6 changes: 6 additions & 0 deletions docs-aspnet/accessibility/accessibility-compliance-mvc.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@
<td>AAA</td>
<td>-</td>
</tr>
<tr>
<td>Breadcrumb</td>
<td>Yes</td>
<td>AA</td>
<td><a href="http://demos.telerik.com/aspnet-core/breadcrumb/keyboard-navigation">Yes</a></td>
</tr>
<tr>
<td>Button</td>
<td>Yes</td>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,63 @@ page_title: Local Binding
description: "Learn how to implement Local Binding with Telerik UI FileManager HtmlHelper for {{ site.framework }}."
slug: htmlhelpers_filemanager_aspnetcore_localbinding
position: 1
published: false
---

# Local Data

The {{ site.product }} FileManager enables you to bind it to local arrays of data.


To bind the FileManager to local data, set the `dataSource` option of the `kendoFileManager` object. The data should correspond ot the FileManager built-in model schema (see [Data Binding Overview]({% slug bindingoverview_kendoui_filemanager_widget %}) article)

```dojo
// Define the HTML div that will contain the FileManager.
<div id="filemanager"></div>
// Initialize the FileManager with local data.
<script>
var myData = [
{
name: "Folder",
isDirectory: true,
hasDirectories: false,
path: "folder",
extension: "",
size: 0,
createdUtc: new Date(),
items: [
{
name: "Image.jpg",
isDirectory: false,
hasDirectories: false,
path: "folder/Image.jpg",
extension: ".jpg",
size: 20,
createdUtc: new Date(),
},
{
name: "Image2.jpg",
isDirectory: false,
hasDirectories: false,
path: "folder/Image2.jpg",
extension: ".jpg",
size: 20,
createdUtc: new Date(),
}
]
}
];
$("#filemanager").kendoFileManager({
dataSource: {
schema: kendo.data.schemas.filemanager,
data: myData
}
});
</script>
```

* [Overview of Kendo UI FileManager]({% slug overview_kendoui_filemanager_widget %})
* [Sort in Kendo UI FileManager]({% slug sort_kendoui_filemanager_widget %})
* [Toolbar Commands in Kendo UI FileManager]({% slug toolbar_kendoui_filemanager_widget %})
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,145 @@ position: 0
---

# DataBiding Overview

Depending on the configuration of its [DataSource]({% slug htmlhelpers_datasource_aspnetcore %}), the {{ site.product_short }} FileManager provides different types of data binding.


## Remote Binding

The {{ site.product }} FileManager provides its own `ContentProviderController` which you need to inherit, in order to use the inbuilt `read`, `create`, `update` and `destroy` methods. As those as virtual methods, they can be overwritten and extended.


To bind the FileManager to remote data, specify the `dataSource` option and supply the object with the needed endpoints for `read`, `create`, `update` and `destroy` operations. The following example demonstrates such implementation, where the FileManagerData inherits the `ContentProviderController`:

```Razor
@(Html.Kendo().FileManager()
.Name("filemanager")
.DataSource(ds =>
{
ds.Read(operation => operation
.Type(HttpVerbs.Post)
.Action("Read", "FileManagerData")
);
ds.Destroy(operation => operation
.Type(HttpVerbs.Post)
.Action("Destroy", "FileManagerData")
);
ds.Create(operation => operation
.Type(HttpVerbs.Post)
.Action("Create", "FileManagerData")
);
ds.Update(operation => operation
.Type(HttpVerbs.Post)
.Action("Update", "FileManagerData")
);
})
.UploadUrl("Upload", "FileManagerData")
)
```
```Controller
// GET: /FileManager/
private const string contentFolderRoot = "~/Content/";
private const string prettyName = "Folders/";
private static readonly string[] foldersToCopy = new[] { "~/Content/shared/filemanager" };
/// <summary>
/// Gets the base paths from which content will be served.
/// </summary>
public override string ContentPath
{
get
{
return CreateUserFolder();
}
}
/// <summary>
/// Gets the valid file extensions by which served files will be filtered.
/// </summary>
public override string Filter
{
get
{
return "*.*";
}
}
private string CreateUserFolder()
{
var virtualPath = Path.Combine(contentFolderRoot, "UserFiles", prettyName);
var path = Server.MapPath(virtualPath);
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
foreach (var sourceFolder in foldersToCopy)
{
CopyFolder(Server.MapPath(sourceFolder), path);
}
}
return virtualPath;
}
private void CopyFolder(string source, string destination)
{
if (!Directory.Exists(destination))
{
Directory.CreateDirectory(destination);
}
foreach (var file in Directory.EnumerateFiles(source))
{
var dest = Path.Combine(destination, Path.GetFileName(file));
System.IO.File.Copy(file, dest);
}
foreach (var folder in Directory.EnumerateDirectories(source))
{
var dest = Path.Combine(destination, Path.GetFileName(folder));
CopyFolder(folder, dest);
}
}
```



The following list provides information about the default requests and responses for the `create`, `read`, `destroy` operations.

- `Create`&mdash;Makes a `POST` request for the creation of a directory with the following parameters.

{"Name":"...","Size":0,"Path":"...","Extension":".txt","IsDirectory":...,"HasDirectories":...,"Created":"...","CreatedUtc":"...","Modified":"...","ModifiedUtc":"..."}

- `Read`&mdash;Makes a `POST` request that contains the `path` parameter to specify the path which is browsed and expects a file listing in the following format:

[
{"Name":"Documents","Size":0,"Path":"Documents","Extension":"","IsDirectory":true,"HasDirectories":false,"Created":"\/Date(1578897289317)\/","CreatedUtc":"\/Date(1578897289317)\/","Modified":"\/Date(1578897289332)\/","ModifiedUtc":"\/Date(1578897289332)\/"},
...
]


- `Destroy`&mdash;Makes a `POST` request containing `FormData` with the following parameters:

- `Name`&mdash;The file or directory to be deleted.
- `Path`&mdash;The directory in which the file or the directory resides.
- `Extension`&mdash; The extension of the deleted file. No extension in the data, if a folder is deleted.
- `Size`&mdash The file size, as provided by the `read` response.
- `IsDirectory`&mdash; Boolean, specifying if the deleted is a file or not.
- `HasDirectories`&mdash; Boolean, specifying if the deleted contains folders.
- `Created`&mdash; Created Date of the deleted item.
- `CreatedUtc`&mdash; Created Date in UTC format of the deleted item.
- `Modified`&mdash; Modified Date of the deleted item.
- `mModifiedUtc`&mdash; Created Date in UTC formats of the deleted item.

- `Update`&mdash;Makes a `POST` request, containing the `FileEntry` object. The expected response is a `file` object in the following format:

{"Name":"...","Size":0,"Path":"...","Extension":".txt","IsDirectory":...,"HasDirectories":...,"Created":"...","CreatedUtc":"...","Modified":"...","ModifiedUtc":"..."}


## See Also
* [Overview of {{ site.product }} FileManager]({% slug htmlhelpers_filemanager_aspnetcore_overview %})
* [Navigation in {{ site.product }} FileManager]({% slug htmlhelpers_filemanager_aspnetcore_navigation %})
* [Preview Panes in {{ site.product }} FileManager]({% slug htmlhelpers_filemanager_aspnetcore_previewpane %})

​​​​​​​ 
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ page_title: Remote Binding
description: "Learn how to implement Remote Binding with Telerik UI FileManager HtmlHelper for {{ site.framework }}."
slug: htmlhelpers_filemanager_aspnetcore_remotebinding
position: 2
published: false
---

# Remote Data

Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ page_title: Server Operations
description: "Learn how to implement different Server Operations with Telerik UI FileManager HtmlHelper for {{ site.framework }}."
slug: htmlhelpers_filemanager_aspnetcore_serveroperations
position: 3
published: false
---

# Server Operations
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,27 @@ slug: htmlhelpers_filemanager_aspnetcore_contextmenu
position: 3
---

# ContextMenu

# ContextMenu in FileManager
The {{ site.product }} FileManager's ContextMenu enables you to easily execute FileManager commands on the selected file or folder.

The component uses the {{ site.product }} ContextMenu, enabling you to get full advantage of its [Client API](/api/javascript/ui/filemanager). Once an item is selected, the corresponding command is executed.

The default items in the ContextMenu are `rename` and `delete`. You can define your custom items which can execute custom commands. You can also manage what items should be visible, by enumerating the needed ones in the initialization of the component (see Example below)

@(Html.Kendo().FileManager()
.Name("filemanager")
.ContextMenu(context => context.Items(items =>
{
items.Add("rename");
items.Add("delete");
}))
...
)

## See Also

* [Overview of FileManager]({% slug htmlhelpers_filemanager_aspnetcore_overview %})
* [Drag and Drop FileManager]({% slug htmlhelpers_filemanager_aspnetcore_dragndrop %})
* [Navigation in FileManager]({% slug htmlhelpers_filemanager_aspnetcore_navigation %})

Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,20 @@ position: 4
---

# Drag and Drop Overview

The {{ site.product }} FileManager provides inbuilt Drag and Drop functionality, which allows dragging and dropping files from the FileManager view(GridView, ListView) to the TreeView and vice versa. The functionality is enabled by default and it can be controlled by the `Draggable` option.


The following example demonstrated how to disable the Drag and Drop functionality of the FileManager:

@(Html.Kendo().FileManager()
.Name("filemanager")
.Draggable(false)
...
)

## See Also

* [Overview of {{ site.product }} FileManager]({% slug htmlhelpers_filemanager_aspnetcore_overview %})
* [Preview Panes in {{ site.product }} FileManager]({% slug htmlhelpers_filemanager_aspnetcore_previewpane %})
* [ToolbarCommands in{{ site.product }} FileManager]({% slug htmlhelpers_filemanager_aspnetcore_toolbar %})
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions docs-aspnet/html-helpers/data-management/filemanager/navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,21 @@ position: 5

# Navigation Overview

The navigation within the file structure in the {{ site.product }} FileManager is achieved with the help of an inbuilt [TreeView](#treeview) and [Breacrumb](#breadcrumb) components.

## TreeView
On the left-hand side of the FileManager there is a nested [{{ site.product }} TreeView]({% slug htmlhelpers_treeview_aspnetcore %}) component, listing all folders loaded in the FileManager. The TreeView allows dragging and dropping files inside it, or between the Grid and ListView. It also provides you the possibility to rename files or folders, as well as execute commands with the inbuilt ContextMenu.

The nested [{{ site.product }} TreeView]({% slug htmlhelpers_treeview_aspnetcore %}) component is the standard component from the {{ site.product }} suite. This is why, all functionalities and features, such as Keyboard Support and Accessibility compliance, are inherited.

## Breadcrumb

As for R1 2020, the [{{ site.product }} Breadcrumb]({% slug htmlhelpers_breadcrumb_aspnetcore_overview %}) component is added to the Kendo UI suite and it is incorporated in the FileManager for easy navigation.

## See Also

* [Overview of Kendo UI FileManager]({% slug htmlhelpers_filemanager_aspnetcore_overview %})
* [Kendo UI TreeView]({% slug htmlhelpers_treeview_aspnetcore %})
* [Breadcrumb]({% slug htmlhelpers_breadcrumb_aspnetcore_overview %})
* [Sort in Kendo UI FileManager]({% slug htmlhelpers_filemanager_aspnetcore_sort %})
* [Search in Kendo UI FileManager]({% slug htmlhelpers_filemanager_aspnetcore_search %})
Loading

0 comments on commit febb27d

Please sign in to comment.