Merge pull request #40 from ithielnor/master

ithielnor · ithielnor · commit 223758c6aacd · 2015-02-26T09:54:06.000-05:00
Remove scroll styles
diff --git a/Build/CommonAssemblyInfo.cs b/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")]
diff --git a/Griddly/Content/griddly.css b/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
diff --git a/Griddly/Scripts/griddly.js b/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 ()
                     {
diff --git a/Griddly/Views/Home/Examples.cshtml b/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{
diff --git a/Griddly/Views/Home/FilterBoxGrid.cshtml b/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))
diff --git a/Griddly/Views/Home/FilterListGrid.cshtml b/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)
 )
diff --git a/Griddly/Views/Shared/_Layout.cshtml b/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")

Original file line number	Diff line number	Diff line change
`@@ -14,12 +14,6 @@`
`14`	`14`	`border-radius: 4px;`
`15`	`15`	`}`
`16`	`16`
`17`		`- .griddly-scrollable-container`
`18`		`- {`
`19`		`- overflow-x:auto;`
`20`		`- clear:both;`
`21`		`- }`
`22`		`-`
`23`	`17`	`.griddly table`
`24`	`18`	`{`
`25`	`19`	`border-collapse: collapse;`
`@@ -92,7 +86,7 @@`
`92`	`86`	`background-color: #f0f0f0;`
`93`	`87`	`}`
`94`	`88`
`95`		`-.griddly-scrollable-container::-webkit-scrollbar {`
	`89`	`+/*.griddly-scrollable-container::-webkit-scrollbar {`
`96`	`90`	`width: 8px;`
`97`	`91`	`height:8px;`
`98`	`92`	`}`
`@@ -104,12 +98,12 @@`
`104`	`98`	`}`
`105`	`99`	`.griddly-scrollable-container::-webkit-scrollbar-thumb:hover {`
`106`	`100`	`background-color: #aaa;`
`107`		`-}`
	`101`	`+}*/`
`108`	`102`
`109`	`103`	`.griddly-filter-popover .popover-content`
`110`	`104`	`{`
`111`	`105`	`padding:0;`
`112`		`- max-width:200px;`
	`106`	`+ width:200px;`
`113`	`107`	`}`
`114`	`108`
`115`	`109`	`.filter-content`
Original file line number	Diff line number	Diff line change
`@@ -602,7 +602,7 @@`
`602`	`602`	`// TODO: figure out how to have griddly in modal and still use body container. as it is, something about the modal`
`603`	`603`	`// blocks inputs in popovers from getting focus. so as a fallback I put it back in the bouding container,`
`604`	`604`	`// which will work but means it will get cut off if griddly is scrollable`
`605`		`- container: this.$element.parents(".modal").length ? null : "body",`
	`605`	`+ container: el, // this.$element.parents(".modal").length ? null : "body",`
`606`	`606`	`template: '<div class="popover griddly-filter-popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',`
`607`	`607`	`content: function ()`
`608`	`608`	`{`