Changeset 25122 in main

Timestamp:

04/27/22 13:37:09 (7 months ago)

Author:

GarthBraithwaite_STG

Message:

view - updated dataviz grid code and css.

Location:

trunk/ibisph-view/src/main/webapp

Files:

• css/DataViz.css (modified) (1 diff)
• xslt/json/Kendo.xslt (modified) (7 diffs)

trunk/ibisph-view/src/main/webapp/css/DataViz.css

@@ -410 +410 @@
 
 
+
+.DataViz.Grid footer
+{
+        display: inline-block;
+        max-width: 800px;
+        width: auto;
+        margin: 0 auto;
+}
+
+.DataViz.Grid .k-grid-expand
+{
+        display: none;
+        float: right;
+    padding: 0.9em 0.5em 0.9em 1em;
+}
+
+.DataViz.Grid.WideOverflow
+{
+        width: 99vw;
+        position: relative;
+        left: calc(50% - 50vw);
+        padding: 0 0.5em 0 1.25em;              /* my screen looks better vs  padding: 0 2em;  */
+}
+.DataViz.Grid.WideOverflow .k-grid
+{
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+}
+.DataViz.Grid.WideOverflow footer
+{
+        display: block;
+}
+/* not sure needed - likely depends on other combinations ???
+.DataViz.Grid .k-grid-footer
+{
+        width: auto;
+}
+
+not sure this is needed either???
 .DataViz.Grid *[data-role="grid"] 
 {
         width: 100%;
 }
+*/
+
 /*============================ End of Style Sheet ============================*/

trunk/ibisph-view/src/main/webapp/xslt/json/Kendo.xslt

@@ -431 +431 @@
         }
 
-
-/*
+<!--
+        CONFIG that should be put in a kendo grid type json file.
+        IMPORTANT NOTES: The grid and column resizing is influenced by the 
+        column widths that are set via kendo parameters, the config settings
+        below, and the css for the grid and the grid container.  Lots of options
+        and configurations of which some are not optimal.  Also if centering 
+        wide grids then need to use the view port.  The footer can either be set
+        to the left or centered without writing script code and attaching...
         ,"ibis":
         {
-                "adjustColumnsSize": true                               // checks size, auto fit, min/max, reduce
+                // count of non hidden columns that determines if size adjustment should
+                // be made.  If 0 then no size adjustments are made and will depend on
+                // the column width params and the assoc css defined for the dataviz grid.
+                // if wanting size adjust for all then set to 1 which could result in 
+                // small column counts limited to actual pixels and not filling the width
+                // of the container.  If column count gt or equal then code checks size, 
+                // auto fits, min/max, reduce as configured.
+                "columnCountAdjustSize": 5                              
                 ,"minColumnSize": 100
                 ,"maxColumnSize": 300
@@ -441 +454 @@
                 ,"reduceColumnSizeMultiplier": 0.33
                 ,"addExpandButton": true                                // only shown if total col size > container size.
-                ,"expandContainerClass": "WideGrid"             // if set and if needs expansion then added.
+                ,"expandContainerClass": "WideOverflow" // if set and if needs expansion then added.
                 ,"forceGridTotalColumnsSize": false             // sets the grid size based on the columns widths.
         }
-*/
+
+captured toolbar configs for future ref
+        ,"toolbar": 
+        [
+                {name: "excel"}
+                ,{ 
+                        name: "expand"
+                        ,text: ""
+//                      ,text: "View Full Width"
+                        ,iconClass: "k-icon k-i-logout"
+//                      ,template: "<a role='button' class='k-button k-grid-expand k-button-icontext k-i-logout' href='javascript:null' title='Click here to expand grid to full width'></a>"
+                }
+-->
 
         // Expand click handler that adds width auto to the grid
@@ -480 +505 @@
                 if(!this.options.ibis) return;
 
+                var notHiddenColumnCount = 0;
+                for (var i = 0; i < this.columns.length; i++) 
+                {
+                        if(!this.columns[i].hidden) notHiddenColumnCount++;
+                }
+
+                var adjustColumnsSize = (this.options.ibis.columnCountAdjustSize && (notHiddenColumnCount >= this.options.ibis.columnCountAdjustSize));
                 var totalColumnsWidth = 0;
                 for (var i = 0; i < this.columns.length; i++) 
@@ -485 +517 @@
                         var columnWidth = this.columns[i].width;
 
-                        if(this.options.ibis.adjustColumnsSize) 
+                        if(adjustColumnsSize) 
                         {
                                 // if undefined or 0 then use kendo auto fit
@@ -500 +532 @@
 
                                 // if min/max set then test and adjust.
-                                if(this.options.ibis.minSize && (columnWidth < this.options.ibis.minSize))
+                                if(this.options.ibis.minColumnSize && (columnWidth < this.options.ibis.minColumnSize))
                                 {
-                                        columnWidth = this.options.ibis.minSize;
+                                        columnWidth = this.options.ibis.minColumnSize;
                                         this.resizeColumn(this.columns[i], columnWidth);
                                 }
-                                else if(this.options.ibis.maxSize && (columnWidth > this.options.ibis.maxSize))
+                                else if(this.options.ibis.maxColumnSize && (columnWidth > this.options.ibis.maxColumnSize))
                                 {
-                                        columnWidth = this.options.ibis.maxSize;
+                                        columnWidth = this.options.ibis.maxColumnSize;
                                         this.resizeColumn(this.columns[i], columnWidth);
                                 }
                         }       // end of if adjusting sizing
 
-                        totalColumnsWidth += columnWidth;
+                        if(columnWidth) totalColumnsWidth += columnWidth;
                 } // end of columns loop
 
@@ -541 +573 @@
 
                 // if force size then set the actual grid size
-                if(this.options.ibis.forceGridTotalColumnsSize)
+                if(this.options.ibis.forceGridTotalColumnsSize && totalColumnsWidth)
                 {
                         this.element[0].style.width = (totalColumnsWidth) + "px";
@@ -547 +579 @@
 
                 // no matter what sizing is applied need to set the footer width to auto
+                // because kendo code sets: padding-right: 17px; and width to container width.
                 this.element[0].querySelector(".k-grid-footer").style.width = "auto";
         ]]>