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
Note, we can reference the same image ID in two different drawings,
195
+
anchored to cells C2 and E3. See the
196
+
(`sheets.drawings`)[#configuration-sheets.drawings] property for more
197
+
information about a drawing's properties.
198
+
144
199
### pdf `Object`
145
200
146
201
Configures the PDF export settings of the Spreadsheet.
@@ -694,6 +749,34 @@ The width of the column in pixels. Defaults to [`columnWidth`](/api/javascript/u
694
749
695
750
The DataSource instance for this sheet. For more information, refer to the article on [binding to the DataSource](/web/spreadsheet/import-and-export-data/bind-to-data-source).
696
751
752
+
### sheets.drawings `Array`
753
+
754
+
An array which contains the drawings used in this sheet.
755
+
756
+
### sheets.drawings.topLeftCell `String`
757
+
758
+
A cell to which the drawing's top-left corner is anchored.
759
+
760
+
### sheets.drawings.offsetX `Number`
761
+
762
+
The horizontal offset from the anchor cell's top-left corner, in pixels.
763
+
764
+
### sheets.drawings.offsetY `Number`
765
+
766
+
The vertical offset from the anchor cell's top-left corner, in pixels.
767
+
768
+
### sheets.drawings.width `Number`
769
+
770
+
The drawing's width in pixels.
771
+
772
+
### sheets.drawings.height `Number`
773
+
774
+
The drawing's height in pixels.
775
+
776
+
### sheets.drawing.image `String`
777
+
778
+
The ID of the image to display.
779
+
697
780
### sheets.filter `Object`
698
781
699
782
Defines the filtering criteria for this sheet, if any.
@@ -1387,6 +1470,42 @@ The [sheet](/api/javascript/spreadsheet/sheet) to set as active.
The image to add. If it's a string it will be interpreted as an URL.
1482
+
It can be a data URL, or an external URL. [Read more
1483
+
information](#configuration-images) about image URLs in the
1484
+
configuration section.
1485
+
1486
+
#### Returns
1487
+
1488
+
`String` - The new image ID.
1489
+
1490
+
#### Example
1491
+
1492
+
<div id="spreadsheet"></div>
1493
+
<script>
1494
+
var spreadsheet = $("#spreadsheet").kendoSpreadsheet().getKendoSpreadsheet();
1495
+
var imageId = spreadsheet.addImage("data:image/png;base64,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");
1496
+
var sheet = spreadsheet.activeSheet();
1497
+
sheet.batch(function(){
1498
+
sheet.addDrawing({
1499
+
topLeftCell: "B2",
1500
+
offsetX: 0,
1501
+
offsetY: 0,
1502
+
width: 48,
1503
+
height: 48,
1504
+
image: imageId
1505
+
});
1506
+
});
1507
+
</script>
1508
+
1390
1509
### cellContextMenu
1391
1510
1392
1511
Gets the `contextMenu` instance of the cell.
@@ -1419,6 +1538,14 @@ Gets the `contextMenu` instance of the cell.
1419
1538
});
1420
1539
</script>
1421
1540
1541
+
### cleanupImages
1542
+
1543
+
Discards the images that are no longer in use. Note that you cannot
1544
+
remove a particular image directly by ID, for it might be used in
1545
+
multiple sheets, or they can be referenced by the undo/redo queue.
1546
+
This function acts like a "garbage collector" — it checks which images
1547
+
are no longer needed, and removes them.
1548
+
1422
1549
### rowHeaderContextMenu
1423
1550
1424
1551
Gets the `contextMenu` instance of the row header.
@@ -1734,10 +1861,44 @@ The new name of the sheet.
1734
1861
1735
1862
`kendo.spreadsheet.Sheet` - The renamed sheet.
1736
1863
1864
+
### saveJSON
1865
+
1866
+
Serializes the workbook in the format that is defined in the
1867
+
[configuration](#configuration). This method does not return the
1868
+
JSON, but a `Promise` object which will yield the JSON data when it is
1869
+
available.
1870
+
1871
+
This method is functionally similar to `toJSON`, but it is also able
1872
+
to save the embedded images (this is the reason why it must be
1873
+
asynchronous).
1874
+
1875
+
#### Returns
1876
+
1877
+
`Promise` - A Promise object which will be resolved with the JSON
1878
+
data.
1879
+
1880
+
#### Example
1881
+
1882
+
<div id="spreadsheet"></div>
1883
+
<pre id="result"></pre>
1884
+
<script>
1885
+
var spreadsheet = $("#spreadsheet").kendoSpreadsheet().getKendoSpreadsheet();
1886
+
spreadsheet
1887
+
.saveJSON()
1888
+
.then(function(data){
1889
+
var json = JSON.stringify(data, null, 2);
1890
+
$("#result").text(json);
1891
+
});
1892
+
</script>
1893
+
1737
1894
### toJSON
1738
1895
1739
1896
Serializes the workbook in the format that is defined in the [configuration](#configuration).
1740
1897
1898
+
Note that this method is unable to serialize embedded images. To
1899
+
properly save images you need to use [`saveJSON`](#methods-saveJSON),
Copy file name to clipboardExpand all lines: docs/controls/editors/dropdownlist/data-binding.md
+2-3Lines changed: 2 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,12 +8,11 @@ position: 2
8
8
9
9
# Data Binding
10
10
11
-
The DropDownList enables you to initialize by using the `<input>` or the `<select>` element after you bind it to local data arrays or remote data services.
11
+
The DropDownList enables you to initialize it by using the `<input>` or the `<select>` element after you bind it to local data arrays or remote data services.
12
12
13
13
For more information on initializing the DropDownList through the `<option>` tag of an existing `<select>` element, refer to the [DropDownList **Overview** article]({% slug overview_kendoui_dropdownlist_widget %}#initializing-the-dropdownlist).
14
14
15
-
> * When you configure the local or remote data source of the DropDownList, enabling the paging functionality and setting [`pageSize`](/api/javascript/data/datasource/configuration/pagesize) is efficient only when you use paging together with [virtualization]({% slug virtualization_kendoui_ddl_widget %}). In all other cases, enabling paging and setting `pageSize` is considered as incorrect configuration.
16
-
> * For more information on other guidelines when you initiate the DropDownList, refer to the [**Overview** article]({% slug overview_kendoui_dropdownlist_widget %}#initializing-the-dropdownlist).
15
+
> When you configure the local or remote data source of the DropDownList, enabling the paging functionality and setting [`pageSize`](/api/javascript/data/datasource/configuration/pagesize) is efficient only when you use paging together with [virtualization]({% slug virtualization_kendoui_ddl_widget %}). In all other cases, enabling paging and setting `pageSize` is considered as incorrect configuration.
0 commit comments