You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: "With Telerik UI Grid for {{ site.framework }} you can enable users to select specific cells and export them to Excel or Telerik UI Chart"
5
5
slug: exportingselection_gridhelper_aspnetcore
6
6
position: 6
7
7
---
8
8
9
-
# Selection Export
9
+
# Selection & Export
10
10
11
11
The Grid widget allows users to select specific cells and then to export them to Excel or a Telerik UI Chart for {{ site.framework }} .
12
12
@@ -16,6 +16,8 @@ For runnable example, refer to the [Demo on copying/exporting selected cells](ht
16
16
17
17
The following sections provide step-by-step instructions and examples on getting started with the Grid Selection Export functionality.
18
18
19
+
> The selection export functionality relies on the client-side Grid API. In this example, a Telerik UI ContextMenu is used to execute Grid methods related to copying and exporting of the selected cells.
20
+
19
21
### Enabling Excel Export
20
22
21
23
1. Configure the [Selectable]({% slug htmlhelpers_grid_aspnetcore_selection %}) property and apply the following settings:
@@ -30,9 +32,6 @@ The following sections provide step-by-step instructions and examples on getting
items.Add().Text("Copy").HtmlAttributes(new { id = "copy" });
62
+
items.Add().Text("Copy with Headers").HtmlAttributes(new { id = "copyWithHeaders" });
63
+
items.Add().Separator(true);
64
+
items.Add().Text("Export").HtmlAttributes(new { id = "export" });
65
+
items.Add().Text("Export with Headers").HtmlAttributes(new { id = "exportWithHeaders" });
66
+
items.Add().Text("Export to Chart").HtmlAttributes(new { id = "exportToChart" });
67
+
})
68
+
.Events(ev => ev.Select("onSelect"))
69
+
)
70
+
71
+
1. Define the event handling function.
72
+
73
+
```javascript
74
+
function onSelect(e) {
75
+
var item = e.item.id;
76
+
77
+
switch (item) {
78
+
case "copy":
79
+
copySelected();
80
+
break;
81
+
case "copyWithHeaders":
82
+
copySelectedWithHeaders();
83
+
break;
84
+
case "export":
85
+
exportSelected();
86
+
break;
87
+
case "exportWithHeaders":
88
+
exportSelectedWithHeaders();
89
+
break;
90
+
case "exportToChart":
91
+
exportToChart();
92
+
break;
93
+
default:
94
+
break;
95
+
};
96
+
}
97
+
```
98
+
45
99
### Copying Selected Data
46
100
47
101
To enable users to copy the selected data, call the [`copySelectionToClipboard`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/copyselectiontoclipboard) method.
kendo.alert("Please select cells before copying.");
109
+
return;
110
+
}
111
+
112
+
grid.copySelectionToClipboard(false);
113
+
}
64
114
65
-
1. On click of the `Copy Selected` button, copy the selected cells:
115
+
function copySelectedWithHeaders() {
116
+
let selected = grid.select();
66
117
67
-
<script>
68
-
$(".k-grid-copy").on("click", function (e) {
69
-
e.preventDefault();
70
-
var grid = $("#grid").data("kendoGrid");
71
-
let selected = grid.select();
118
+
if (selected.length === 0) {
119
+
kendo.alert("Please select cells before copying.");
120
+
return;
121
+
}
72
122
73
-
/* Set to true in order to copy the headers as well. */
74
-
grid.copySelectionToClipboard(false);
75
-
});
76
-
</script>
123
+
grid.copySelectionToClipboard(true);
124
+
}
125
+
```
77
126
78
-
### Exporting Selected Data
127
+
### Exporting Selected Data to Excel
79
128
80
129
To enable users to export the selected data, call the [`exportSelectedToExcel`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/exportselectedtoexcel) method.
kendo.alert("Please select cells before exporting.");
137
+
return;
138
+
}
139
+
grid.exportSelectedToExcel(false);
140
+
}
97
141
98
-
1. On click of the `Export Selected` button, export the selected cells.
142
+
functionexportSelectedWithHeaders() {
143
+
let selected =grid.select();
99
144
100
-
<script>
101
-
$(".k-grid-export").on("click", function (e) {
102
-
e.preventDefault();
103
-
var grid = $("#grid").data("kendoGrid");
104
-
let selected = grid.select();
145
+
if (selected.length===0) {
146
+
kendo.alert("Please select cells before exporting.");
147
+
return;
148
+
}
105
149
106
-
/* Set to true in order to export the headers as well. */
107
-
grid.exportSelectedToExcel(false);
108
-
});
109
-
</script>
150
+
grid.exportSelectedToExcel(true);
151
+
}
152
+
```
110
153
111
154
### Exporting Selected Data to Chart
112
155
113
-
To enable users to export the selected data to a Telerik UI Chart, call the [`getSelectedData`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/getselecteddata) method and initialize a Chart widget with the data.
156
+
To enable users to export the selected data to a Kendo UI Chart, call the [`getSelectedData`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/getselecteddata) method and initialize a Chart widget with the data.
114
157
115
158
1. Add an empty div before initializing the Grid.
116
159
117
160
<div id="chart-container"></div>
118
161
119
-
1. Define a custom command in the toolbar.
120
-
121
-
@(Html.Kendo().Grid<OrderViewModel>()
122
-
.Name("grid")
123
-
.ToolBar(tools => {
124
-
tools.Custom().Name("exportChart").Text("Export Selected To Chart").IconClass("k-icon k-i-column-clustered");
125
-
})
126
-
.Selectable(selectable => selectable
127
-
.Mode(GridSelectionMode.Multiple)
128
-
.Type(GridSelectionType.Cell))
129
-
.DataSource(dataSource => dataSource
130
-
.Ajax()
131
-
.Read(read => read.Action("Orders_Read", "Grid"))
132
-
)
133
-
)
134
-
135
-
1. On click of the `Export Selected To Chart` button, initialize a Kendo UI Chart inside a Kendo UI Window with the selected data.
136
-
137
-
<script>
138
-
$(".k-grid-exportChart").on("click", function (e) {
139
-
var grid = $('#grid').data('kendoGrid');
162
+
1. Define the `exportToChart` method as demonstrated below.
140
163
164
+
```javascript
165
+
functionexportToChart() {
141
166
var container =$('#chart-container');
142
-
143
-
/* Get a reference to the Kendo Window widget if it has been initialized. */
144
167
var windowInstance =$('#chart-container').data('kendoWindow');
145
168
var currInstance =container.find('.k-chart').data('kendoChart');
146
-
147
-
/* Get the data from the selected cells. */
169
+
/* Get the selected data. */
148
170
var data =grid.getSelectedData();
149
-
var categoryField;
150
171
151
172
if (!data.length) {
152
173
kendo.alert('Please select cells before exporting.');
153
174
return;
154
175
}
155
176
156
-
/* Set the categoryField of the chart using one of the grid fields. */
/* Create a chart using the data and append it to the window. */
172
201
var element =$('<div></div>').appendTo(container);
173
202
windowInstance.open().center();
174
-
175
-
/* Initialize a Chart from the appended div. */
176
203
element.kendoChart({
204
+
dataSource: {
205
+
data: unknownCountries
206
+
},
177
207
series: [{
178
208
type:"column",
179
-
categoryField: categoryField,
180
-
field: 'Freight',
181
-
data: data
182
-
}]
209
+
field:'Freight'
210
+
}],
211
+
categoryAxis: {field:"ShipCountry"}
183
212
});
184
-
});
185
-
</script>
213
+
}
214
+
```
215
+
216
+
## Selection Types
217
+
218
+
The following selection types are supported:
219
+
220
+
- Cell selection - the user holds down the `CTRL`key (`Command` key on Mac) and uses the `left-click`of the mouse to select cells.
221
+
-Range selection - the user holds down the `left-click` on the mouse and drags across a range of cells.
222
+
-Range and Cell selection - the user can combine the two approaches from above and select both a range and separate cells.
223
+
-Range combination selection - the user performs a range selection and while holding the `CTRL`key (`Command` key on Mac), they perform another range selection.
224
+
225
+
## Known Limitations
226
+
227
+
- The `copySelectionToClipboard`, `exportSelectedToExcel` and `getSelectedData` methods do not work with rows that are persisted across different pages.
228
+
- The Export to Chart method does not work with`Range and Cell selection` type.
186
229
187
230
## See Also
188
231
189
-
*[Selection Copy/Export by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/advanced-export)
232
+
* [Selection Copy/Export by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/selection-export)
0 commit comments