-
Notifications
You must be signed in to change notification settings - Fork 66
/
grid-filter-menu-popup-angular.html
134 lines (129 loc) · 16.2 KB
/
grid-filter-menu-popup-angular.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en" class="k-no-animations">
<head>
<title>Grid Filter Menu</title>
<meta charset="utf-8" />
<link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css"/>
<link rel="stylesheet" href="/packages/html/assets/styles.css"/>
<script src="/packages/html/assets/scripts.js"></script>
</head>
<body id="app" class="k-body">
<style>
.k-animation-container,
.k-popup {
position: relative;
overflow: visible;
}
.k-animation-container {
display: inline-block;
}
</style>
<div id="test-area" class="k-d-grid k-grid-cols-2">
<!-- Angular rendering -->
<section>
<kendo-popup class="k-animation-container" style="z-index: 2;">
<div class="k-popup k-grid-filter-popup">
<kendo-grid-filter-menu-container >
<form class="k-filter-menu k-group k-reset k-state-border-up">
<div class="k-filter-menu-container">
<kendo-grid-date-filter-menu>
<kendo-grid-date-filter-menu-input>
<kendo-grid-filter-menu-input-wrapper>
<kendo-dropdownlist kendofiltermenudropdown="" textfield="text" valuefield="value" aria-describedby="45529b73-e848-419e-8565-d476b06e1e15" class="k-picker-md k-rounded-md k-picker-solid k-dropdownlist k-picker" aria-disabled="false" id="k-8b637fc3-2c88-4b34-aee4-176ba45012a0" dir="ltr" tabindex="0" readonly="false" aria-readonly="false" role="listbox" aria-haspopup="listbox" aria-expanded="false" aria-label="Product Name Filter Operators"><!----><span class="k-input-inner" role="option" unselectable="on" id="45529b73-e848-419e-8565-d476b06e1e15"><span class="k-input-value-text"><!----><!---->Is after or equal to</span></span><button class="k-input-button k-button k-icon-button k-button-md k-button-solid k-button-solid-base" tabindex="-1" type="button" unselectable="on" aria-label="Select"><span class="k-button-icon k-icon k-i-arrow-s" unselectable="on"></span></button><!----><!----><!----></kendo-dropdownlist>
<kendo-datepicker class="k-datepicker k-input k-input-md k-rounded-md k-input-solid"><!----><kendo-dateinput fillmode="none" rounded="none" size="none" class="k-input k-dateinput"><!----><input autocapitalize="none" autocomplete="off" autocorrect="off" class="k-input-inner" spellcheck="false" role="spinbutton" aria-readonly="false" id="k-0215a42e-d88c-41d3-803c-437e7a867956" title="" tabindex="0" aria-expanded="false" aria-haspopup="true" aria-label="First Ordered On Filter"><!----></kendo-dateinput><button class="k-input-button k-button k-icon-button k-button-md k-button-solid k-button-solid-base" type="button" tabindex="-1" title="Toggle Calendar" aria-label="Toggle Calendar"><span class="k-button-icon k-icon k-i-calendar"></span></button><!----><!----></kendo-datepicker>
</kendo-grid-filter-menu-input-wrapper>
</kendo-grid-date-filter-menu-input>
<kendo-dropdownlist kendofiltermenudropdown="" textfield="text" valuefield="value" aria-describedby="45529b73-e848-419e-8565-d476b06e1e15" class="k-picker-md k-rounded-md k-picker-solid k-dropdownlist k-picker k-filter-and" aria-disabled="false" id="k-8b637fc3-2c88-4b34-aee4-176ba45012a0" dir="ltr" tabindex="0" readonly="false" aria-readonly="false" role="listbox" aria-haspopup="listbox" aria-expanded="false" aria-label="Product Name Filter Operators"><!----><span class="k-input-inner" role="option" unselectable="on" id="45529b73-e848-419e-8565-d476b06e1e15"><span class="k-input-value-text"><!----><!---->And</span></span><button class="k-input-button k-button k-icon-button k-button-md k-button-solid k-button-solid-base" tabindex="-1" type="button" unselectable="on" aria-label="Select"><span class="k-button-icon k-icon k-i-arrow-s" unselectable="on"></span></button><!----><!----><!----></kendo-dropdownlist>
<kendo-grid-date-filter-menu-input>
<kendo-grid-filter-menu-input-wrapper>
<kendo-dropdownlist kendofiltermenudropdown="" textfield="text" valuefield="value" aria-describedby="45529b73-e848-419e-8565-d476b06e1e15" class="k-picker-md k-rounded-md k-picker-solid k-dropdownlist k-picker" aria-disabled="false" id="k-8b637fc3-2c88-4b34-aee4-176ba45012a0" dir="ltr" tabindex="0" readonly="false" aria-readonly="false" role="listbox" aria-haspopup="listbox" aria-expanded="false" aria-label="Product Name Filter Operators"><!----><span class="k-input-inner" role="option" unselectable="on" id="45529b73-e848-419e-8565-d476b06e1e15"><span class="k-input-value-text"><!----><!---->Is after or equal to</span></span><button class="k-input-button k-button k-icon-button k-button-md k-button-solid k-button-solid-base" tabindex="-1" type="button" unselectable="on" aria-label="Select"><span class="k-button-icon k-icon k-i-arrow-s" unselectable="on"></span></button><!----><!----><!----></kendo-dropdownlist>
<kendo-datepicker class="k-datepicker k-input k-input-md k-rounded-md k-input-solid"><!----><kendo-dateinput fillmode="none" rounded="none" size="none" class="k-input k-dateinput"><!----><input autocapitalize="none" autocomplete="off" autocorrect="off" class="k-input-inner" spellcheck="false" role="spinbutton" aria-readonly="false" id="k-0215a42e-d88c-41d3-803c-437e7a867956" title="" tabindex="0" aria-expanded="false" aria-haspopup="true" aria-label="First Ordered On Filter"><!----></kendo-dateinput><button class="k-input-button k-button k-icon-button k-button-md k-button-solid k-button-solid-base" type="button" tabindex="-1" title="Toggle Calendar" aria-label="Toggle Calendar"><span class="k-button-icon k-icon k-i-calendar"></span></button><!----><!----></kendo-datepicker>
</kendo-grid-filter-menu-input-wrapper>
</kendo-grid-date-filter-menu-input>
</kendo-grid-date-filter-menu>
<div class="k-actions k-actions-stretched k-actions-horizontal"><button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"><span class="k-button-text">Clear</span></button><button class="k-button k-button-md k-button-solid k-button-solid-primary k-rounded-md"><span class="k-button-text">Filter</span></button></div>
</div>
</form>
</kendo-grid-filter-menu-container>
</div>
</kendo-popup>
</section>
<!-- Angular rendering - Numeric Grid Filter Menu -->
<section>
<kendo-popup class="k-animation-container k-animation-container-shown">
<div class="k-popup k-grid-columnmenu-popup">
<kendo-grid-columnmenu-container class="ng-star-inserted">
<kendo-grid-columnmenu-sort class="k-columnmenu-item-wrapper ng-star-inserted">
<kendo-grid-columnmenu-item>
<div class="k-columnmenu-item">
<span class="k-icon k-i-sort-asc-small"></span> Sort Ascending
</div>
</kendo-grid-columnmenu-item>
<kendo-grid-columnmenu-item>
<div role="button" class="k-columnmenu-item">
<span class="k-icon k-i-sort-desc-small"></span> Sort Descending
</div>
</kendo-grid-columnmenu-item>
</kendo-grid-columnmenu-sort>
<kendo-grid-columnmenu-chooser class="k-columnmenu-item-wrapper">
<kendo-grid-columnmenu-item>
<div class="k-columnmenu-item">
<span class="k-icon k-i-columns"></span> Columns
</div>
</kendo-grid-columnmenu-item>
</kendo-grid-columnmenu-chooser>
<kendo-grid-columnmenu-filter class="k-columnmenu-item-wrapper">
<kendo-grid-columnmenu-item>
<div class="k-columnmenu-item">
<span class="k-icon k-i-filter"></span> Filter
</div>
<div class="k-columnmenu-item-content">
<kendo-grid-filter-menu-container>
<form class="k-filter-menu k-group k-reset k-state-border-up ng-untouched ng-pristine ng-valid">
<div class="k-filter-menu-container">
<kendo-grid-numeric-filter-menu>
<kendo-grid-numeric-filter-menu-input>
<kendo-grid-filter-menu-input-wrapper>
<kendo-dropdownlist kendofiltermenudropdown="" textfield="text" valuefield="value" aria-describedby="45529b73-e848-419e-8565-d476b06e1e15" class="k-picker-md k-rounded-md k-picker-solid k-dropdownlist k-picker" aria-disabled="false" id="k-8b637fc3-2c88-4b34-aee4-176ba45012a0" dir="ltr" tabindex="0" readonly="false" aria-readonly="false" role="listbox" aria-haspopup="listbox" aria-expanded="false" aria-label="Product Name Filter Operators"><!----><span class="k-input-inner" role="option" unselectable="on" id="45529b73-e848-419e-8565-d476b06e1e15"><span class="k-input-value-text"><!----><!---->Is equal to</span></span><button class="k-input-button k-button k-icon-button k-button-md k-button-solid k-button-solid-base" tabindex="-1" type="button" unselectable="on" aria-label="Select"><span class="k-button-icon k-icon k-i-arrow-s" unselectable="on"></span></button><!----><!----><!----></kendo-dropdownlist>
<kendo-numerictextbox kendofilterinput="" dir="ltr" class="k-input k-numerictextbox k-input-md k-rounded-md k-input-solid"><!----><input autocomplete="off" autocorrect="off" class="k-input-inner" role="spinbutton" id="k-eae69a74-79a9-4362-8e3d-835091286940" title="" tabindex="0" aria-label="Unit Price Filter"><!----><span class="k-input-spinner k-spin-button"><button class="k-spinner-increase k-button k-icon-button k-button-solid k-button-solid-base" tabindex="-1" type="button" aria-hidden="true" aria-label="Increment" title="Increment"><span class="k-button-icon k-icon k-i-arrow-n"></span></button><button class="k-spinner-decrease k-button k-icon-button k-button-solid k-button-solid-base" tabindex="-1" type="button" aria-hidden="true" aria-label="Decrement" title="Decrement"><span class="k-button-icon k-icon k-i-arrow-s"></span></button></span></kendo-numerictextbox>
</kendo-grid-filter-menu-input-wrapper>
</kendo-grid-numeric-filter-menu-input>
<kendo-dropdownlist kendofiltermenudropdown="" textfield="text" valuefield="value" aria-describedby="45529b73-e848-419e-8565-d476b06e1e15" class="k-picker-md k-rounded-md k-picker-solid k-dropdownlist k-picker k-filter-and" aria-disabled="false" id="k-8b637fc3-2c88-4b34-aee4-176ba45012a0" dir="ltr" tabindex="0" readonly="false" aria-readonly="false" role="listbox" aria-haspopup="listbox" aria-expanded="false" aria-label="Product Name Filter Operators"><!----><span class="k-input-inner" role="option" unselectable="on" id="45529b73-e848-419e-8565-d476b06e1e15"><span class="k-input-value-text"><!----><!---->And</span></span><button class="k-input-button k-button k-icon-button k-button-md k-button-solid k-button-solid-base" tabindex="-1" type="button" unselectable="on" aria-label="Select"><span class="k-button-icon k-icon k-i-arrow-s" unselectable="on"></span></button><!----><!----><!----></kendo-dropdownlist>
</kendo-grid-numeric-filter-menu>
<div class="k-columnmenu-actions k-actions k-actions-horizontal"><button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"><span class="k-button-text">Clear</span></button><button class="k-button k-button-md k-button-solid k-button-solid-primary k-rounded-md"><span class="k-button-text">Filter</span></button></div>
</div>
</form>
</kendo-grid-filter-menu-container>
</div>
</kendo-grid-columnmenu-item>
</kendo-grid-columnmenu-filter>
</kendo-grid-columnmenu-container>
</div>
</kendo-popup>
</section>
<!-- Angular rendering - Grid Filter Menu template with Switch component -->
<section>
<kendo-popup class="k-animation-container">
<div class="k-popup k-grid-filter-popup">
<kendo-grid-filter-menu-container>
<form class="k-filter-menu k-group k-reset k-state-border-up">
<div class="k-filter-menu-container">
<kendo-grid-string-filter-menu>
<kendo-grid-string-filter-menu-input>
<kendo-grid-filter-menu-input-wrapper>
<kendo-dropdownlist kendofiltermenudropdown="" textfield="text" valuefield="value" aria-describedby="45529b73-e848-419e-8565-d476b06e1e15" class="k-picker-md k-rounded-md k-picker-solid k-dropdownlist k-picker" aria-disabled="false" id="k-8b637fc3-2c88-4b34-aee4-176ba45012a0" dir="ltr" tabindex="0" readonly="false" aria-readonly="false" role="listbox" aria-haspopup="listbox" aria-expanded="false" aria-label="Product Name Filter Operators"><!----><span class="k-input-inner" role="option" unselectable="on" id="45529b73-e848-419e-8565-d476b06e1e15"><span class="k-input-value-text"><!----><!----></span></span><button class="k-input-button k-button k-icon-button k-button-md k-button-solid k-button-solid-base" tabindex="-1" type="button" unselectable="on" aria-label="Select"><span class="k-button-icon k-icon k-i-arrow-s" unselectable="on"></span></button><!----><!----><!----></kendo-dropdownlist>
<input kendofilterinput="" kendotextbox="" class="ng-pristine ng-valid k-textbox k-input k-input-md k-rounded-md k-input-solid ng-touched" aria-label="Product Name Filter">
</kendo-grid-filter-menu-input-wrapper>
</kendo-grid-string-filter-menu-input>
</kendo-grid-string-filter-menu>
<kendo-switch class="k-switch ng-valid k-switch-md k-rounded-full ng-dirty ng-touched k-switch-off" dir="ltr" aria-readonly="false"><!----><span class="k-switch-track k-rounded-full" role="switch" id="k-ebbf3a65-8061-4ade-a43c-f202ad894bf0" style="transition-duration: 200ms;" aria-checked="false" tabindex="0"><span class="k-switch-label-on" aria-hidden="true">ON</span><span class="k-switch-label-off" aria-hidden="true"></span></span><span class="k-switch-thumb-wrap" tabindex="-1" style="transition-duration: 200ms;"><span class="k-switch-thumb k-rounded-full"></span></span></kendo-switch>
<div class="k-action-buttons k-button-group"><button class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" type="reset">Clear</button><button class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" type="submit">Filter</button></div>
</div>
</form>
</kendo-grid-filter-menu-container>
</div>
</kendo-popup>
</section>
</div>
</body>
</html>