diff --git a/docs/controls/data-management/grid/appearance.md b/docs/controls/data-management/grid/appearance.md index 974ad644880..d2954d1ab13 100644 --- a/docs/controls/data-management/grid/appearance.md +++ b/docs/controls/data-management/grid/appearance.md @@ -8,7 +8,7 @@ position: 5 # Appearance -[Kendo UI Grid widget](http://demos.telerik.com/kendo-ui/grid/index) supports various options for you to apply to your project by setting its layout and appearance that best match your needs. +The [Kendo UI Grid widget](http://demos.telerik.com/kendo-ui/grid/index) supports various options for you to apply to your project by setting its layout and appearance that best match your needs. ## Scrolling diff --git a/docs/controls/data-management/grid/data-binding.md b/docs/controls/data-management/grid/data-binding.md index ce77240fb79..8e5b8322117 100644 --- a/docs/controls/data-management/grid/data-binding.md +++ b/docs/controls/data-management/grid/data-binding.md @@ -9,7 +9,7 @@ position: 3 # Remote Data Binding -[Kendo UI Grid widget](http://demos.telerik.com/kendo-ui/grid/index) features a rapid templating engine and a built-in dataSource, which allow you to set up the widget very quickly and use it in your project. +The [Kendo UI Grid widget](http://demos.telerik.com/kendo-ui/grid/index) features a rapid templating engine and a built-in dataSource, which allow you to set up the widget very quickly and use it in your project. ## Bind to Remote Data diff --git a/docs/controls/data-management/grid/excel-export.md b/docs/controls/data-management/grid/excel-export.md index 3edf39df445..5d142e9ffe9 100644 --- a/docs/controls/data-management/grid/excel-export.md +++ b/docs/controls/data-management/grid/excel-export.md @@ -8,7 +8,7 @@ position: 8 # Excel Export -Since Kendo UI Q3 2014 (2014.3.1119) the Grid widget provides a built-in Excel export functionality. +As of the Kendo UI Q3 2014 (2014.3.1119) release, the Grid widget provides a built-in Excel export functionality. ## Set Up diff --git a/docs/controls/data-management/grid/pdf-export.md b/docs/controls/data-management/grid/pdf-export.md index fe60af1aecd..681f4a4f722 100644 --- a/docs/controls/data-management/grid/pdf-export.md +++ b/docs/controls/data-management/grid/pdf-export.md @@ -8,7 +8,7 @@ position: 9 # PDF Export -Since [Kendo UI Q3 2014 (2014.3.1119)](http://www.telerik.com/support/whats-new/kendo-ui/release-history/q3-2014) the Grid widget provides a built-in PDF export functionality. +As of the [Kendo UI Q3 2014 (2014.3.1119) release](http://www.telerik.com/support/whats-new/kendo-ui/release-history/q3-2014) the Grid widget provides a built-in PDF export functionality. ## Set Up diff --git a/docs/controls/data-management/grid/print-export.md b/docs/controls/data-management/grid/print-export.md index 7935cb91291..32dc250b144 100644 --- a/docs/controls/data-management/grid/print-export.md +++ b/docs/controls/data-management/grid/print-export.md @@ -23,7 +23,7 @@ Print the existing web page, but use a print stylesheet to hide the parts of the The example below demonstrates how to retrieve the Grid HTML, inject it in a new browser window, and trigger the printing of the new page. It also addresses some other important things you must keep in mind as follows: * If the Grid is scrollable, some rows or columns may not be visible on the printed paper. Make sure that during printing the Grid has no set height, and the scrollability of the data area is disabled. -* Depending on the column width, some of the cell content may not be fully visible. This problem is resolved by forcing an automatic `table-layout` to the Grid table, which disables the ellipsis (...). +* Depending on the column width, some of the cell content may not be fully visible. This problem is resolved by forcing an automatic `table-layout` to the Grid table, which disables the ellipsis (`...`). * Browsers repeat table headers on each printed page automatically. However, when the Grid is scrollable, it renders a separate table for the header area. Since the browser cannot understand the relationship between the two Grid tables, it will not repeat the header row. This problem is resolved by cloning the header row inside the data table. Printing a Grid with locked (frozen) columns is likely to produce misaligned columns, or rows, or a broken overall layout. In such cases it is advisable to use a separate print-friendly page with no frozen columns. @@ -38,7 +38,7 @@ Printing a Grid with locked (frozen) columns is likely to produce misaligned col //JavaScript - + function printGrid() { var gridElement = $('#grid'), printableContent = '', diff --git a/docs/controls/data-management/grid/walkthrough.md b/docs/controls/data-management/grid/walkthrough.md index 408acaa0416..3e6a6c7c9e6 100644 --- a/docs/controls/data-management/grid/walkthrough.md +++ b/docs/controls/data-management/grid/walkthrough.md @@ -8,7 +8,7 @@ position: 1 # Walkthrough -[Kendo UI Grid widget](http://demos.telerik.com/kendo-ui/grid/index) is a powerful piece of the Kendo UI framework and an essential part of almost any user interface. The Grid control is quick to set up and is packed with features like sorting, grouping, paging, and editing. +The [Kendo UI Grid widget](http://demos.telerik.com/kendo-ui/grid/index) is a powerful piece of the Kendo UI framework and an essential part of almost any user interface. The Grid control is quick to set up and is packed with features like sorting, grouping, paging, and editing. ## Initialize the Grid diff --git a/docs/jsp/tags/upload/metadata.md b/docs/jsp/tags/upload/metadata.md index 68ffa0d0f08..ca19c0900e1 100644 --- a/docs/jsp/tags/upload/metadata.md +++ b/docs/jsp/tags/upload/metadata.md @@ -1,22 +1,32 @@ --- -title: Metadata +title: Handling of Metadata +page_title: Handling of Metadata | Upload JSP Tag +description: "Use the synchronous and asynchronous operational modes of the Upload JSP tag in Kendo UI." +slug: metadata_upload_uiforjsp +position: 3 --- -Asynchronous uploading usually means that you lose the association betwen the files and the context that they originate from. +# Handling of Metadata -Take an e-mail application for example. The save handler must associate the uploaded files to a particular message. +Asynchronous uploading usually means that you lose the association between the files and the context that they originate from. Take an e-mail application, for example. The save handler must associate the uploaded files to a particular message. The message and the file might even be processed on different servers in a load balancing or a cloud-based scenario. -The message and the file even might be processed on different servers in a load balancing or a cloud-based scenario. +## Send and Receive Metadata -## Sending metadata to the save action +### Send Metadata to the Save Action You can add metadata directly on the client. This is useful when the data is not known in advance. -1. Add an input field for description. We will send its value to the save handler. +Below are listed the steps for you to follow when configuring the sending of metadata to the `save` action in the Kendo UI Upload. + +**Step 1** Add an `input` field for description. Send its value to the `save` handler. + +###### Example -2. Declare a handler for the upload event and attach a data object to the passed event. +**Step 2** Declare a handler for the `upload` event and attach a data object to the passed event. + +###### Example function onUpload(e) { e.data = { @@ -24,13 +34,17 @@ You can add metadata directly on the client. This is useful when the data is not }; } -3. Attach the event handler. +**Step 3** Attach the event handler. + +###### Example -4. Process the file and the associated description +**Step 4** Process the file and the associated description. + +###### Example @RequestMapping(value = "/events/save", method = RequestMethod.POST) public @ResponseBody String save(@RequestParam List files, @@ -43,13 +57,15 @@ You can add metadata directly on the client. This is useful when the data is not return ""; } -## Receiving metadata from the save handler +### Receive Metadata from the Save Handler + +The `save` handler can sometimes produce a result that needs to be routed back to the page. The Upload requires the response to be in JSON format with the Content-Type set to `"text/plain"`. Any non-empty response that is not JSON is treated as a server error. -The save handler can sometimes produce a result that needs to be routed back to the page. +Below are listed the steps for you to follow when configuring the receiving of metadata from the `save` action in the Kendo UI Upload. -The Upload requires the response to be in JSON format with Content-Type set to "text/plain". Any non-empty response that is not JSON will be treated as a server error. +**Step 1** Build the response. -1. Build the response +###### Example // When returning JSON the mime-type must be set to text/plain @RequestMapping(value = "/async/save", method = RequestMethod.POST, produces = "text/plain") @@ -60,16 +76,30 @@ The Upload requires the response to be in JSON format with Content-Type set to " return "{ \"status\": \"OK\" }"; } -2. Declare a handler for the [success event](/api/web/upload#success) and process the response +**Step 2** Declare a handler for the [`success` event](/api/javascript/ui/upload#success) and process the response. + +###### Example function onSuccess(e) { alert("Status: " + e.response.status); } -3. Attach the event handler +**Step 3** Attach the event handler. + +###### Example -The same approach is applicable for the remove handler as well. +The same approach is applicable for the `remove` handler as well. + +## See Also + +Other articles on Telerik UI for JSP and on the Upload: + +* [Overview of the Upload JSP Tag]({% slug overview_upload_uiforjsp %}) +* [Modes of Operation of the Upload JSP Tag]({% slug modesofoperation_upload_uiforjsp %}) +* [Overview of the Kendo UI Upload Widget]({% slug overview_kendoui_upload_widget %}) +* [Telerik UI for JSP API Reference Folder](/api/jsp/autocomplete/animation) +* [Telerik UI for JSP Tags Folder]({% slug overview_autocomplete_uiforjsp %}) diff --git a/docs/jsp/tags/upload/modes.md b/docs/jsp/tags/upload/modes.md index adde12fe64c..d048f5d914f 100644 --- a/docs/jsp/tags/upload/modes.md +++ b/docs/jsp/tags/upload/modes.md @@ -1,32 +1,48 @@ --- -title: Modes +title: Modes of Operation +page_title: Modes of Operation | Upload JSP Tag +description: "Use the synchronous and asynchronous operational modes of the Upload JSP tag in Kendo UI." +slug: modesofoperation_upload_uiforjsp +position: 2 --- -# Upload Modes -The Upload supports two modes of operation - synchronous and asynchronous. +# Modes of Operation -This help topic explains how to use these modes with the Spring MVC framework. -Please review the main [Upload Modes](/web/upload/modes) help topic for general information. +The Kendo UI Upload supports two modes of operation—synchronous and asynchronous. This article explains how to use these modes with the Spring MVC framework. -## Synchronous mode +For general information, refer to the article on the [widget's modes of operation]({% slug modes_upload_widget %}). -In this mode the upload is executed as part of the form submit (synchronously). No dedicated action methods are required. +## Synchronous Mode -1. Add a form declaration and set a controller action. +In the synchronous mode, the upload is executed synchronously, as part of the form submit. No dedicated action methods are required. + +### Configuration + +Below are listed the steps for you to follow when configuring the synchronous mode of operation for the Kendo UI Upload. + +**Step 1** Add a `form` declaration and set a `controller` action. + +###### Example
-2. Add the Upload inside the form. The only required setting is a Name. +**Step 2** Add the Upload inside the form. The only required setting is `name`. + +###### Example -3. Add a submit and reset buttons to the form. +**Step 3** Add a submit and reset buttons to the form. + +###### Example -4. The form should look like this: +**Step 4** The form should look like the one demonstrated in the example below. + +###### Example
@@ -34,7 +50,9 @@ In this mode the upload is executed as part of the form submit (synchronously). -5. Process the files in the action. It requires no special server handling compared to a regular input. +**Step 5** Process the files in the action. It requires no special server handling compared to a regular input. + +###### Example @RequestMapping(value = {"/", "/index"}, method = RequestMethod.POST) public String save(@RequestParam List files, Model model) { @@ -43,22 +61,27 @@ In this mode the upload is executed as part of the form submit (synchronously). return "web/upload/results"; } -## Asynchronous mode +## Asynchronous Mode In this mode the files are uploaded to a controller action without interrupting the user interaction with the page. -### Save handler +### Save Handler + +Below are listed the steps for you to follow when configuring the saving of the handler in the asynchronous mode of operation of the Kendo UI Upload. -1. Add the upload to the view: +**Step 1** Add the Upload to the view. + +###### Example - The name attribute is required and must be unique. - It will be used as a form field name in the requests to the server. +The `name` attribute is required and must be unique. It is used as a `form` field name in the requests to the server. + +**Step 2** Implement the **Save** controller action. -2. Implement the Save controller action: +###### Example @RequestMapping(value = "/async/save", method = RequestMethod.POST) public @ResponseBody String save(@RequestParam List files) { @@ -70,17 +93,23 @@ In this mode the files are uploaded to a controller action without interrupting return ""; } -### Remove handler +### Remove Handler + +Users can remove files after they are uploaded asynchronously. To enable this feature, a `Remove` action is needed. + +Below are listed the steps for you to follow when configuring the removing of the handler in the asynchronous mode of operation of the Kendo UI Upload. -Users can remove files even after they've been uploaded asynchronously. To enable this feature you need a Remove action. +**Step 1** Specify a `Remove` action. -1. Specify a Remove action +###### Example -2. Implement the Remove action. It takes a fileNames parameter of type string[] +**Step 2** Implement the `Remove` action. It takes a `fileNames` parameter of type `string[]`. + +###### Example @RequestMapping(value = "/async/remove", method = RequestMethod.POST) public @ResponseBody String remove(@RequestParam String[] fileNames) { @@ -91,14 +120,26 @@ Users can remove files even after they've been uploaded asynchronously. To enabl return ""; } -> The Remove action can be used as an attack vector if implemented poorly. Always sanitize the file names and verify that the user has the appropriate permissions before actually deleting any files. +> **Important** +> +> The `Remove` action can be used as an attack vector if implemented poorly. Always sanitize the file names and verify that the user has the appropriate permissions before actually deleting any files. + +### Disable Automatic Upload -### Disabling automatic upload +The selected files are uploaded immediately by default. You can change this behavior by setting `AutoUpload` to `false`. -The selected files will be uploaded immediately by default. -You can change this behavior by setting AutoUpload to false. +###### Example +## See Also + +Other articles on Telerik UI for JSP and on the Upload: + +* [Overview of the Upload JSP Tag]({% slug overview_upload_uiforjsp %}) +* [Sending and Receiving Metadata with the Upload JSP Tag]({% slug metadata_upload_uiforjsp %}) +* [Overview of the Kendo UI Upload Widget]({% slug overview_kendoui_upload_widget %}) +* [Telerik UI for JSP API Reference Folder](/api/jsp/autocomplete/animation) +* [Telerik UI for JSP Tags Folder]({% slug overview_autocomplete_uiforjsp %}) diff --git a/docs/jsp/tags/upload/overview.md b/docs/jsp/tags/upload/overview.md index bbeacd81726..a98b9da5e65 100644 --- a/docs/jsp/tags/upload/overview.md +++ b/docs/jsp/tags/upload/overview.md @@ -1,75 +1,100 @@ --- title: Overview +page_title: Overview | Upload JSP Tag +description: "Get started with the Upload JSP tag in Kendo UI." +slug: overview_upload_uiforjsp +position: 1 --- -# Upload +# Upload JSP Tag Overview -The Upload HtmlHelper extension is a server-side wrapper for the [Kendo UI Upload](/web/upload/overview) widget. +The Window JSP tag is a server-side wrapper for the [Kendo UI Window](/api/javascript/ui/upload) widget. ## Getting Started -The following example shows how to setup an asynchronous upload using the Spring MVC framework: +### Configuration -1. Make sure you have followed all the steps from the [Introduction](/jsp/introduction) help topic. +Below are listed the steps for you to follow when configuring an asynchronous upload using the Spring MVC framework. -2. Create a new action method which renders the view: +**Step 1** Make sure you followed all the steps from the [introductory article on Telerik UI for JSP]({% slug overview_uiforjsp %}). + +**Step 2** Create a new action method which renders the view. + +###### Example @RequestMapping(value = "/async", method = RequestMethod.GET) public String index() { return "web/upload/async"; } -3. Add the upload to the view: +**Step 3** Add the Upload to the view. + +###### Example -3 - The name attribute is required and must be unique. - It will be used as a form field name in the requests to the server. -4. Implement the Save controller action: +The name attribute is required and must be unique. It is used as a form field name in the requests to the server. + +**Step 4** Implement the **Save** controller action. + +###### Example @RequestMapping(value = "/async/save", method = RequestMethod.POST) public @ResponseBody String save(@RequestParam List files) { // Save the files // for (MultipartFile file : files) { // } - + // Return an empty string to signify success return ""; } -## Accessing an Existing Upload +## Event Handling + +### Subscribe to Events + +You can subscribe to all [events exposed by Kendo UI Upload](/api/javascript/ui/upload#events). -You can reference an existing Upload instance via [jQuery.data()](http://api.jquery.com/jQuery.data/). -Once a reference has been established, you can use the [API](/api/web/upload#methods) to control its behavior. +###### Example + + + + + + -### Accessing an existing Upload instance +## Reference - // Put this after your Kendo Upload for ASP.NET MVC declaration - +### Existing Instances +You are able to reference an existing Upload instance via the [`jQuery.data()`](http://api.jquery.com/jQuery.data/). Once a reference is established, you are able to use the [Upload API](/api/javascript/ui/upload#methods) to control its behavior. -## Handling Kendo UI Upload events +###### Example -You can subscribe to all [events](/api/web/upload#events) exposed by Kendo UI Upload: + // Put this after your Kendo Upload for ASP.NET MVC declaration + - - - +## See Also - +* [Modes of Operation of the Upload JSP Tag]({% slug modesofoperation_upload_uiforjsp %}) +* [Sending and Receiving Metadata with the Upload JSP Tag]({% slug metadata_upload_uiforjsp %}) +* [Overview of the Kendo UI Upload Widget]({% slug overview_kendoui_upload_widget %}) +* [Telerik UI for JSP API Reference Folder](/api/jsp/autocomplete/animation) +* [Telerik UI for JSP Tags Folder]({% slug overview_autocomplete_uiforjsp %})