Changeset 25122 in main


Ignore:
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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/ibisph-view/src/main/webapp/css/DataViz.css

    r24670 r25122  
    410410
    411411
     412
     413.DataViz.Grid footer
     414{
     415        display: inline-block;
     416        max-width: 800px;
     417        width: auto;
     418        margin: 0 auto;
     419}
     420
     421.DataViz.Grid .k-grid-expand
     422{
     423        display: none;
     424        float: right;
     425    padding: 0.9em 0.5em 0.9em 1em;
     426}
     427
     428.DataViz.Grid.WideOverflow
     429{
     430        width: 99vw;
     431        position: relative;
     432        left: calc(50% - 50vw);
     433        padding: 0 0.5em 0 1.25em;              /* my screen looks better vs  padding: 0 2em;  */
     434}
     435.DataViz.Grid.WideOverflow .k-grid
     436{
     437        margin: 0 auto;
     438        display: flex;
     439        flex-direction: column;
     440}
     441.DataViz.Grid.WideOverflow footer
     442{
     443        display: block;
     444}
     445/* not sure needed - likely depends on other combinations ???
     446.DataViz.Grid .k-grid-footer
     447{
     448        width: auto;
     449}
     450
     451not sure this is needed either???
    412452.DataViz.Grid *[data-role="grid"]
    413453{
    414454        width: 100%;
    415455}
     456*/
     457
    416458/*============================ End of Style Sheet ============================*/
  • trunk/ibisph-view/src/main/webapp/xslt/json/Kendo.xslt

    r25119 r25122  
    431431        }
    432432
    433 
    434 /*
     433<!--
     434        CONFIG that should be put in a kendo grid type json file.
     435        IMPORTANT NOTES: The grid and column resizing is influenced by the
     436        column widths that are set via kendo parameters, the config settings
     437        below, and the css for the grid and the grid container.  Lots of options
     438        and configurations of which some are not optimal.  Also if centering
     439        wide grids then need to use the view port.  The footer can either be set
     440        to the left or centered without writing script code and attaching...
    435441        ,"ibis":
    436442        {
    437                 "adjustColumnsSize": true                               // checks size, auto fit, min/max, reduce
     443                // count of non hidden columns that determines if size adjustment should
     444                // be made.  If 0 then no size adjustments are made and will depend on
     445                // the column width params and the assoc css defined for the dataviz grid.
     446                // if wanting size adjust for all then set to 1 which could result in
     447                // small column counts limited to actual pixels and not filling the width
     448                // of the container.  If column count gt or equal then code checks size,
     449                // auto fits, min/max, reduce as configured.
     450                "columnCountAdjustSize": 5                             
    438451                ,"minColumnSize": 100
    439452                ,"maxColumnSize": 300
     
    441454                ,"reduceColumnSizeMultiplier": 0.33
    442455                ,"addExpandButton": true                                // only shown if total col size > container size.
    443                 ,"expandContainerClass": "WideGrid"             // if set and if needs expansion then added.
     456                ,"expandContainerClass": "WideOverflow" // if set and if needs expansion then added.
    444457                ,"forceGridTotalColumnsSize": false             // sets the grid size based on the columns widths.
    445458        }
    446 */
     459
     460captured toolbar configs for future ref
     461        ,"toolbar":
     462        [
     463                {name: "excel"}
     464                ,{
     465                        name: "expand"
     466                        ,text: ""
     467//                      ,text: "View Full Width"
     468                        ,iconClass: "k-icon k-i-logout"
     469//                      ,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>"
     470                }
     471-->
    447472
    448473        // Expand click handler that adds width auto to the grid
     
    480505                if(!this.options.ibis) return;
    481506
     507                var notHiddenColumnCount = 0;
     508                for (var i = 0; i < this.columns.length; i++)
     509                {
     510                        if(!this.columns[i].hidden) notHiddenColumnCount++;
     511                }
     512
     513                var adjustColumnsSize = (this.options.ibis.columnCountAdjustSize && (notHiddenColumnCount >= this.options.ibis.columnCountAdjustSize));
    482514                var totalColumnsWidth = 0;
    483515                for (var i = 0; i < this.columns.length; i++)
     
    485517                        var columnWidth = this.columns[i].width;
    486518
    487                         if(this.options.ibis.adjustColumnsSize)
     519                        if(adjustColumnsSize)
    488520                        {
    489521                                // if undefined or 0 then use kendo auto fit
     
    500532
    501533                                // if min/max set then test and adjust.
    502                                 if(this.options.ibis.minSize && (columnWidth < this.options.ibis.minSize))
     534                                if(this.options.ibis.minColumnSize && (columnWidth < this.options.ibis.minColumnSize))
    503535                                {
    504                                         columnWidth = this.options.ibis.minSize;
     536                                        columnWidth = this.options.ibis.minColumnSize;
    505537                                        this.resizeColumn(this.columns[i], columnWidth);
    506538                                }
    507                                 else if(this.options.ibis.maxSize && (columnWidth > this.options.ibis.maxSize))
     539                                else if(this.options.ibis.maxColumnSize && (columnWidth > this.options.ibis.maxColumnSize))
    508540                                {
    509                                         columnWidth = this.options.ibis.maxSize;
     541                                        columnWidth = this.options.ibis.maxColumnSize;
    510542                                        this.resizeColumn(this.columns[i], columnWidth);
    511543                                }
    512544                        }       // end of if adjusting sizing
    513545
    514                         totalColumnsWidth += columnWidth;
     546                        if(columnWidth) totalColumnsWidth += columnWidth;
    515547                } // end of columns loop
    516548
     
    541573
    542574                // if force size then set the actual grid size
    543                 if(this.options.ibis.forceGridTotalColumnsSize)
     575                if(this.options.ibis.forceGridTotalColumnsSize && totalColumnsWidth)
    544576                {
    545577                        this.element[0].style.width = (totalColumnsWidth) + "px";
     
    547579
    548580                // no matter what sizing is applied need to set the footer width to auto
     581                // because kendo code sets: padding-right: 17px; and width to container width.
    549582                this.element[0].querySelector(".k-grid-footer").style.width = "auto";
    550583        ]]>
Note: See TracChangeset for help on using the changeset viewer.