Remove scroll styles

Build/CommonAssemblyInfo.cs

@@ -15,5 +15,5 @@
 //
 // You can specify all the values or you can default the Revision and Build Numbers
 // by using the '*' as shown below:
-[assembly: AssemblyVersion("1.0.84.0")]
-[assembly: AssemblyFileVersion("1.0.84.0")]
+[assembly: AssemblyVersion("1.0.84.1")]
+[assembly: AssemblyFileVersion("1.0.84.1")]

Griddly/Content/griddly.css

@@ -14,12 +14,6 @@
     border-radius: 4px;
 }
 
-    .griddly-scrollable-container
-    {
-        overflow-x:auto;
-        clear:both;
-    }
-
     .griddly table
     {
         border-collapse: collapse;
@@ -92,7 +86,7 @@
         background-color: #f0f0f0;
     }
 
-.griddly-scrollable-container::-webkit-scrollbar {  
+/*.griddly-scrollable-container::-webkit-scrollbar {  
     width: 8px;  
     height:8px;
 }  
@@ -104,12 +98,12 @@
 }  
 .griddly-scrollable-container::-webkit-scrollbar-thumb:hover {  
     background-color: #aaa;  
-}
+}*/
 
 .griddly-filter-popover .popover-content
 {
     padding:0;
-    max-width:200px;
+    width:200px;
 }
 
 .filter-content

Griddly/Scripts/griddly.js

@@ -602,7 +602,7 @@
                     // TODO: figure out how to have griddly in modal and still use body container. as it is, something about the modal
                     // blocks inputs in popovers from getting focus. so as a fallback I put it back in the bouding container, 
                     // which will work but means it will get cut off if griddly is scrollable
-                    container: this.$element.parents(".modal").length ? null : "body",
+                    container: el, // this.$element.parents(".modal").length ? null : "body",
                     template: '<div class="popover griddly-filter-popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
                     content: function ()
                     {

Griddly/Views/Home/Examples.cshtml

@@ -4,13 +4,18 @@
 <div class="row">
     <div class="col-md-12">
         <h2>@ViewBag.Title</h2>
+
+        <h3>Box/List Filter Example</h3>
         @Html.Griddly("FilterBoxGrid", new { test = SortDirection.Ascending })
-        <br />
+
+        <h3>Range Filter Example</h3>
         <a href="javascript:GetFilterValues()">get filter values</a> | <a href="javascript:SetFilterValues()">set filter values</a>
         @Html.Griddly("FilterRangeGrid")
-        <br />
+
+        <h3>Scrollable Example</h3>
         @Html.Griddly("FilterListGrid")
-        <br />
+
+        <h3>Other Random Examples/Tests</h3>
         @Html.Griddly("TestGrid")
     </div>
 </div>
@@ -43,6 +48,33 @@
     {
         $(".filter-range-grid").griddly("setFilterValues", { companyStart: '53' });
     }
+
+    function Scrolly()
+    {
+        var grid = $(".griddly.filter-list-grid");
+        var table = grid.find("table");
+
+
+        // some basic changes to make the grid more conducive to scrolling
+        grid.find(".griddly-scrollable-container").css({ "overflow": "auto", "height": "250px" });
+        grid.find("thead td").css({ "background-color": "white" });
+        grid.css({ "overflow": "hidden" });
+
+        grid.on("refresh.griddly", function ()
+        {
+            table.floatThead({
+                scrollContainer: function ($table)
+                {
+                    return $table.closest(".griddly-scrollable-container");
+                }
+            });
+        });
+
+        grid.griddly("pageSize", 20);
+        grid.griddly("refresh");
+
+        return false;
+    }
 </script>
 
 @section scripts{

Griddly/Views/Home/FilterBoxGrid.cshtml

@@ -1,6 +1,34 @@
 
 @{
     ViewBag.Title = "TestGrid";
+
+    List<SelectListItem> groupedList = new List<SelectListItem>()
+    {
+        new SelectListItemGroup()
+        {
+            Text = "Group1",
+            Items = new List<SelectListItem>()
+            {
+                new SelectListItem() { Text = "Item1", Value = "Item1" },
+                new SelectListItem() { Text = "Item2", Value = "Item2" },
+                new SelectListItem() { Text = "Item3", Value = "Item3" },
+                new SelectListItem() { Text = "Item4", Value = "Item4" },
+                new SelectListItem() { Text = "Item5", Value = "Item5" },
+            }
+        },
+        new SelectListItemGroup()
+        {
+            Text = "Group2",
+            Items = new List<SelectListItem>()
+            {
+                new SelectListItem() { Text = "Item6", Value = "Item6" },
+                new SelectListItem() { Text = "Item7", Value = "Item7" },
+                new SelectListItem() { Text = "Item8", Value = "Item8" },
+                new SelectListItem() { Text = "Item9", Value = "Item9" },
+                new SelectListItem() { Text = "Item10", Value = "Item10" },
+            }
+        }
+    };
 }
 
 @Html.Griddly(new GriddlySettings<TestGridItem>()
@@ -16,10 +44,18 @@
     }
     .Column("test", template: @<a href="http://google.com">google</a>, summaryValue: "Total")
     .Column(x => x.Test, "Sum", format: "c", summaryFunction: SummaryAggregateFunction.Sum)
-        .Column(x => x.Test, "Min", format: "c", summaryFunction: SummaryAggregateFunction.Min)
-        .Column(x => x.Test, "Max", format: "c", summaryFunction: SummaryAggregateFunction.Max)
-        .Column(x => x.Test, "Avg", format: "c", summaryFunction: SummaryAggregateFunction.Average)
-    .Column(x => x.FirstName, "First Name")
+    .Column(x => x.Test, "Min", format: "c", summaryFunction: SummaryAggregateFunction.Min)
+    .Column(x => x.Test, "Max", format: "c", summaryFunction: SummaryAggregateFunction.Max)
+    .Column(x => x.Test, "Avg", format: "c", summaryFunction: SummaryAggregateFunction.Average, filter: x => x.FilterList(groupedList))
+    .Column(x => x.FirstName, "First Name", filter: x =>
+        {
+            GriddlyFilterList filter = x.FilterList(TestGridItem.UsStates);
+
+            filter.CaptionPlural = "State";
+            filter.DisplayItemCount = 2;
+
+            return filter;
+        })
     .Column(x => x.LastName, "Last Name", defaultSort: SortDirection.Ascending, filter: x => x.FilterBox(FilterDataType.String))
     .Column(x => x.Company, "Company", filter: x => x.FilterBox(FilterDataType.Decimal))
     .Column(x => x.Address, "Address", filter: x => x.FilterBox(FilterDataType.Currency))

Griddly/Views/Home/FilterListGrid.cshtml

@@ -1,52 +1,22 @@
 
 @{
     ViewBag.Title = "TestGrid";
-
-    List<SelectListItem> groupedList = new List<SelectListItem>()
-    {
-        new SelectListItemGroup()
-        {
-            Text = "Group1",
-            Items = new List<SelectListItem>()
-            {
-                new SelectListItem() { Text = "Item1", Value = "Item1" },
-                new SelectListItem() { Text = "Item2", Value = "Item2" },
-                new SelectListItem() { Text = "Item3", Value = "Item3" },
-                new SelectListItem() { Text = "Item4", Value = "Item4" },
-                new SelectListItem() { Text = "Item5", Value = "Item5" },
-            }
-        },
-        new SelectListItemGroup()
-        {
-            Text = "Group2",
-            Items = new List<SelectListItem>()
-            {
-                new SelectListItem() { Text = "Item6", Value = "Item6" },
-                new SelectListItem() { Text = "Item7", Value = "Item7" },
-                new SelectListItem() { Text = "Item8", Value = "Item8" },
-                new SelectListItem() { Text = "Item9", Value = "Item9" },
-                new SelectListItem() { Text = "Item10", Value = "Item10" },
-            }
-        }
-    };
 }
 
 @Html.Griddly(new GriddlySettings<TestGridItem>()
     {
-        PageSize = 5
+        PageSize = 5,
+        ClassName = "filter-list-grid"
     }
+
     .Column(x => x.FirstName, "First Name")
-        .Column(x => x.LastName, "Last Name", defaultSort: SortDirection.Ascending)
-            .Column(x => x.City, "City", filter: x => x.FilterEnum<Title>())
-            .Column(x => x.State, "State", filter: x =>
-                {
-                    GriddlyFilterList filter = x.FilterList(TestGridItem.UsStates);
-
-                    filter.CaptionPlural = "State";
-                    filter.DisplayItemCount = 2;
-
-                    return filter;
-                })
-                    .Column(x => x.Address, "Address", filter: x => x.FilterList(groupedList))
-            .Column(x => x.PostalCode, "Gender", filter: x => x.FilterBool("YEAHH", "Naw", "what?"))
+    .Column(x => x.LastName, "Last Name", defaultSort: SortDirection.Ascending)
+    .Column(x => x.City, "City")
+    .Column(x => x.State, "State")
+    .Column(x => x.Address, "Address")
+    .Column(x => x.PostalCode, "Gender")
+    .Column(x => x.PostalCode, "Gender")
+    .Column(x => x.PostalCode, "Gender")
+
+    .Button("Scrolly", "Scrollify with floatThead.js", action: GriddlyButtonAction.Javascript)
 )

Griddly/Views/Shared/_Layout.cshtml

@@ -56,6 +56,7 @@
 
     @Scripts.Render("~/bundles/jquery")
     @Scripts.Render("~/bundles/bootstrap")
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.10/jquery.floatThead.min.js"></script>
     @Scripts.Render("~/scripts/griddly.js")
     @Scripts.Render("~/scripts/bootstrap-multiselect.js")
     @Scripts.Render("~/scripts/SyntaxHighlighter/shCore.js")