Changeset 25119 in main


Ignore:
Timestamp:
04/26/22 23:58:51 (3 weeks ago)
Author:
GarthBraithwaite_STG
Message:

view - Kendo.xslt json to include expand handler and grid column size options.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/ibisph-view/src/main/webapp/xslt/json/Kendo.xslt

    r24487 r25119  
    5757
    5858        <xsl:param name="Kendo.missingValueReplacementValue" select="'null'"/>
     59
     60
     61        <xsl:param name="Kendo.gridLockColumns"    select="false"
     62                ibis:doc="true = sets the locked of the main cat/series/const/measure
     63                        grid colums.  If only set locked on the last main column then that
     64                        column is listed first with all other columns scrollable even though
     65                        some of those columns are listed before.  As such if true all of the
     66                        main columns are locked.  lockable is true by default.
     67                "
     68        />
     69        <xsl:param name="Kendo.gridColumnWidth"    select="150"
     70                ibis:doc="Controls the main cat/ser/con/measure/note column size (px).
     71                        If ibis option set 0 = auto Kendo size else ibis code will not process
     72                        and uses set value.
     73                "
     74        />   
     75        <xsl:param name="Kendo.gridAVColumnWidth"  select="120"
     76                ibis:doc="Same as Kendo.gridColumnWidth but applies to ancillary value columms."
     77        />
     78        <!-- GRID COLUMN WIDTH NOTES:
     79                - if one column width is not specified then grid widths will be somewhat
     80                        set via code and will result in smaller table.  If both set to 0 or
     81                        both specified then grid will be full size or larger with expand button. 
     82                - Even if setting the width or using the auto size these are still html
     83                        tables and subject to the browser.
     84        -->
    5985
    6086
     
    278304                        "field":  "<xsl:value-of select="$seriesDimensionField/NAME"/>SortOrder"
    279305                        ,"title": "<xsl:value-of select="$seriesDimensionField/TITLE"/> Sort Order"     
     306                        ,"hidden": true
     307                        ,"locked": <xsl:value-of select="$Kendo.gridLockColumns"/>
     308                        <xsl:if test="0 != $Kendo.gridColumnWidth">,"width": <xsl:value-of select="$Kendo.gridColumnWidth"/></xsl:if>
    280309                        ,"groupHeaderTemplate": "#=items[0].SeriesTitle#"
    281                         ,"hidden": true
    282310                }
    283311                ,{
     
    286314                        ,"attributes": {"class": "SeriesColumn Dimension"}             
    287315                        ,"sortable": false
    288                         <xsl:if test="$showFooterRow">
    289                         ,"footerTemplate": "<div><xsl:value-of select="$Kendo.gridFooterRowTitle"/></div>"
    290                         </xsl:if>
     316                        ,"locked": <xsl:value-of select="$Kendo.gridLockColumns"/>
     317                        <xsl:if test="0 != $Kendo.gridColumnWidth">,"width": <xsl:value-of select="$Kendo.gridColumnWidth"/></xsl:if>
     318                        <xsl:if test="$showFooterRow">,"footerTemplate": "<div><xsl:value-of select="$Kendo.gridFooterRowTitle"/></div>"</xsl:if>
    291319                }
    292320                ,
     
    296324                        ,"title": "<xsl:value-of select="$categoryDimensionField/TITLE"/>"     
    297325                        ,"attributes": {"class": "Dimension"}           
    298                         <xsl:if test="$showFooterRow and (2 gt number($seriesDimensionField/DIMENSION_VALUES_COUNT))">
    299                         ,"footerTemplate": "<xsl:value-of select="$Kendo.gridFooterRowTitle"/>"</xsl:if>
     326                        ,"locked": <xsl:value-of select="$Kendo.gridLockColumns"/>
     327                        <xsl:if test="0 != $Kendo.gridColumnWidth">,"width": <xsl:value-of select="$Kendo.gridColumnWidth"/></xsl:if>
     328                        <xsl:if test="$showFooterRow and (2 gt number($seriesDimensionField/DIMENSION_VALUES_COUNT))">,"footerTemplate": "<xsl:value-of select="$Kendo.gridFooterRowTitle"/>"</xsl:if>
    300329                }<xsl:text/>
    301330                ,{
    302331                        "field":  "<xsl:value-of select="$categoryDimensionField/NAME"/>SortOrder"
    303332                        ,"title": "<xsl:value-of select="$categoryDimensionField/TITLE"/> Sort Order"   
     333                        ,"hidden": true
     334                        ,"locked": <xsl:value-of select="$Kendo.gridLockColumns"/>
     335                        <xsl:if test="0 != $Kendo.gridColumnWidth">,"width": <xsl:value-of select="$Kendo.gridColumnWidth"/></xsl:if>
    304336                        ,"groupHeaderTemplate": "#=items[0].CategoryTitle#"
    305                         ,"hidden": true
    306337                }
    307338
     
    311342                        ,"title": "<xsl:value-of select="$constantDimensionField/TITLE"/>"     
    312343                        ,"attributes": {"class": "Dimension"}
     344                        <xsl:if test="0 != $Kendo.gridColumnWidth">,"width": <xsl:value-of select="$Kendo.gridColumnWidth"/></xsl:if>
    313345                }
    314346                </xsl:if>
     
    316348                ,{
    317349                        "field": "MeasureValueTitle"
    318                         ,"title": "<xsl:sequence select="$measureTitle"/>"
     350                        ,"title": "<xsl:value-of select="$measureTitle"/>"
    319351                        ,"attributes": {"class": "Value"}
     352                        ,"locked": <xsl:value-of select="$Kendo.gridLockColumns"/>
     353                        <xsl:if test="0 != $Kendo.gridColumnWidth">,"width": <xsl:value-of select="$Kendo.gridColumnWidth"/></xsl:if>
     354                        ,"template": "#=MeasureValueTitle#"
    320355                        ,"sortable":
    321356                        {
     
    342377                        ,"template": "#=<xsl:value-of select="current()/NAME"/>Title#"
    343378                        ,"attributes": {"class": "Value"}
     379                        <xsl:if test="0 != $Kendo.gridColumnAVWidth">,"width": <xsl:value-of select="$Kendo.gridColumnAVWidth"/></xsl:if>
    344380                        ,"sortable":
    345381                        {
     
    350386                                }
    351387                        }
    352                         <xsl:if test="$showFooterRow">
    353                         ,"footerTemplate":"<xsl:value-of select="$datasetRecordTotalValues/DATASET_RECORD_TOTAL_VALUE[NAME = current()/NAME]/TITLE"/>"</xsl:if>
     388                        <xsl:if test="$showFooterRow">,"footerTemplate":"<xsl:value-of select="$datasetRecordTotalValues/DATASET_RECORD_TOTAL_VALUE[NAME = current()/NAME]/TITLE"/>"</xsl:if>
    354389                }
    355390                </xsl:for-each>
     
    360395                        ,"title": "<xsl:value-of select="$Kendo.labelColumnTitle"/>"
    361396                        ,"attributes": {"class": "Notes"}
     397                        <xsl:if test="0 != $Kendo.gridColumnAVWidth">,"width": <xsl:value-of select="$Kendo.gridColumnAVWidth"/></xsl:if>
    362398                }<xsl:text/>
    363399                </xsl:if>
     
    368404                        ,"title": "<xsl:value-of select="$Kendo.valueAttributeColumnTitle"/>"
    369405                        ,"attributes": {"class": "Notes"}
     406                        <xsl:if test="0 != $Kendo.gridColumnAVWidth">,"width": <xsl:value-of select="$Kendo.gridColumnAVWidth"/></xsl:if>
    370407                }<xsl:text/>
    371408                </xsl:if>
     
    376413                        ,"title": "<xsl:value-of select="$Kendo.noteColumnTitle"/>"
    377414                        ,"attributes": {"class": "Notes"}
     415                        <xsl:if test="0 != $Kendo.gridColumnWidth">,"width": <xsl:value-of select="$Kendo.gridColumnWidth"/></xsl:if>
    378416                }<xsl:text/>
    379417                </xsl:if>
     
    391429        {
    392430                "fileName": "<xsl:value-of select="$baseExportFilename"/>.pdf"
     431        }
     432
     433
     434/*
     435        ,"ibis":
     436        {
     437                "adjustColumnsSize": true                               // checks size, auto fit, min/max, reduce
     438                ,"minColumnSize": 100
     439                ,"maxColumnSize": 300
     440                ,"reduceColumnQualifierSize": 300
     441                ,"reduceColumnSizeMultiplier": 0.33
     442                ,"addExpandButton": true                                // only shown if total col size > container size.
     443                ,"expandContainerClass": "WideGrid"             // if set and if needs expansion then added.
     444                ,"forceGridTotalColumnsSize": false             // sets the grid size based on the columns widths.
     445        }
     446*/
     447
     448        // Expand click handler that adds width auto to the grid
     449        ,expandClickHandler: function(e)
     450        {
     451console.log("e (target = button anch element):", e );
     452console.log("parentElement.parentElement.parentElement (figure):", e.target.parentElement.parentElement.parentElement);
     453
     454                // grid width auto expands then with overflow already set visible it shows.
     455                e.target.parentElement.parentElement.style.width = e.target.totalColumnsWidth + "px";
     456                if(this.options.ibis.expandContainerClass)
     457                {
     458                        e.target.parentElement.parentElement.parentElement.classList.add(this.options.ibis.expandContainerClass);
     459                }
     460
     461                // hide button
     462                e.target.style.display = "none";
     463
     464                // stop events just in case, return false to ignore href #
     465                e.stopPropagation();
     466                e.cancelBubble = true;
     467                return(false);
     468        }
     469
     470        ,dataBound: function()
     471        {
     472        <![CDATA[
     473                // NOTES:
     474                // - Code is self contained and uses "this", standard js because potential
     475                //              of mult grids per page. 
     476                // - Grids are assumed the same structure within a figure etc.
     477                // - .width returns px suffix.  setting width style needs units suffix.
     478                // - gridContainerWidth is based on the current container and its css defs
     479                //              i.e. if 100% vw you'll never get the expand button etc.
     480                if(!this.options.ibis) return;
     481
     482                var totalColumnsWidth = 0;
     483                for (var i = 0; i < this.columns.length; i++)
     484                {
     485                        var columnWidth = this.columns[i].width;
     486
     487                        if(this.options.ibis.adjustColumnsSize)
     488                        {
     489                                // if undefined or 0 then use kendo auto fit
     490                                if(!columnWidth)
     491                                {
     492                                        this.autoFitColumn(i);
     493                                        columnWidth = this.columns[i].width;
     494                                }
     495                                else if(this.options.ibis.reduceColumnQualifierSize && (columnWidth > this.options.ibis.reduceColumnQualifierSize))
     496                                {
     497                                        columnWidth *= this.options.ibis.reduceColumnSizeMultiplier;
     498                                        this.resizeColumn(this.columns[i], columnWidth);
     499                                }
     500
     501                                // if min/max set then test and adjust.
     502                                if(this.options.ibis.minSize && (columnWidth < this.options.ibis.minSize))
     503                                {
     504                                        columnWidth = this.options.ibis.minSize;
     505                                        this.resizeColumn(this.columns[i], columnWidth);
     506                                }
     507                                else if(this.options.ibis.maxSize && (columnWidth > this.options.ibis.maxSize))
     508                                {
     509                                        columnWidth = this.options.ibis.maxSize;
     510                                        this.resizeColumn(this.columns[i], columnWidth);
     511                                }
     512                        }       // end of if adjusting sizing
     513
     514                        totalColumnsWidth += columnWidth;
     515                } // end of columns loop
     516
     517                var gridContainerWidth = parseInt(window.getComputedStyle(this.element[0]).width, 10);
     518                var tableWidth         = parseInt(window.getComputedStyle(this.element[0].querySelector("table")).width, 10);
     519console.log("gridContainerWidth: ", gridContainerWidth, ", tableWidth: ", tableWidth, "totalColumnsWidth: ", totalColumnsWidth);
     520
     521                // If the table width is wider than the container width and if the expand
     522                // button is wanted then show the button and set the footer table's sizing.
     523                // else no button but still wide and force then set the class.
     524                if(totalColumnsWidth > gridContainerWidth)
     525                {
     526                        if(this.options.ibis.addExpandButton)
     527                        {
     528                                var expandButton = this.element[0].querySelector(".k-grid-expand");
     529                                expandButton.style.display = "block";
     530                                expandButton.onclick=this.options.expandClickHandler.bind(this);
     531                                expandButton.title="Click here to expand grid to full width";
     532                                expandButton.totalColumnsWidth = totalColumnsWidth;     
     533                                this.element[0].querySelector(".k-grid-footer-wrap table").style.width = "100%";       
     534                        }
     535                        else if(this.options.ibis.expandContainerClass)
     536                        {
     537                                this.element[0].parentElement.classList.add(this.options.ibis.expandContainerClass);
     538                                this.element[0].style.width = (totalColumnsWidth) + "px";
     539                        }
     540                }
     541
     542                // if force size then set the actual grid size
     543                if(this.options.ibis.forceGridTotalColumnsSize)
     544                {
     545                        this.element[0].style.width = (totalColumnsWidth) + "px";
     546                }
     547
     548                // no matter what sizing is applied need to set the footer width to auto
     549                this.element[0].querySelector(".k-grid-footer").style.width = "auto";
     550        ]]>
    393551        }
    394552}
Note: See TracChangeset for help on using the changeset viewer.