Skip to content

Commit

Permalink
feat(columnmenu): new jQuery rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@PreslavKozovski @joneff
PreslavKozovski authored and joneff committed Dec 16, 2020
1 parent ad46bc2 commit 4ed62fa
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 1 deletion.
15 changes: 14 additions & 1 deletion packages/default/scss/grid/_layout.scss
View file
Expand Up @@ -1276,7 +1276,11 @@

.k-widget.k-filter-and {
width: 6em;
margin: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x;
}

.k-widget.k-button-group {
width: auto;
display: inline-flex;
}

.k-switch {
Expand Down Expand Up @@ -1433,6 +1437,15 @@
.k-menu:not(.k-context-menu) {
font-weight: 400;
}

.k-expander {
background: inherit;

.k-columnmenu-item {
display: flex;
align-items: center;
}
}
}

[dir="rtl"],
Expand Down
61 changes: 61 additions & 0 deletions tests/visual/grid-column-menu-rtl.html
View file
Expand Up @@ -126,6 +126,67 @@
</kendo-popup>
</div>

<div class="section">

<div class="k-animation-container" style="overflow: visible;">
<div class="k-column-menu k-popup k-group k-reset k-grid-columnmenu-popup k-state-border-up">
<div class="k-columnmenu-item-wrapper">
<div>
<div class="k-columnmenu-item k-sort-asc"><span class="k-icon k-i-sort-asc-sm"></span>Sort Ascending</div>
</div>
<div>
<div class="k-columnmenu-item k-sort-desc k-state-selected"><span class="k-icon k-i-sort-desc-sm"></span>Sort Descending</div>
</div>
</div>
<div class="k-columnmenu-item-wrapper">
<div>
<div class="k-widget k-expander">
<div class="k-columnmenu-item">
<span class="k-icon k-i-columns"></span>Columns
<span class="k-expander-spacer"></span>
<span class="k-expander-indicator k-icon k-i-arrow-chevron-up"></span>
</div>
<div class="k-columnmenu-item-content k-columns-item" style="width: 100%; height: auto; overflow: hidden;">
<div class="k-column-list-wrapper">
<div class="k-column-list">
<label class="k-column-list-item">
<input class="k-checkbox">
<span class="k-checkbox-label">Product Name</span>
</label>
<label class="k-column-list-item">
<input class="k-checkbox">
<span class="k-checkbox-label">Price</span>
</label>
</div>
</div>
<div class="k-columnmenu-actions"><button class="k-button" type="button">Reset</button><button class="k-button k-primary" type="button">Apply</button></div>
</div>
</div>
</div>
</div>
<div class="k-columnmenu-item-wrapper">
<div class="k-widget k-expander">
<div class="k-columnmenu-item">
<span class="k-icon k-i-filter"></span>Filter
<span class="k-expander-spacer"></span>
<span class="k-expander-indicator k-icon k-i-arrow-chevron-down"></span>
</div>
</div>
</div>
<div class="k-columnmenu-item-wrapper">
<div class="k-widget k-expander">
<div class="k-columnmenu-item">
<span class="k-icon k-i-set-column-position"></span>Set Column Position
<span class="k-expander-spacer"></span>
<span class="k-expander-indicator k-icon k-i-arrow-chevron-down"></span>
</div>
</div>
</div>
</div>
</div>

</div>

<div class="section">
<kendo-popup class="k-animation-container k-animation-container-shown">
<div class="k-popup k-grid-filter-popup">
Expand Down
61 changes: 61 additions & 0 deletions tests/visual/grid-column-menu.html
View file
Expand Up @@ -121,6 +121,67 @@
</kendo-popup>
</div>

<div class="section">

<div class="k-animation-container" style="overflow: visible;">
<div class="k-column-menu k-popup k-group k-reset k-grid-columnmenu-popup k-state-border-up">
<div class="k-columnmenu-item-wrapper">
<div>
<div class="k-columnmenu-item k-sort-asc"><span class="k-icon k-i-sort-asc-sm"></span>Sort Ascending</div>
</div>
<div>
<div class="k-columnmenu-item k-sort-desc k-state-selected"><span class="k-icon k-i-sort-desc-sm"></span>Sort Descending</div>
</div>
</div>
<div class="k-columnmenu-item-wrapper">
<div>
<div class="k-widget k-expander">
<div class="k-columnmenu-item">
<span class="k-icon k-i-columns"></span>Columns
<span class="k-expander-spacer"></span>
<span class="k-expander-indicator k-icon k-i-arrow-chevron-up"></span>
</div>
<div class="k-columnmenu-item-content k-columns-item" style="width: 100%; height: auto; overflow: hidden;">
<div class="k-column-list-wrapper">
<div class="k-column-list">
<label class="k-column-list-item">
<input class="k-checkbox">
<span class="k-checkbox-label">Product Name</span>
</label>
<label class="k-column-list-item">
<input class="k-checkbox">
<span class="k-checkbox-label">Price</span>
</label>
</div>
</div>
<div class="k-columnmenu-actions"><button class="k-button" type="button">Reset</button><button class="k-button k-primary" type="button">Apply</button></div>
</div>
</div>
</div>
</div>
<div class="k-columnmenu-item-wrapper">
<div class="k-widget k-expander">
<div class="k-columnmenu-item">
<span class="k-icon k-i-filter"></span>Filter
<span class="k-expander-spacer"></span>
<span class="k-expander-indicator k-icon k-i-arrow-chevron-down"></span>
</div>
</div>
</div>
<div class="k-columnmenu-item-wrapper">
<div class="k-widget k-expander">
<div class="k-columnmenu-item">
<span class="k-icon k-i-set-column-position"></span>Set Column Position
<span class="k-expander-spacer"></span>
<span class="k-expander-indicator k-icon k-i-arrow-chevron-down"></span>
</div>
</div>
</div>
</div>
</div>

</div>

<div class="section">
<kendo-popup class="k-animation-container k-animation-container-shown">
<div class="k-popup k-grid-columnmenu-popup">
Expand Down

0 comments on commit 4ed62fa

Please sign in to comment.