Tabs for pivot tables

Comments

2 comments

  • Avatar
    Neil Grunstein

    Hi Anti,

    Thanks so much amazing feature to embed tabs within pivot tables the issue at hand is when viewing on a mobile device the tabs breakup and they are not responsive is there a fix?

    Thanks,

    0
    Comment actions Permalink
  • Avatar
    Harpreet Singh

    Hi All,

    Can anybody please suggest which code to use for my below ask :-

    1. When selected All it will show all the columns 

    2. When Selected Type from the tab, the pivot should show only two columns i.e. Type and Total Amount (USD)

    3. When selected Department from the tab, the pivot table should show only two columns i.e. Department and Total Amount (USD)

    4. When selected Client : Project, the pivot table should show only two columns i.e. Client/Project and Total Amount (USD)

     

     

    I am using below code copied from above:- 

     

    widget.on("ready", function(widget, args) {

    console.log('args',args);
    var CUR_COL_FIND_CRITERIA = "[fidx=0]";
    var FORMAT_COL_FIND_CRITERIA = "[fidx=5]";
    var Belonsto_COL_FIND_CRITERIA = "[fidx=7]";
    var COUNTRY_COL_FIND_CRITERIA = "[fidx=8]";

    //format a cell according to a condition on the current cell
    function formatCell(){
    if (($(this).attr('val')==$(this).siblings(Belonsto_COL_FIND_CRITERIA).attr('val')) && ($(this).attr('val')!='') && ($(this).attr('val')!=null)){
    $(this).siblings(FORMAT_COL_FIND_CRITERIA).text("");
    $(this).siblings(FORMAT_COL_FIND_CRITERIA).css("text-align", "left");
    }
    else {
    if((($(this).siblings(FORMAT_COL_FIND_CRITERIA).attr('val')!='') ) && ($(this).attr('val')!=$(this).siblings(Belonsto_COL_FIND_CRITERIA).attr('val'))){
    $(this).siblings(FORMAT_COL_FIND_CRITERIA).text($(this).siblings(FORMAT_COL_FIND_CRITERIA).attr('val') +" (" + $(this).siblings(COUNTRY_COL_FIND_CRITERIA).attr('val') + ")");
    $(this).siblings(FORMAT_COL_FIND_CRITERIA).css("text-align", "left");
    }
    }
    }

    var cells = $('[id="' + widget.oid+ '"]').find('td' + CUR_COL_FIND_CRITERIA).each(formatCell);

    CUR_COL_FIND_CRITERIA = "[fidx=20]";
    FORMAT_COL_FIND_CRITERIA = "[fidx=10]";
    function formatCellneu(){
    if ( $(this).attr('val')=="N\\A"){
    $(this).siblings(FORMAT_COL_FIND_CRITERIA).css("color", "#58ACFA");
    $(this).siblings(FORMAT_COL_FIND_CRITERIA).text("n.a");
    $(this).siblings(FORMAT_COL_FIND_CRITERIA).css("text-align", "right");
    }else{
    if ($(this).attr('val')!="N\\A"){
    //$(this).siblings(FORMAT_COL_FIND_CRITERIA).css("color", "#58ACFA");
    $(this).siblings(FORMAT_COL_FIND_CRITERIA).text( $(this).siblings(CUR_COL_FIND_CRITERIA).attr('val'));
    // $(this).siblings(FORMAT_COL_FIND_CRITERIA).text("N/A");
    $(this).siblings(FORMAT_COL_FIND_CRITERIA).css("text-align", "right");
    }
    }
    }
    var cells = $('[id="' + widget.oid+ '"]').find('td' + CUR_COL_FIND_CRITERIA).each(formatCellneu);


    CUR_COL_FIND_CRITERIA = "[fidx=7]";





    //hide current column and set new width for the pivots
    $('[id="' + widget.oid+ '"]').find(CUR_COL_FIND_CRITERIA).html("");
    $('[id="' + widget.oid+ '"]').find(CUR_COL_FIND_CRITERIA).css("width", "0px");

    CUR_COL_FIND_CRITERIA = "[fidx=21]";

    //hide current column and set new width for the pivots
    $('[id="' + widget.oid+ '"]').find(CUR_COL_FIND_CRITERIA).html("");
    $('[id="' + widget.oid+ '"]').find(CUR_COL_FIND_CRITERIA).css("width", "0px");


    CUR_COL_FIND_CRITERIA = "[fidx=22]";

    //hide current column and set new width for the pivots
    $('[id="' + widget.oid+ '"]').find(CUR_COL_FIND_CRITERIA).html("");
    $('[id="' + widget.oid+ '"]').find(CUR_COL_FIND_CRITERIA).css("width", "0px");

    CUR_COL_FIND_CRITERIA = "[fidx=8]";



    //hide current column and set new width for the pivots
    $('[id="' + widget.oid+ '"]').find(CUR_COL_FIND_CRITERIA).html("");
    $('[id="' + widget.oid+ '"]').find(CUR_COL_FIND_CRITERIA).css("width", "0px");

     


    //pivot tabs script
    const columns = [
    { "fidx": "0", "name": "Master_Supplier" },
    { "fidx": "1", "name": "Type" },
    { "fidx": "2", "name": "Department" },
    { "fidx": "3", "name": "Client/Project" },
    { "fidx": "4", "name": "Practice_Lookup" },
    { "fidx": "5", "name": "Total Amount(USD)" },
    { "fidx": "6", "name": "Turnover quality" },
    { "fidx": "7", "name": "", "hide":true },
    { "fidx": "8", "name": "", "hide":true },
    { "fidx": "9", "name": "Outlets (2018)", "hide":true },
    { "fidx": "10", "name": "Turnover in Mil €", "hide":true },
    { "fidx": "11", "name": "Employees (2016)", "hide":true },
    { "fidx": "12", "name": "Associates National (2018)", "hide":true },
    { "fidx": "13", "name": "Outlets National (2018)", "hide":true },
    { "fidx": "14", "name": "Turnover National", "hide":true },
    { "fidx": "15", "name": "Employees National (2016)", "hide":true },
    { "fidx": "16", "name": "Associates Europe (2018)", "hide":true },
    { "fidx": "17", "name": "Outlets Europe (2018)", "hide":true },
    { "fidx": "18", "name": "Turnover Europe (2016)", "hide":true },
    { "fidx": "19", "name": "Employees Europe (2016)", "hide":true },
    { "fidx": "20", "name": "Turnover in Mil € (1)", "hide":true },
    { "fidx": "21", "name": "", "hide":true },
    { "fidx": "22", "name": "", "hide":true }
    ];

    const pivotTabs = [
    {"id":"0","label":"All", "color":"#eaeaea", "columns":[0,1,2,3,4,5]},
    {"id":"1","label":"Type", "color":"#eaeaea", "columns":[1,2,3,4,5]},
    {"id":"2","label":"Department", "color":"#eaeaea", "columns":[2,3,4,5]},
    {"id":"3","label":"Client : Project", "color":"#eaeaea", "columns":[3,4,5]}
    ]

    var generateTabs = (tabs) => {
    console.log('generating tabs' + tabs.length);
    var tabs = tabs.reverse();
    var style = tabs.map(function (tab) {
    var css = '.tabbed [data-id="' + tab.id + '"] { \
    background: ' + (tab.color || '#fff') + '; \
    } \
    .tabbed [data-id="' + tab.id + '"]:before { \
    background: ' + (tab.color || '#fff') + '; \
    } \
    .tabbed [data-id="' + tab.id + '"]:after { \
    background: ' + (tab.color || '#fff') + '; \
    } \
    ';

    return css;
    });

    style = '<style>' + style.join('\n') + '</style>';

    var html = tabs.map(function (tab) {
    var tabHtml = '<li class="" data-id="' + tab.id + '"> \
    <a href="#">' + tab.label + '</a> \
    </li>';

    return tabHtml;
    }).join('\n');

    return style + '\n' + html;
    };

    var tabSelectionChanged = (id) => {
    console.log('tabSelectionChanged id=' + id);
    $('.tabbed li').removeClass('active');
    $('.tabbed li[data-id="' + id + '"]').addClass('active');
    };

    var tabsHtml = `<style> /* Tabbed Styles */ .tabbed { width: 80%; min-width: 400px; margin: 0 auto; margin-top: 10px; overflow: hidden; transition: border 250ms ease; } .tabbed ul { margin: 0px; padding: 0px; overflow: hidden; float: left; padding-left: 48px; list-style-type: none; } .tabbed ul * { margin: 0px; padding: 0px; } .tabbed ul li { display: block; float: right; padding: 10px 24px 8px; background-color: #FFF; margin-right: 46px; z-index: 2; position: relative; cursor: pointer; color: #777; text-transform: uppercase; font: 600 13px/20px roboto, "Open Sans", Helvetica, sans-serif; transition: all 250ms ease; } .tabbed ul li:before, .tabbed ul li:after { display: block; content: " "; position: absolute; top: 0; height: 100%; width: 44px; background-color: #FFF; transition: all 250ms ease; } .tabbed ul li:before { right: -24px; transform: skew(30deg, 0deg); box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0; } .tabbed ul li:after { left: -24px; transform: skew(-30deg, 0deg); box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0; } .tabbed ul li:hover, .tabbed ul li:hover:before, .tabbed ul li:hover:after { background-color: #F4F7F9; color: #444; } .tabbed ul li.active { z-index: 3; } .tabbed ul li.active, .tabbed ul li.active:before, .tabbed ul li.active:after { background-color: #a80234; color: #fff; } /* Round Tabs */ .tabbed.round ul li { border-radius: 8px 8px 0 0; } .tabbed.round ul li:before { border-radius: 0 8px 0 0; } .tabbed.round ul li:after { border-radius: 8px 0 0 0; }
    .dashboard widget.columnar .widget-body{
    /*height: auto;*/
    }
    .p-container .p-mid {
    /*ID missing scroll bar fix*/
    -ms-overflow-style: auto;
    }
    .dataTables_scrollBody {
    -ms-overflow-style: auto;
    }
    </style>
    <div class="tabbed round">
    <ul class="tab-links">
    ` + generateTabs(pivotTabs.slice(0)) + `
    </ul>
    </div>`;

    var toggleColums = (allColumns, columnsToShow, color) => {
    //first hide all hidable columns
    allColumns.filter(function (column) { return column.hide }).forEach(function (column) {
    $('[id="' + widget.oid+ '"]').find('[fidx="' + column.fidx + '"]').hide();
    // $('[id="' + widget.oid+ '"]').find('.p-value[fidx="' + column.fidx + '"]').css('background', '');
    });
    //show selected columns
    allColumns.filter(function (column) { return column.hide && columnsToShow.indexOf(parseInt(column.fidx)) >= 0 }).forEach(function (column) {
    $('[id="' + widget.oid+ '"]').find('[fidx="' + column.fidx + '"]').show();
    //let columns blinck with tab color (currently deactivated)
    // if (color)
    // $('[id="' + widget.oid+ '"]').find('.p-value[fidx="' + column.fidx + '"]').animate({backgroundColor:color}, 700, function () {
    // $('[id="' + widget.oid+ '"]').find('.p-value[fidx="' + column.fidx + '"]').css('background', '')
    // });
    })

    ///////////////////////////////
    /// workaround gesamtsumme
    ///////////////////////////////
    if ($('widget[widgetid="' + widget.oid+ '"] div .p-grand-total-row-head').length) {
    $('widget[widgetid="' + widget.oid+ '"] div .p-grand-total-row-head').attr('colspan', 7);
    $('widget[widgetid="' + widget.oid+ '"] div .p-grand-total-row-head').show();
    $('widget[widgetid="' + widget.oid+ '"] div .p-grand-total-row-head').text('Gesamtsumme');
    }
    };

    $('[widgetid="' + widget.oid+ '"]').find('.tabbed').remove();
    $('[id="' + widget.oid+ '"]').closest('.p-container').before(tabsHtml);
    //make first tab active

    var selectedtab = localStorage.getItem('selectedtab') || "0";
    tabSelectionChanged(selectedtab);
    var firstTab = pivotTabs.filter(function (tab) { return tab.id == selectedtab})[0];
    toggleColums(columns, firstTab.columns, firstTab.color);

    //////////////////////////////////////////////////////////////
    // this is workaround for ghost heades in pivot table /////
    //////////////////////////////////////////////////////////////
    console.log('fix gohst headers in pivot for ' + widget.oid);
    $('widget[widgetid="' + widget.oid+ '"] div.p-fixed-rows').hide()

    //fix style of hidden headers of widget
    if (/Edge\/\d./i.test(navigator.userAgent) || /MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
    //IE specific
    $('widget[widgetid="' + widget.oid+ '"] .p-container .p-mid')[0].style['height'] = "auto";
    $('widget[widgetid="' + widget.oid+ '"] .p-container .p-mid')[0].style['-ms-overflow-style'] = "auto";
    } else {
    $('widget[widgetid="' + widget.oid+ '"] .p-container .p-mid')[0].style['height'] = "auto";
    //fix headers height
    $('widget[widgetid="' + widget.oid+ '"] .p-dim-head .p-head-content')[0].style['min-height'] = "50px";
    }

    $('.tabbed li').off('click');
    $('.tabbed li').on('click', function (event) {
    event.preventDefault();
    var id = $(event.target).closest('li').data('id');
    console.log('tab clicked id=' + id);
    tabSelectionChanged(id);

    var tab = pivotTabs.filter(function (tab) { return tab.id == id })[0];
    toggleColums(columns, tab.columns, tab.color);

    localStorage.setItem('selectedtab', id);
    });

    //end of pivot tabs script


    });

    widget.on("domready", function(w){
    var tags = $('td.phantom', element);
    for(var i=0; i<tags.length; i++) {
    tags[i].style.width = '0px';
    }
    })

     

     

     

    NOTE:- I am just coding learner, so please share the exact working code and that will be very helpful and highly appreciated

    Thank You. 

    0
    Comment actions Permalink

Please sign in to leave a comment.