JqxDataTable, JqxTabs & selectionMode

[AsterionDBParticipant]

From my testing, it appears as though the JqxDataTable:selectionMode property is ignored when the data table is rendered as content upon a JqxTab. Here’s some of my relevant code:

<JqxTabs ref='#vaultViewTab' position={'top'} initTabContent={this.initTabContent}>
   <ul>
     <li style={{marginLeft: '30px'}}>Uncataloged</li>
     <li style={{marginLeft: '30px'}}>Cataloged</li>
   </ul>
   <div>
     <table>
       <tbody>
         <tr><td><JqxToolBar width={800} height={35} initTools={initUncatalogedTools} tools={uncatalogedTools}/></td></tr>
         <tr><td>
           <table><tbody><tr>
             <td width="60%"><div id='uncatalogedDataTable'></div></td>
            ...
            ...

initTabContent(tab)
{
  let jqxDataTable = document.getElementById('uncatalogedDataTable');
  this.uncatalogedDataTable = ReactDOM.render(<JqxDataTable pageable={true} sortable={true} pagerButtonCount={8} 
    rendered={this.viewButtonRenderer} selectionMode={'singleRow'}/>, jqxDataTable);
}

The data table is populated with remote JSON data. I have also tried setting selectionMode directly via …selectionMode(‘singleRow’);

[Ivo ZhulevParticipant]

Hi AsterionDB,

I can’t reproduce that behavior. Here is my code:

class App extends React.Component {
    render() {
        let source =
        {
            datatype: 'csv',
            datafields: [
                { name: 'Date' },
                { name: 'S&P 500' },
                { name: 'NASDAQ' }
            ],
            url: './assets/nasdaq_vs_sp500.txt'
        };

        let dataAdapter = new jqx.dataAdapter(source);

        let columns =
        [
            { text: 'Date', datafield: 'Date', cellsformat: 'd', width: 250 },
            { text: 'S&P 500', datafield: 'S&P 500', width: 150 },
            { text: 'NASDAQ', datafield: 'NASDAQ' }
        ];

        let initTabContent = (tab) =>
        {
            let jqxDataTable = document.getElementById('uncatalogedDataTable');
            this.uncatalogedDataTable = ReactDOM.render(
                <JqxDataTable
                    source={dataAdapter} columns={columns} pageable={true}
                    sortable={true} pagerButtonCount={8} selectionMode={'singleRow'}
                />, jqxDataTable);
        }

        return (
            <JqxTabs width={600} height={560} initTabContent={initTabContent}>
                <ul>
                    <li>Content 1</li>
                    <li>Content 2</li>
                </ul>
                <div>
                    <div id='uncatalogedDataTable'></div>
                </div>
                <div>
           
                </div>
            </JqxTabs>
        )
    }
}

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[AsterionDBParticipant]

Seems as though the problem may be related to loading in JSON Data. What is the recommended method for placing a data table upon a tab with dynamic data via a JSON call.

[Ivo ZhulevParticipant]

Hi AsterionDB,

I tried with remote JSON data and again all works fine:

class App extends React.Component {
    render() {
        let source =
            {
                datatype: "json",
                datafields: [
                    { name: 'countryName', type: 'string' },
                    { name: 'name', type: 'string' }
                ],
                url: "http://api.geonames.org/searchJSON"
            };

        let dataAdapter = new jqx.dataAdapter(source,
            {
                formatData: (data) => {
                    data.featureClass = 'P';
                    data.style = 'full';
                    data.maxRows = '50';
                    data.username = 'jqwidgets';              
                    return data;
                }
            }
        );

        let columns = [
            { text: 'Country Name', datafield: 'countryName'},
            { text: 'City', datafield: 'name' }
        ]

        let initTabContent = (tab) =>
        {
            let jqxDataTable = document.getElementById('uncatalogedDataTable');
            this.uncatalogedDataTable = ReactDOM.render(
                <JqxDataTable width={'100%'}
                    source={dataAdapter} columns={columns} pageable={true}
                    sortable={true} pagerButtonCount={8} selectionMode={'singlerow'}
                />, jqxDataTable);
        }

        return (
            <JqxTabs width={600} height={560} initTabContent={initTabContent}>
                <ul>
                    <li>Content 1</li>
                    <li>Content 2</li>
                </ul>
                <div>
                    <div id='uncatalogedDataTable'></div>
                </div>
                <div>
           
                </div>
            </JqxTabs>
        )
    }
}

Regards,
Ivo

[AsterionDBParticipant]

Thanks…there must be something I’m doing then. My data acquisition logic is outside of the render() function.

[Author]

Posts