@progress/kendo-themes-html 6.7.1-dev.1 → 6.8.0-dev.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (104) hide show
  1. package/dist/cjs/daterangepicker/daterangepicker.spec.js +206 -203
  2. package/dist/cjs/daterangepicker/templates/daterangepicker-adaptive.js +208 -205
  3. package/dist/cjs/daterangepicker/templates/daterangepicker-normal.js +208 -205
  4. package/dist/cjs/daterangepicker/templates/daterangepicker-popup.js +208 -205
  5. package/dist/cjs/daterangepicker/tests/daterangepicker-adaptive.js +218 -215
  6. package/dist/cjs/daterangepicker/tests/daterangepicker-flat.js +227 -224
  7. package/dist/cjs/daterangepicker/tests/daterangepicker-opened.js +218 -215
  8. package/dist/cjs/daterangepicker/tests/daterangepicker-outline.js +227 -224
  9. package/dist/cjs/daterangepicker/tests/daterangepicker-size-rounded.js +221 -218
  10. package/dist/cjs/daterangepicker/tests/daterangepicker-solid.js +227 -224
  11. package/dist/cjs/floating-label/templates/floating-label-normal.js +115 -0
  12. package/dist/cjs/floating-label/tests/floating-label-flat.js +87 -1136
  13. package/dist/cjs/floating-label/tests/floating-label-outline.js +87 -1136
  14. package/dist/cjs/floating-label/tests/floating-label-solid.js +4929 -0
  15. package/dist/cjs/form/tests/form-field-dateinputs.js +149 -146
  16. package/dist/cjs/form/tests/form-field-inputs-rtl.js +233 -230
  17. package/dist/cjs/form/tests/form-field-inputs.js +234 -231
  18. package/dist/cjs/index.js +2415 -2409
  19. package/dist/cjs/spreadsheet/tests/spreadsheet-cell-contextmenu.js +7103 -0
  20. package/dist/cjs/spreadsheet/tests/spreadsheet-data-validation.js +526 -553
  21. package/dist/cjs/{floating-label/tests/floating-label.js → spreadsheet/tests/spreadsheet-file-dialogs.js} +1113 -922
  22. package/dist/cjs/spreadsheet/tests/spreadsheet-filtering.js +7088 -0
  23. package/dist/cjs/spreadsheet/tests/spreadsheet-find-replace-dialog.js +5858 -0
  24. package/dist/cjs/spreadsheet/tests/spreadsheet-format-dialogs.js +7385 -0
  25. package/dist/cjs/spreadsheet/tests/spreadsheet-formula-dialog.js +5824 -0
  26. package/dist/cjs/spreadsheet/tests/spreadsheet-formula.js +7062 -0
  27. package/dist/cjs/spreadsheet/tests/{spreadsheet-dialog.js → spreadsheet-insert-dialogs.js} +541 -601
  28. package/dist/cjs/spreadsheet/tests/spreadsheet-jquery.js +7133 -0
  29. package/dist/cjs/spreadsheet/tests/spreadsheet-print.js +6285 -0
  30. package/dist/cjs/spreadsheet/tests/{spreadsheet-tools-popup.js → spreadsheet-row-contextmenu.js} +733 -784
  31. package/dist/cjs/spreadsheet/tests/spreadsheet-sheets-bar.js +5518 -0
  32. package/dist/cjs/spreadsheet/tests/spreadsheet-tools.js +6989 -0
  33. package/dist/cjs/spreadsheet/tests/spreadsheet.js +660 -708
  34. package/dist/esm/daterangepicker/daterangepicker.spec.js +170 -167
  35. package/dist/esm/daterangepicker/templates/daterangepicker-adaptive.js +172 -169
  36. package/dist/esm/daterangepicker/templates/daterangepicker-normal.js +172 -169
  37. package/dist/esm/daterangepicker/templates/daterangepicker-popup.js +172 -169
  38. package/dist/esm/daterangepicker/tests/daterangepicker-adaptive.js +180 -177
  39. package/dist/esm/daterangepicker/tests/daterangepicker-flat.js +186 -183
  40. package/dist/esm/daterangepicker/tests/daterangepicker-opened.js +180 -177
  41. package/dist/esm/daterangepicker/tests/daterangepicker-outline.js +186 -183
  42. package/dist/esm/daterangepicker/tests/daterangepicker-size-rounded.js +182 -179
  43. package/dist/esm/daterangepicker/tests/daterangepicker-solid.js +186 -183
  44. package/dist/esm/floating-label/templates/floating-label-normal.js +93 -0
  45. package/dist/esm/floating-label/tests/floating-label-flat.js +84 -1133
  46. package/dist/esm/floating-label/tests/floating-label-outline.js +84 -1133
  47. package/dist/esm/floating-label/tests/floating-label-solid.js +4913 -0
  48. package/dist/esm/form/tests/form-field-dateinputs.js +123 -120
  49. package/dist/esm/form/tests/form-field-inputs-rtl.js +194 -191
  50. package/dist/esm/form/tests/form-field-inputs.js +192 -189
  51. package/dist/esm/index.js +2025 -2019
  52. package/dist/esm/spreadsheet/tests/spreadsheet-cell-contextmenu.js +7087 -0
  53. package/dist/esm/spreadsheet/tests/spreadsheet-data-validation.js +526 -553
  54. package/dist/esm/spreadsheet/tests/spreadsheet-file-dialogs.js +6153 -0
  55. package/dist/esm/spreadsheet/tests/spreadsheet-filtering.js +7072 -0
  56. package/dist/esm/{floating-label/tests/floating-label.js → spreadsheet/tests/spreadsheet-find-replace-dialog.js} +849 -969
  57. package/dist/esm/spreadsheet/tests/spreadsheet-format-dialogs.js +7369 -0
  58. package/dist/esm/spreadsheet/tests/spreadsheet-formula-dialog.js +5808 -0
  59. package/dist/esm/spreadsheet/tests/spreadsheet-formula.js +7046 -0
  60. package/dist/esm/spreadsheet/tests/{spreadsheet-dialog.js → spreadsheet-insert-dialogs.js} +541 -601
  61. package/dist/esm/spreadsheet/tests/{spreadsheet-tools-popup.js → spreadsheet-jquery.js} +296 -317
  62. package/dist/esm/spreadsheet/tests/spreadsheet-print.js +6269 -0
  63. package/dist/esm/spreadsheet/tests/spreadsheet-row-contextmenu.js +7087 -0
  64. package/dist/esm/spreadsheet/tests/spreadsheet-sheets-bar.js +5502 -0
  65. package/dist/esm/spreadsheet/tests/spreadsheet-tools.js +6973 -0
  66. package/dist/esm/spreadsheet/tests/spreadsheet.js +661 -709
  67. package/dist/types/floating-label/index.d.ts +1 -0
  68. package/dist/types/floating-label/templates/floating-label-normal.d.ts +4 -0
  69. package/dist/types/spreadsheet/tests/spreadsheet-filtering.d.ts +2 -0
  70. package/dist/types/spreadsheet/tests/spreadsheet-find-replace-dialog.d.ts +2 -0
  71. package/dist/types/spreadsheet/tests/spreadsheet-format-dialogs.d.ts +2 -0
  72. package/dist/types/spreadsheet/tests/spreadsheet-formula-dialog.d.ts +2 -0
  73. package/dist/types/spreadsheet/tests/spreadsheet-formula.d.ts +2 -0
  74. package/dist/types/spreadsheet/tests/spreadsheet-insert-dialogs.d.ts +2 -0
  75. package/dist/types/spreadsheet/tests/spreadsheet-jquery.d.ts +2 -0
  76. package/dist/types/spreadsheet/tests/spreadsheet-print.d.ts +2 -0
  77. package/dist/types/spreadsheet/tests/spreadsheet-row-contextmenu.d.ts +2 -0
  78. package/dist/types/spreadsheet/tests/spreadsheet-sheets-bar.d.ts +2 -0
  79. package/dist/types/spreadsheet/tests/spreadsheet-tools.d.ts +2 -0
  80. package/package.json +2 -2
  81. package/src/floating-label/index.ts +1 -0
  82. package/src/floating-label/templates/floating-label-normal.tsx +7 -0
  83. package/src/floating-label/tests/floating-label-flat.tsx +32 -148
  84. package/src/floating-label/tests/floating-label-outline.tsx +32 -148
  85. package/src/floating-label/tests/floating-label-solid.tsx +64 -0
  86. package/src/spreadsheet/tests/spreadsheet-cell-contextmenu.tsx +538 -0
  87. package/src/spreadsheet/tests/spreadsheet-data-validation.tsx +43 -53
  88. package/src/spreadsheet/tests/spreadsheet-file-dialogs.tsx +63 -0
  89. package/src/spreadsheet/tests/spreadsheet-filtering.tsx +522 -0
  90. package/src/spreadsheet/tests/spreadsheet-find-replace-dialog.tsx +38 -0
  91. package/src/spreadsheet/tests/spreadsheet-format-dialogs.tsx +76 -0
  92. package/src/spreadsheet/tests/spreadsheet-formula-dialog.tsx +45 -0
  93. package/src/spreadsheet/tests/spreadsheet-formula.tsx +491 -0
  94. package/src/spreadsheet/tests/{spreadsheet-dialog.tsx → spreadsheet-insert-dialogs.tsx} +35 -52
  95. package/src/spreadsheet/tests/{spreadsheet-tools-popup.tsx → spreadsheet-jquery.tsx} +19 -43
  96. package/src/spreadsheet/tests/spreadsheet-print.tsx +179 -0
  97. package/src/spreadsheet/tests/spreadsheet-row-contextmenu.tsx +538 -0
  98. package/src/spreadsheet/tests/spreadsheet-sheets-bar.tsx +123 -0
  99. package/src/spreadsheet/tests/spreadsheet-tools.tsx +315 -0
  100. package/src/spreadsheet/tests/spreadsheet.tsx +372 -435
  101. package/src/floating-label/tests/floating-label.tsx +0 -180
  102. /package/dist/types/floating-label/tests/{floating-label.d.ts → floating-label-solid.d.ts} +0 -0
  103. /package/dist/types/spreadsheet/tests/{spreadsheet-dialog.d.ts → spreadsheet-cell-contextmenu.d.ts} +0 -0
  104. /package/dist/types/spreadsheet/tests/{spreadsheet-tools-popup.d.ts → spreadsheet-file-dialogs.d.ts} +0 -0
package/src/spreadsheet/tests/spreadsheet-formula.tsx ADDED
@@ -0,0 +1,491 @@
1
+ import { Button } from "../../button";
2
+ import { Combobox } from "../../combobox";
3
+ import { MenuButton } from "../../menu-button";
4
+ import { Toolbar } from "../../toolbar";
5
+
6
+ const style = `
7
+ #test-area {
8
+ max-width: 1150px;
9
+ }
10
+
11
+ .k-spreadsheet-cell,
12
+ .k-spreadsheet-formula-input {
13
+ white-space: normal !important;
14
+ }
15
+ `;
16
+
17
+ export default () =>(
18
+ <>
19
+ <style>{style}</style>
20
+ <div id="test-area">
21
+ <div style={{ width: '100%' }} className="k-spreadsheet">
22
+ <div className="k-spreadsheet-header">
23
+ <ul id="menu" className="k-spreadsheet-menu k-widget k-reset k-header k-menu k-menu-horizontal">
24
+ <li className="k-item k-menu-item k-first">
25
+ <span className="k-link k-menu-link">File</span>
26
+ </li>
27
+ <li className="k-item k-menu-item">
28
+ <span className="k-link k-menu-link">Home</span>
29
+ </li>
30
+ <li className="k-item k-menu-item">
31
+ <span className="k-link k-menu-link">Insert</span>
32
+ </li>
33
+ <li className="k-item k-menu-item">
34
+ <span className="k-link k-menu-link">Format</span>
35
+ </li>
36
+ <li className="k-item k-menu-item k-active">
37
+ <span className="k-link k-menu-link">Formulas</span>
38
+ </li>
39
+ <li className="k-item k-menu-item">
40
+ <span className="k-link k-menu-link">Data</span>
41
+ </li>
42
+ <li className="k-item k-menu-item k-last">
43
+ <span className="k-link k-menu-link">View</span>
44
+ </li>
45
+ </ul>
46
+ <Toolbar className="k-spreadsheet-toolbar k-toolbar-flat" resizable>
47
+ <Button icon="formula-fx" fillMode="flat">Insert Formula</Button>
48
+ </Toolbar>
49
+ </div>
50
+ <div className="k-spreadsheet-action-bar">
51
+ <div className="k-spreadsheet-name-editor">
52
+ <Combobox placeholder="B6" fillMode="flat" />
53
+ </div>
54
+ <div className="k-spreadsheet-formula-bar">
55
+ <span className="k-separator k-separator-vertical"></span>
56
+ <Button icon="formula-fx" fillMode="flat" />
57
+ <span className="k-separator k-separator-vertical"></span>
58
+ <div className="k-spreadsheet-formula-input k-textbox k-input k-input-md k-input-flat k-rounded-md">
59
+ <span className="k-syntax-startexp">=</span>
60
+ <span className="k-syntax-func">SUM</span>
61
+ <span className="k-syntax-punc">(</span>
62
+ <span className="k-syntax-ref k-series-a">C3</span>
63
+ <span className="k-syntax-op">+</span>
64
+ <span className="k-syntax-ref k-series-a">C4</span>
65
+ <span className="k-syntax-punc">)</span>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ <div className="k-spreadsheet-view">
70
+ <div className="k-spreadsheet-fixed-container">
71
+ <div style={{ top: 0, left: 0, height: "100%", width: "100%" }} className="k-spreadsheet-pane k-top k-left">
72
+ <div className="k-spreadsheet-data" style={{ position: "relative", left: "30px", top: "30px" }}>
73
+ <div className="k-spreadsheet-vaxis" style={{ left: 0, height: "405px" }}></div>
74
+ <div className="k-spreadsheet-vaxis" style={{ left: "100px", height: "405px" }}></div>
75
+ <div className="k-spreadsheet-vaxis" style={{ left: "315px", height: "405px" }}></div>
76
+ <div className="k-spreadsheet-vaxis" style={{ left: "430px", height: "405px" }}></div>
77
+ <div className="k-spreadsheet-vaxis" style={{ left: "545px", height: "405px" }}></div>
78
+ <div className="k-spreadsheet-vaxis" style={{ left: "660px", height: "405px" }}></div>
79
+ <div className="k-spreadsheet-vaxis" style={{ left: "815px", height: "405px" }}></div>
80
+ <div className="k-spreadsheet-vaxis" style={{ left: "879px", height: "405px" }}></div>
81
+ <div className="k-spreadsheet-vaxis" style={{ left: "943px", height: "405px" }}></div>
82
+ <div className="k-spreadsheet-vaxis" style={{ left: "1007px", height: "405px" }}></div>
83
+ <div className="k-spreadsheet-vaxis" style={{ left: "1071px", height: "405px" }}></div>
84
+ <div className="k-spreadsheet-vaxis" style={{ left: "1135px", height: "405px" }}></div>
85
+ <div className="k-spreadsheet-vaxis" style={{ left: "1199px", height: "405px" }}></div>
86
+ <div className="k-spreadsheet-haxis" style={{ top: "0px", width: "1199px" }}></div>
87
+ <div className="k-spreadsheet-haxis" style={{ top: "70px", width: "1199px" }}></div>
88
+ <div className="k-spreadsheet-haxis" style={{ top: "95px", width: "1199px" }}></div>
89
+ <div className="k-spreadsheet-haxis" style={{ top: "125px", width: "1199px" }}></div>
90
+ <div className="k-spreadsheet-haxis" style={{ top: "155px", width: "1199px" }}></div>
91
+ <div className="k-spreadsheet-haxis" style={{ top: "185px", width: "1199px" }}></div>
92
+ <div className="k-spreadsheet-haxis" style={{ top: "215px", width: "1199px" }}></div>
93
+ <div className="k-spreadsheet-haxis" style={{ top: "245px", width: "1199px" }}></div>
94
+ <div className="k-spreadsheet-haxis" style={{ top: "275px", width: "1199px" }}></div>
95
+ <div className="k-spreadsheet-haxis" style={{ top: "305px", width: "1199px" }}></div>
96
+ <div className="k-spreadsheet-haxis" style={{ top: "335px", width: "1199px" }}></div>
97
+ <div className="k-spreadsheet-haxis" style={{ top: "365px", width: "1199px" }}></div>
98
+ <div className="k-spreadsheet-haxis" style={{ top: "395px", width: "1199px" }}></div>
99
+ <div className="k-spreadsheet-haxis" style={{ top: "426px", width: "1199px" }}></div>
100
+ <div className="k-spreadsheet-disabled-mask" style={{ top: "1px", width: "878px", left: "1px", height: "69px" }}></div>
101
+ <div className="k-spreadsheet-cell k-spreadsheet-merged-cell" style={{ left: "1px", top: "1px", width: "878px", height: "69px", background: "rgb(96, 181, 255)", outline: "rgb(86, 163, 230) solid 1px", color: "white", fontFamily: "Arial", textAlign: "center", fontSize: "30px", whiteSpace: "pre", overflowWrap: "normal" }}>
102
+ <div className="k-vertical-align-center">Invoice #52 - 06/23/2015</div>
103
+ </div>
104
+ <div style={{ background: "rgb(167, 214, 255)", outline: "rgb(150, 193, 230) solid 1px" , color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "1px", top: "71px", width: "99px", height: "24px" }} className="k-spreadsheet-cell">
105
+ <div className="k-vertical-align-center">ID</div>
106
+ </div>
107
+ <div style={{ background: "rgb(167, 214, 255)", outline: "rgb(150, 193, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "101px", top: "71px", width: "214px", height: "24px" }} className="k-spreadsheet-cell">
108
+ <div className="k-vertical-align-center">Product</div>
109
+ </div>
110
+ <div style={{ background: "rgb(167, 214, 255)", outline: "rgb(150, 193, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "316px", top: "71px", width: "114px", height: "24px" }} className="k-spreadsheet-cell">
111
+ <div className="k-vertical-align-center">Quantity</div>
112
+ </div>
113
+ <div style={{ background: "rgb(167, 214, 255)", outline: "rgb(150, 193, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "431px", top: "71px", width: "114px", height: "24px" }} className="k-spreadsheet-cell">
114
+ <div className="k-vertical-align-center">Price</div>
115
+ </div>
116
+ <div style={{ background: "rgb(167, 214, 255)", outline: "rgb(150, 193, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "546px", top: "71px", width: "114px", height: "24px" }} className="k-spreadsheet-cell">
117
+ <div className="k-vertical-align-center">Tax</div>
118
+ </div>
119
+ <div style={{ background: "rgb(167, 214, 255)", outline: "rgb(150, 193, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "661px", top: "71px", width: "154px", height: "24px" }} className="k-spreadsheet-cell">
120
+ <div className="k-vertical-align-center">Amount</div>
121
+ </div>
122
+ <div style={{ background: "rgb(167, 214, 255)", outline: "rgb(150, 193, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "816px", top: "71px", width: "63px", height: "24px" }} className="k-spreadsheet-cell"></div>
123
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "1px", top: "96px", width: "99px", height: "30px" }} className="k-spreadsheet-cell k-left k-single">
124
+ <div className="k-vertical-align-center">216321</div>
125
+ </div>
126
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "left", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "101px", top: "96px", width: "214px", height: "30px" }} className="k-spreadsheet-cell">
127
+ <div className="k-vertical-align-center">Calzone</div>
128
+ </div>
129
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "316px", top: "96px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
130
+ <div className="k-vertical-align-center">1</div>
131
+ </div>
132
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "431px", top: "96px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
133
+ <div className="k-vertical-align-center">
134
+ <span>$12.39</span>
135
+ </div>
136
+ </div>
137
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "546px", top: "96px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
138
+ <div className="k-vertical-align-center">
139
+ <span>$2.48</span>
140
+ </div>
141
+ </div>
142
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "661px", top: "96px", width: "154px", height: "30px" }} className="k-spreadsheet-cell">
143
+ <div className="k-vertical-align-center">
144
+ <span>$14.87</span>
145
+ </div>
146
+ </div>
147
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "816px", top: "96px", width: "63px", height: "30px" }} className="k-spreadsheet-cell"></div>
148
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "1px", top: "126px", width: "99px", height: "30px" }} className="k-spreadsheet-cell">
149
+ <div className="k-vertical-align-center">546897</div>
150
+ </div>
151
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "left", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "101px", top: "126px", width: "214px", height: "30px" }} className="k-spreadsheet-cell">
152
+ <div className="k-vertical-align-center">Margarita</div>
153
+ </div>
154
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "316px", top: "126px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
155
+ <div className="k-vertical-align-center">2</div>
156
+ </div>
157
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "431px", top: "126px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
158
+ <div className="k-vertical-align-center">
159
+ <span>$8.79</span>
160
+ </div>
161
+ </div>
162
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "546px", top: "126px", width: "114px", height: "30px" }} className="k-spreadsheet-cell k-spreadsheet-active-cell">
163
+ <div className="k-vertical-align-center">
164
+ <span>$3.52</span>
165
+ </div>
166
+ </div>
167
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "661px", top: "126px", width: "154px", height: "30px" }} className="k-spreadsheet-cell">
168
+ <div className="k-vertical-align-center">
169
+ <span>$21.10</span>
170
+ </div>
171
+ </div>
172
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "816px", top: "126px", width: "63px", height: "30px" }} className="k-spreadsheet-cell"></div>
173
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "1px", top: "156px", width: "99px", height: "30px" }} className="k-spreadsheet-cell">
174
+ <div className="k-vertical-align-center">456231</div>
175
+ </div>
176
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "left", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "101px", top: "156px", width: "214px", height: "30px" }} className="k-spreadsheet-cell">
177
+ <div className="k-vertical-align-center">Pollo Formaggio</div>
178
+ </div>
179
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "316px", top: "156px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
180
+ <div className="k-vertical-align-center">1</div>
181
+ </div>
182
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "431px", top: "156px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
183
+ <div className="k-vertical-align-center">
184
+ <span>$13.99</span>
185
+ </div>
186
+ </div>
187
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "546px", top: "156px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
188
+ <div className="k-vertical-align-center">
189
+ <span>$2.80</span>
190
+ </div>
191
+ </div>
192
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "661px", top: "156px", width: "154px", height: "30px" }} className="k-spreadsheet-cell">
193
+ <div className="k-vertical-align-center">
194
+ <span>$16.79</span>
195
+ </div>
196
+ </div>
197
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "816px", top: "156px", width: "63px", height: "30px" }} className="k-spreadsheet-cell"></div>
198
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "1px", top: "186px", width: "99px", height: "30px" }} className="k-spreadsheet-cell">
199
+ <div className="k-vertical-align-center">455873</div>
200
+ </div>
201
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "left", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "101px", top: "186px", width: "214px", height: "30px" }} className="k-spreadsheet-cell">
202
+ <div className="k-vertical-align-center">Greek Salad</div>
203
+ </div>
204
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "316px", top: "186px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
205
+ <div className="k-vertical-align-center">1</div>
206
+ </div>
207
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "431px", top: "186px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
208
+ <div className="k-vertical-align-center">
209
+ <span>$9.49</span>
210
+ </div>
211
+ </div>
212
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "546px", top: "186px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
213
+ <div className="k-vertical-align-center">
214
+ <span>$1.90</span>
215
+ </div>
216
+ </div>
217
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "661px", top: "186px", width: "154px", height: "30px" }} className="k-spreadsheet-cell">
218
+ <div className="k-vertical-align-center">
219
+ <span>$11.39</span>
220
+ </div>
221
+ </div>
222
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "816px", top: "186px", width: "63px", height: "30px" }} className="k-spreadsheet-cell"></div>
223
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "1px", top: "216px", width: "99px", height: "30px" }} className="k-spreadsheet-cell">
224
+ <div className="k-vertical-align-center">456892</div>
225
+ </div>
226
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "left", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "101px", top: "216px", width: "214px", height: "30px" }} className="k-spreadsheet-cell">
227
+ <div className="k-vertical-align-center">Spinach and Blue Cheese</div>
228
+ </div>
229
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "316px", top: "216px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
230
+ <div className="k-vertical-align-center">3</div>
231
+ </div>
232
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "431px", top: "216px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
233
+ <div className="k-vertical-align-center"><span>$11.49</span></div>
234
+ </div>
235
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "546px", top: "216px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
236
+ <div className="k-vertical-align-center"><span>$6.89</span></div>
237
+ </div>
238
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "661px", top: "216px", width: "154px", height: "30px" }} className="k-spreadsheet-cell">
239
+ <div className="k-vertical-align-center"><span>$41.36</span></div>
240
+ </div>
241
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "816px", top: "216px", width: "63px", height: "30px" }} className="k-spreadsheet-cell"></div>
242
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "1px", top: "246px", width: "99px", height: "30px" }} className="k-spreadsheet-cell">
243
+ <div className="k-vertical-align-center">546564</div>
244
+ </div>
245
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "left", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "101px", top: "246px", width: "214px", height: "30px" }} className="k-spreadsheet-cell">
246
+ <div className="k-vertical-align-center">Rigoletto</div>
247
+ </div>
248
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "316px", top: "246px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
249
+ <div className="k-vertical-align-center">1</div>
250
+ </div>
251
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "431px", top: "246px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
252
+ <div className="k-vertical-align-center"><span>$10.99</span></div>
253
+ </div>
254
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "546px", top: "246px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
255
+ <div className="k-vertical-align-center"><span>$2.20</span></div>
256
+ </div>
257
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "661px", top: "246px", width: "154px", height: "30px" }} className="k-spreadsheet-cell">
258
+ <div className="k-vertical-align-center"><span>$13.19</span></div>
259
+ </div>
260
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "816px", top: "246px", width: "63px", height: "30px" }} className="k-spreadsheet-cell"></div>
261
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "1px", top: "276px", width: "99px", height: "30px" }} className="k-spreadsheet-cell">
262
+ <div className="k-vertical-align-center">789455</div>
263
+ </div>
264
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "left", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "101px", top: "276px", width: "214px", height: "30px" }} className="k-spreadsheet-cell">
265
+ <div className="k-vertical-align-center">Creme Brulee</div>
266
+ </div>
267
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "316px", top: "276px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
268
+ <div className="k-vertical-align-center">5</div>
269
+ </div>
270
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "431px", top: "276px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
271
+ <div className="k-vertical-align-center"><span>$6.99</span></div>
272
+ </div>
273
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "546px", top: "276px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
274
+ <div className="k-vertical-align-center"><span>$6.99</span></div>
275
+ </div>
276
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "661px", top: "276px", width: "154px", height: "30px" }} className="k-spreadsheet-cell">
277
+ <div className="k-vertical-align-center"><span>$41.94</span></div>
278
+ </div>
279
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "816px", top: "276px", width: "63px", height: "30px" }} className="k-spreadsheet-cell"></div>
280
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "1px", top: "306px", width: "99px", height: "30px" }} className="k-spreadsheet-cell">
281
+ <div className="k-vertical-align-center">123002</div>
282
+ </div>
283
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "left", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "101px", top: "306px", width: "214px", height: "30px" }} className="k-spreadsheet-cell">
284
+ <div className="k-vertical-align-center">Radeberger Beer</div>
285
+ </div>
286
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "316px", top: "306px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
287
+ <div className="k-vertical-align-center">4</div>
288
+ </div>
289
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "431px", top: "306px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
290
+ <div className="k-vertical-align-center"><span>$4.99</span></div>
291
+ </div>
292
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "546px", top: "306px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
293
+ <div className="k-vertical-align-center"><span>$3.99</span></div>
294
+ </div>
295
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "661px", top: "306px", width: "154px", height: "30px" }} className="k-spreadsheet-cell">
296
+ <div className="k-vertical-align-center"><span>$23.95</span></div>
297
+ </div>
298
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "816px", top: "306px", width: "63px", height: "30px" }} className="k-spreadsheet-cell"></div>
299
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "1px", top: "336px", width: "99px", height: "30px" }} className="k-spreadsheet-cell">
300
+ <div className="k-vertical-align-center">564896</div>
301
+ </div>
302
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "left", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "101px", top: "336px", width: "214px", height: "30px" }} className="k-spreadsheet-cell">
303
+ <div className="k-vertical-align-center">Budweiser Beer</div>
304
+ </div>
305
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "316px", top: "336px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
306
+ <div className="k-vertical-align-center">3</div>
307
+ </div>
308
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "431px", top: "336px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
309
+ <div className="k-vertical-align-center"><span>$4.49</span></div>
310
+ </div>
311
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "546px", top: "336px", width: "114px", height: "30px" }} className="k-spreadsheet-cell">
312
+ <div className="k-vertical-align-center"><span>$2.69</span></div>
313
+ </div>
314
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "661px", top: "336px", width: "154px", height: "30px" }} className="k-spreadsheet-cell">
315
+ <div className="k-vertical-align-center"><span>$16.16</span></div>
316
+ </div>
317
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "816px", top: "336px", width: "63px", height: "30px" }} className="k-spreadsheet-cell"></div>
318
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "1px", top: "366px", width: "99px", height: "30px" }} className="k-spreadsheet-cell"></div>
319
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "101px", top: "366px", width: "214px", height: "30px" }} className="k-spreadsheet-cell"></div>
320
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "316px", top: "366px", width: "114px", height: "30px" }} className="k-spreadsheet-cell"></div>
321
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "431px", top: "366px", width: "114px", height: "30px" }} className="k-spreadsheet-cell"></div>
322
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "546px", top: "366px", width: "114px", height: "30px" }} className="k-spreadsheet-cell"></div>
323
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "661px", top: "366px", width: "154px", height: "30px" }} className="k-spreadsheet-cell"></div>
324
+ <div style={{ background: "rgb(229, 243, 255)", outline: "rgb(206, 219, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "816px", top: "366px", width: "63px", height: "30px" }} className="k-spreadsheet-cell"></div>
325
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "1px", top: "396px", width: "99px", height: "30px" }} className="k-spreadsheet-cell"></div>
326
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "101px", top: "396px", width: "214px", height: "30px" }} className="k-spreadsheet-cell"></div>
327
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "316px", top: "396px", width: "114px", height: "30px" }} className="k-spreadsheet-cell"></div>
328
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "431px", top: "396px", width: "114px", height: "30px" }} className="k-spreadsheet-cell"></div>
329
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "546px", top: "396px", width: "114px", height: "30px" }} className="k-spreadsheet-cell"></div>
330
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "661px", top: "396px", width: "154px", height: "30px" }} className="k-spreadsheet-cell"></div>
331
+ <div style={{ background: "rgb(255, 255, 255)", outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", whiteSpace: "pre", overflowWrap: "normal", left: "816px", top: "396px", width: "63px", height: "30px" }} className="k-spreadsheet-cell"></div>
332
+ </div>
333
+ <div className="k-selection-wrapper">
334
+ <div className="k-spreadsheet-selection k-single-selection" style={{ width: "116px", height: "31px", top: "155px", left: "575px" }}></div>
335
+ </div>
336
+ <div className="k-auto-fill-wrapper"></div>
337
+ <div className="k-selection-wrapper">
338
+ <div className="k-spreadsheet-selection-highlight k-series-a" style={{ width: "116px", height: "31px", top: "125px", left: "345px" }}></div>
339
+ <div className="k-spreadsheet-selection-highlight k-series-b" style={{ width: "116px", height: "31px", top: "155px", left: "345px" }}></div>
340
+ </div>
341
+ <div className="k-filter-wrapper"></div>
342
+ <div className="k-spreadsheet-row-header" style={{ width: "30px", top: "30px" }}>
343
+ <div className="k-selection-none" style={{ width: "30px", height: "70px" }}>
344
+ <div className="k-vertical-align-center">1</div>
345
+ </div>
346
+ <div className="k-selection-none" style={{ width: "30px", height: "25px" }}>
347
+ <div className="k-vertical-align-center">2</div>
348
+ </div>
349
+ <div className="k-selection-none" style={{ width: "30px", height: "30px" }}>
350
+ <div className="k-vertical-align-center">3</div>
351
+ </div>
352
+ <div className="k-selection-partial" style={{ width: "30px", height: "30px" }}>
353
+ <div className="k-vertical-align-center">4</div>
354
+ </div>
355
+ <div className="k-selection-none" style={{ width: "30px", height: "30px" }}>
356
+ <div className="k-vertical-align-center">5</div>
357
+ </div>
358
+ <div className="k-selection-none" style={{ width: "30px", height: "30px" }}>
359
+ <div className="k-vertical-align-center">6</div>
360
+ </div>
361
+ <div className="k-selection-none" style={{ width: "30px", height: "30px" }}>
362
+ <div className="k-vertical-align-center">7</div>
363
+ </div>
364
+ <div className="k-selection-none" style={{ width: "30px", height: "30px" }}>
365
+ <div className="k-vertical-align-center">8</div>
366
+ </div>
367
+ <div className="k-selection-none" style={{ width: "30px", height: "30px" }}>
368
+ <div className="k-vertical-align-center">9</div>
369
+ </div>
370
+ <div className="k-selection-none" style={{ width: "30px", height: "30px" }}>
371
+ <div className="k-vertical-align-center">10</div>
372
+ </div>
373
+ <div className="k-selection-none" style={{ width: "30px", height: "30px" }}>
374
+ <div className="k-vertical-align-center">11</div>
375
+ </div>
376
+ <div className="k-selection-none" style={{ width: "30px", height: "30px" }}>
377
+ <div className="k-vertical-align-center">12</div>
378
+ </div>
379
+ <div className="k-selection-none" style={{ width: "30px", height: "30px" }}>
380
+ <div className="k-vertical-align-center">13</div>
381
+ </div>
382
+ </div>
383
+ <div className="k-spreadsheet-column-header" style={{ top: "0px", left: "30px", width: "1199px", height: "30px" }}>
384
+ <div className="k-selection-none" style={{ position: "absolute", left: "0px", width: "100px", height: "30px" }}>
385
+ <div className="k-vertical-align-center">A</div>
386
+ </div>
387
+ <div className="k-selection-none" style={{ position: "absolute", left: "100px", width: "215px", height: "30px" }}>
388
+ <div className="k-vertical-align-center">B</div>
389
+ </div>
390
+ <div className="k-selection-none" style={{ position: "absolute", left: "315px", width: "115px", height: "30px" }}>
391
+ <div className="k-vertical-align-center">C</div>
392
+ </div>
393
+ <div className="k-selection-none" style={{ position: "absolute", left: "430px", width: "115px", height: "30px" }}>
394
+ <div className="k-vertical-align-center">D</div>
395
+ </div>
396
+ <div className="k-selection-partial" style={{ position: "absolute", left: "545px", width: "115px", height: "30px" }}>
397
+ <div className="k-vertical-align-center">E</div>
398
+ </div>
399
+ <div className="k-selection-none" style={{ position: "absolute", left: "660px", width: "155px", height: "30px" }}>
400
+ <div className="k-vertical-align-center">F</div>
401
+ </div>
402
+ <div className="k-selection-none" style={{ position: "absolute", left: "815px", width: "64px", height: "30px" }}>
403
+ <div className="k-vertical-align-center">G</div>
404
+ </div>
405
+ <div className="k-selection-none" style={{ position: "absolute", left: "879px", width: "64px", height: "30px" }}>
406
+ <div className="k-vertical-align-center">H</div>
407
+ </div>
408
+ <div className="k-selection-none" style={{ position: "absolute", left: "943px", width: "64px", height: "30px" }}>
409
+ <div className="k-vertical-align-center">I</div>
410
+ </div>
411
+ <div className="k-selection-none" style={{ position: "absolute", left: "1007px", width: "64px", height: "30px" }}>
412
+ <div className="k-vertical-align-center">J</div>
413
+ </div>
414
+ <div className="k-selection-none" style={{ position: "absolute", left: "1071px", width: "64px", height: "30px" }}>
415
+ <div className="k-vertical-align-center">K</div>
416
+ </div>
417
+ <div className="k-selection-none" style={{ position: "absolute", left: "1135px", width: "64px", height: "30px" }}>
418
+ <div className="k-vertical-align-center">L</div>
419
+ </div>
420
+ </div>
421
+ <div className="k-spreadsheet-cell-editor k-spreadsheet-formula-input" data-role="formulainput" style={{ whiteSpace: "pre", top: "156px", left: "576px", width: "114px", height: "29px", display: "flex", alignItems: "center" }}>
422
+ <span className="k-syntax-startexp">=</span>
423
+ <span className="k-syntax-func">SUM</span>
424
+ <span className="k-syntax-punc">(</span>
425
+ <span className="k-syntax-ref k-series-a">C3</span>
426
+ <span className="k-syntax-op">+</span>
427
+ <span className="k-syntax-ref k-series-a">C4</span>
428
+ <span className="k-syntax-punc">)</span>
429
+ </div>
430
+ </div>
431
+ <div style={{ width: "30px", height: "30px" }} className="k-spreadsheet-top-corner"></div>
432
+ </div>
433
+ <div className="k-spreadsheet-scroller">
434
+ <div className="k-spreadsheet-view-size" style={{ height: "6080px", width: "3663px" }}></div>
435
+ </div>
436
+ <div className="k-spreadsheet-clipboard">
437
+ <table style={{ left: "0px", top: "0px", height: "30px", width: "100px" }} className="kendo-clipboard-eb8ea401-ab97-4190-8fb2-b3b83b299a9f" role="presentation">
438
+ <colgroup>
439
+ <col style={{ width: "100px" }}></col>
440
+ </colgroup>
441
+ <tbody>
442
+ <tr style={{ height: "30px" }}>
443
+ <td style={{ backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", borderColor: "rgb(255, 255, 255)" }}>216321</td>
444
+ </tr>
445
+ </tbody>
446
+ </table>
447
+ </div>
448
+ <div className="k-widget k-tooltip" style={{ position: "absolute", display: "none" }}>A1</div>
449
+ <div className="k-list-group-sticky-header" style={{ display: "none" }}></div>
450
+ <div className="k-list-content k-list-scroller" unselectable="on"></div>
451
+ </div>
452
+ <div className="k-spreadsheet-sheets-bar">
453
+ <Button className="k-spreadsheet-sheet-add" fillMode="flat" icon="plus" />
454
+ <Button className="k-spreadsheet-sheets-menu" fillMode="flat" icon="menu" />
455
+ <div className="k-spreadsheet-sheets k-tabstrip k-tabstrip-bottom k-tabstrip-scrollable">
456
+ <div className="k-tabstrip-items-wrapper k-vstack">
457
+ <ul className="k-reset k-tabstrip-items">
458
+ <li className="k-item k-first">
459
+ <span className="k-link">Sheet 1</span>
460
+ <MenuButton size="medium" showArrow={false} icon="caret-alt-down" fillMode="flat" />
461
+ </li>
462
+ <li className="k-item">
463
+ <span className="k-link">Sheet 2</span>
464
+ <MenuButton size="medium" showArrow={false} icon="caret-alt-down" fillMode="flat" />
465
+ </li>
466
+ <li className="k-item k-active">
467
+ <span className="k-link">Sheet 3</span>
468
+ <MenuButton size="medium" showArrow={false} icon="caret-alt-down" fillMode="flat" />
469
+ </li>
470
+ <li className="k-item k-focus">
471
+ <span className="k-link">Sheet 4</span>
472
+ <MenuButton size="medium" showArrow={false} icon="caret-alt-down" fillMode="flat" />
473
+ </li>
474
+ <li className="k-item">
475
+ <span className="k-link">Sheet 5</span>
476
+ <MenuButton size="medium" showArrow={false} icon="caret-alt-down" fillMode="flat" />
477
+ </li>
478
+ <li className="k-item k-last k-disabled">
479
+ <span className="k-link">Sheet 6</span>
480
+ <MenuButton size="medium" showArrow={false} icon="caret-alt-down" fillMode="flat" />
481
+ </li>
482
+ </ul>
483
+ <Button className="k-tabstrip-prev" fillMode="flat" icon="caret-alt-left" rounded={null} size={null} />
484
+ <Button className="k-tabstrip-next" fillMode="flat" icon="caret-alt-right" rounded={null} size={null} />
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </>
491
+ );