Clipboard

By using the Grid clipboard functionality, you enable the user to perform the following copy and paste operations:

• Copy and paste cells from Excel to the Grid.
• Copy and paste cells both between different Grids and within the same Grid.
• Copy and paste cells from the Grid to Excel.

The paste operation supports two interaction modes:

• Replace—Replaces the Grid cell content with the copied content.
• Insert—Inserts the copied content as a new Grid row.
  

For runnable examples, refer to the following demos:

• Using the Grid clipboard functionality (Demo)
• Using the functionality to copy content from the Grid to Excel (Demo)
• Using the selection and export of the Grid to Excel (Demo)

Getting Started

To enable the clipboard feature, configure the Grid with the following settings:

• Add the AllowCopy(true) option to allow copying the selected cells into the clipboard.
• Add the AllowPaste(true) option enable the paste operation.
• Make the Grid selectable. For example, Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Cell)).
• Enable the Grid keyboard navigation (add the Navigatable() option) because the pasting works through the CTRL+V keyboard shortcut.
• Include the Paste() Toolbar command to display a dropdown control with the paste modes.

The following example demonstrates how to configure the Grid clipboard functionality that allows you to copy and paste content from Excel to the Grid and the other way around.

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("grid")
        .Columns(columns => {
            columns.Bound(o => o.ShipCountry);
            columns.Bound(p => p.Freight);
            columns.Bound(p => p.OrderDate).Format("{0:dd/MM/yyyy}");
        })
        .ToolBar(toolBar => toolBar.Paste())
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple)
            .Type(GridSelectionType.Cell))
        .AllowCopy(true)
        .AllowPaste(true)
        .Navigatable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Read(read => read.Action("Orders_Read", "Grid"))
        )
        .Pageable()
    )

When pasting content to the Grid, the value of each cell will be parsed based on the data type of the respective column field. For example, if a string value must be pasted into a cell, whose column binds to a numeric field, the result will be an empty cell (the parser returns null).

If you enable the Grid ContextMenu, the Paste (use CTRL/⌘ + V) will appear in the menu as a disabled option to inform the users they must use the CTRL+V key combination to trigger the paste operation.

Replace Mode

To activate the Replace mode, select the Paste (Replace) option in the Toolbar command of the Grid.

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("grid")
        .ToolBar(toolBar => toolBar.Paste()) // Displays a toolbar with a dropdown to select the paste mode.
        ...
    )

When the Replace mode is enabled, the paste operation will execute as follows:

• If a single cell is pasted into the Grid, it will replace the content of all currently selected Grid cells. For example, if the copied value is ABC and three Grid cells are selected, pressing CTRL+V will replace the content of the three cells with ABC.
• If multiple cells are pasted into the Grid, the component will replace the content of the same number of Grid cells. The update always starts from the first selected cell. For example, when copying two cells from Excel and selecting ten cells in the Grid, pressing CTRL+V will replace the content of the first two selected cells.
• At least one Grid cell must be selected to execute the paste operation. Based on the number of the copied cells, the Grid will automatically update the cells whose content must be replaced.

Insert Mode

To activate the Insert mode select the Paste (Insert) option in the Toolbar command of the Grid.

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("grid")
        .ToolBar(toolBar => toolBar.Paste()) // Displays a toolbar with a dropdown to select the paste mode.
        ...
    )

When the Insert mode is enabled, the paste operation will create a new Grid row with the copied content. The row will be inserted after the first selected Grid cell.

Events

The Data Grid exposes a Paste event. The event fires after the user pastes data by using the built-in paste functionality and it contains the following event fields:

• items—The pasted data from the last paste operation.
• type—The Replace or Insert paste mode.

The following example demonstrates how to subscribe to the Paste event.

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("grid")
        .ToolBar(toolBar => toolBar.Paste())
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple)
            .Type(GridSelectionType.Cell))
        .AllowPaste(true)
        .Navigatable()
        .Events(e => e.Paste("onPaste"))
        ...
    )

    <script>
        function onPaste(e){
            // Handle the Paste event.
            console.log(e.items);
            console.log(e.type);
        }
    </script>

See Also

• Copy to Excel by using the Grid HtmlHelper for ASP.NET MVC (Demo)
• Paste from Excel by using the Grid HtmlHelper for ASP.NET MVC (Demo)
• Select and Export to Excel by using the Grid HtmlHelper for ASP.NET MVC (Demo)
• Server-Side API of the Grid for ASP.NET MVC