JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums General Discussions how to have conditional row expand on smart-table

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #101375
    Mike
    Member

    how to have conditional row expand on smart-table

    #101383
    yavordashew
    Member

    Hi Mike,
    I have made a simple code example to showcase you how to disable row expanding on certain rows depending on a condition.
    //In your Js File:

    
    const chemicalElementsData = [
        { number: 1, name: 'Hydrogen', symbol: 'H', weight: 1.008, abundance: 1400, originOfName: 'Greek elements hydro- and -gen, \'water-forming\'' },
        { number: 2, name: 'Helium', symbol: 'He', weight: 4.002602, abundance: 0.008, originOfName: 'Greek hḗlios, \'sun\'' },
        { number: 3, name: 'Lithium', symbol: 'Li', weight: 6.94, abundance: 20, originOfName: 'Greek líthos, \'stone\'' },
        { number: 4, name: 'Beryllium', symbol: 'Be', weight: 9.0121831, abundance: 2.8, originOfName: 'Beryl, a mineral (ultimately from the name of Belur in southern India)' },
        { number: 5, name: 'Boron', symbol: 'B', weight: 10.81, abundance: 10, originOfName: 'Borax, a mineral (from Arabic bawraq)' },
        { number: 6, name: 'Carbon', symbol: 'C', weight: 12.011, abundance: 200, originOfName: 'Latin carbo, \'coal\'' },
        { number: 7, name: 'Nitrogen', symbol: 'N', weight: 14.007, abundance: 19, originOfName: 'Greek nítron and -gen, \'niter-forming\'' },
        { number: 8, name: 'Oxygen', symbol: 'O', weight: 15.999, abundance: 461000, originOfName: 'Greek oxy- and -gen, \'acid-forming\'' },
        { number: 9, name: 'Fluorine', symbol: 'F', weight: 18.998403163, abundance: 585, originOfName: 'Latin fluere, \'to flow\'' },
        { number: 10, name: 'Neon', symbol: 'Ne', weight: 20.1797, abundance: 0.005, originOfName: 'Greek néon, \'new\'' }
    ];
    window.JQX('#table', class {
        get properties() {
            return {
                dataSource: new window.JQX.DataAdapter({
                    dataSource: chemicalElementsData,
                    dataFields: [
                        'number: number',
                        'name: string',
                        'symbol: string',
                        'weight: number',
                        'abundance: number',
                        'originOfName: string'
                    ]
                }),
                keyboardNavigation: true,
                rowDetailTemplate:'
    <div class="element-cell">
                        <div class="element-no">{{number}}</div>
                        <div class="element-symbol">{{symbol}}</div>
                        <div class="element-name">{{name}}</div>
                        <div class="element-weight">{{weight}}</div>
                    </div>
                    <div><strong>Origin of name:</strong> {{originOfName}}</div>',
                columns: [
                    { label: 'No.', dataField: 'number', dataType: 'number', width: 50 },
                    { label: 'Name', dataField: 'name', dataType: 'string', width: 200 },
                    { label: 'Symbol', dataField: 'symbol', dataType: 'string', width: 150 },
                    {
                        label: 'Weight', dataField: 'weight', dataType: 'number', width: 200, formatFunction(settings) {
                            settings.template = new window.JQX.Utilities.NumberRenderer().formatNumber(settings.value, 'F2');
                        }
                    },
                    {
                        label: 'Abundance', dataField: 'abundance', dataType: 'number', width: 200, formatFunction(settings) {
                            settings.template = settings.value + ' mg/kg';
                        }
                    }
                ]
            };
        }
    });
    window.onload= function (){
        const table = document.getElementById('table');
        const expandedRow = document.querySelectorAll('jqx-table[row-detail-template] tr[row-id]')
            for( let rowIndex = 0 ; rowIndex <expandedRow.length ; rowIndex++){
                let cellValue = table.getValue(rowIndex,'weight')
                if(cellValue <10){
                    expandedRow[rowIndex].style.pointerEvents = 'none'
                }
            }
    }
    

    And in you HTML file :
    <smart-table id="table"></smart-table>
    For base for this code snippet I used this demo: https://www.htmlelements.com/demos/table/expandable-rows/
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.