Skip to content

Commit abc146e

Browse files
programcsharpprogramcsharp
committed
Allow selecting/clearing grouped inline filter list items by clicking the group header
1 parent f2160e1 commit abc146e

File tree

4 files changed

+65
-20
lines changed

4 files changed

+65
-20
lines changed

‎Griddly/Content/griddly.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@
144144

145145
.filter-content .dropdown-menu li.griddly-list-group-header
146146
{
147-
padding-left:2px;
147+
148148
}
149149

150150
.filter-content .dropdown-menu li.griddly-list-group a

‎Griddly/Scripts/griddly.js‎

Lines changed: 46 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -702,26 +702,49 @@
702702

703703
$("a", el).click(function()
704704
{
705-
var checkbox = $(this).find("input");
706705
var item = $(this).parents("li");
707706

708-
var filter = checkbox.data("griddly-filter");
709-
710-
if (filter.data("griddly-filter-ismultiple"))
707+
if (item.hasClass("griddly-list-group-header"))
711708
{
712-
item.toggleClass("griddly-filter-selected");
709+
var children = item.nextUntil(".griddly-list-group-header");
710+
711+
if (children.length != children.filter(".griddly-filter-selected").length)
712+
{
713+
item.addClass("griddly-filter-selected");
714+
715+
children.addClass("griddly-filter-selected");
716+
children.find("input").prop("checked", true).first().change();
717+
}
718+
else
719+
{
720+
item.removeClass("griddly-filter-selected");
713721

714-
checkbox.prop("checked", item.hasClass("griddly-filter-selected")).change();
722+
children.removeClass("griddly-filter-selected");
723+
children.find("input").prop("checked", false).first().change();
724+
}
715725
}
716726
else
717727
{
718-
var content = filter.data("griddly-filter-content");
728+
var checkbox = $(this).find("input");
729+
730+
var filter = checkbox.data("griddly-filter");
731+
732+
if (filter.data("griddly-filter-ismultiple"))
733+
{
734+
item.toggleClass("griddly-filter-selected");
735+
736+
checkbox.prop("checked", item.hasClass("griddly-filter-selected")).change();
737+
}
738+
else
739+
{
740+
var content = filter.data("griddly-filter-content");
719741

720-
content.find(".dropdown-menu li:not(.griddly-list-group-header)").not(item).removeClass("griddly-filter-selected");
721-
content.find("input").not(checkbox).prop("checked", false);
742+
content.find(".dropdown-menu li:not(.griddly-list-group-header)").not(item).removeClass("griddly-filter-selected");
743+
content.find("input").not(checkbox).prop("checked", false);
722744

723-
item.addClass("griddly-filter-selected");
724-
checkbox.prop("checked", true).change();
745+
item.addClass("griddly-filter-selected");
746+
checkbox.prop("checked", true).change();
747+
}
725748
}
726749
});
727750
}, this));
@@ -730,9 +753,14 @@
730753
{
731754
var self = this;
732755

756+
var checkbox = $(el).parents(".filter-content").find("input:first");
757+
var filter = checkbox.data("griddly-filter");
758+
759+
var selector = ".dropdown-menu li" + (!filter.data("griddly-filter-ismultiple") ? ":not(.griddly-list-group-header)" : "");
760+
733761
$(el).click(function ()
734762
{
735-
$(this).parents(".filter-content").find(".dropdown-menu li:not(.griddly-list-group-header)").addClass("griddly-filter-selected");
763+
$(this).parents(".filter-content").find(selector).addClass("griddly-filter-selected");
736764
$(this).parents(".filter-content").find("input").prop("checked", true).first().change();
737765
});
738766
}, this));
@@ -741,9 +769,14 @@
741769
{
742770
var self = this;
743771

772+
var checkbox = $(el).parents(".filter-content").find("input:first");
773+
var filter = checkbox.data("griddly-filter");
774+
775+
var selector = ".dropdown-menu li" + (!filter.data("griddly-filter-ismultiple") ? ":not(.griddly-list-group-header)" : "");
776+
744777
$(el).click(function ()
745778
{
746-
$(this).parents(".filter-content").find(".dropdown-menu li:not(.griddly-list-group-header)").removeClass("griddly-filter-selected");
779+
$(this).parents(".filter-content").find(selector).removeClass("griddly-filter-selected");
747780
$(this).parents(".filter-content").find("input").prop("checked", false).first().change();
748781
});
749782
}, this));

‎Griddly/Views/Home/FilterBoxGrid.cshtml‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@
2121
Text = "Group2",
2222
Items = new List<SelectListItem>()
2323
{
24-
new SelectListItem() { Text = "Item6", Value = "Item6" },
25-
new SelectListItem() { Text = "Item7", Value = "Item7" },
26-
new SelectListItem() { Text = "Item8", Value = "Item8" },
27-
new SelectListItem() { Text = "Item9", Value = "Item9" },
28-
new SelectListItem() { Text = "Item10", Value = "Item10" },
24+
new SelectListItem() { Text = "Item6", Value = "Item6", Selected = true },
25+
new SelectListItem() { Text = "Item7", Value = "Item7", Selected = true },
26+
new SelectListItem() { Text = "Item8", Value = "Item8", Selected = true },
27+
new SelectListItem() { Text = "Item9", Value = "Item9", Selected = true },
28+
new SelectListItem() { Text = "Item10", Value = "Item10", Selected = true },
2929
}
3030
}
3131
};

‎Griddly/Views/Shared/Griddly/GriddlyFilterInline.cshtml‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,19 @@
192192

193193
if (group != null)
194194
{
195-
<li class="griddly-list-group-header"><b>@group.Text</b></li>
195+
<li class="griddly-list-group-header @(filterList.IsMultiple && group.Items.All(x => x.Selected) ? "griddly-filter-selected" : null)">
196+
@if (filterList.IsMultiple)
197+
{
198+
<a>
199+
<b>@group.Text</b>
200+
<i class="glyphicon glyphicon-ok griddly-filter-selected-indicator"></i>
201+
</a>
202+
}
203+
else
204+
{
205+
<b>@group.Text</b>
206+
}
207+
</li>
196208
foreach (SelectListItem childItem in group.Items)
197209
{
198210
@RenderListItem(filterList, childItem, true)

0 commit comments

Comments
 (0)