jQuery UI Widgets Forums React JqxDataTable, JqxTabs & selectionMode

This topic contains 4 replies, has 2 voices, and was last updated by  AsterionDB 7 years, 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • AsterionDB
    Participant

    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 Zhulev
    Participant

    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/


    AsterionDB
    Participant

    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 Zhulev
    Participant

    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


    AsterionDB
    Participant

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.