change JqxGrid GridProps on click

[CorithParticipant]

I’m working on a demo of the jqxGrid, and I’m trying to offer up changing the grid props with click events. Going through the code see a setOptions call but how do you get the jqxGrid to accept and render with the changed properties.

import {createRef} from 'react'
import {Row, Col, Card, Button, ListGroup} from 'react-bootstrap'
import JqxGrid, {IGridSource} from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid'

//Note: extending the class instead of using the jqx.dataAdapter
interface IGridSourceExtended extends IGridSource {
  columns?: any[]
}

const formLabelWidth: number = 3

const GridSamples = () => {
  const jqxGrid = createRef<JqxGrid>()

  const changeOption = () => (event: any) => {

    jqxGrid.current?.setOptions({
        altrows: true,
        showcolumnlines: false,
        height: '10px'
      });

    alert('Attempting to update grid with alterntive rows..');
    // jqxGrid.current?. ?????
  }

  const dataSource: IGridSourceExtended = {
    localdata: [
      {PNum: '1001b10', Description: 'Product1', Stock: '10i'},
      {PNum: '1002b0', Description: 'Product3', Stock: '20h'},
      {PNum: '1003b9', Description: 'Product3', Stock: '30dg'},
      {PNum: '1004b8', Description: 'Product4', Stock: '40c'},
      {PNum: '1005b7', Description: 'Product5', Stock: '50a'},
      {PNum: '1006b6', Description: 'Product6', Stock: '60bd'},
      {PNum: '1007b5', Description: 'Product7', Stock: '70f'},
      {PNum: '1008b4', Description: 'Product8', Stock: '80j'},
      {PNum: '1009b3', Description: 'Product9', Stock: '90k'},
      {PNum: '10010b2', Description: 'Product10', Stock: '100l'},
      {PNum: '10011b1', Description: 'Product11', Stock: '110m'},
    ],
    datatype: 'json',
    columns: [
      {text: 'First Name', dataField: 'PNum'},
      {text: 'Last Name', dataField: 'Description'},
      {text: 'Product', dataField: 'Stock'},
    ],
  }

  return (
    <>
      <Row>
        <Col>
          <Card border='primary' className='card-bordered'>
            <Card.Header>
              <Card.Title as='h2'>Grid</Card.Title>
            </Card.Header>
            <Card.Body>
              <Row>
                <Col sm={formLabelWidth}>
                  <ListGroup>
                    <ListGroup.Item variant='primary' className='p-5'>
                      Options
                    </ListGroup.Item>
                    <ListGroup.Item action className='p-5' onClick={changeOption()}>
                      Option 1
                    </ListGroup.Item>
                    <ListGroup.Item action className='p-5'>
                      Option 2
                    </ListGroup.Item>
                  </ListGroup>
                </Col>

                {/* Begin Grid */}
                <Col sm={12 - formLabelWidth}>
                  <JqxGrid source={dataSource} columns={dataSource.columns} />
                </Col>
              </Row>
            </Card.Body>
            <Card.Footer>
              <div className='text-center'>
                <Button className='me-2'>Submit</Button>
                <Button variant='secondary' className='me-2'>
                  Cancel
                </Button>
              </div>
            </Card.Footer>
          </Card>
        </Col>
      </Row>
    </>
  )
}

export default GridSamples

[CorithParticipant]

Found it.

<JqxGrid ref={jqxGrid} source={dataSource} columns={dataSource.columns} />

[MartinParticipant]

Hello Corith,

Thank you for the update!

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts