jQuery UI Widgets Forums React change JqxGrid GridProps on click

This topic contains 2 replies, has 2 voices, and was last updated by  Martin 2 months, 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • change JqxGrid GridProps on click #121730

    Corith
    Participant

    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
    
    
    change JqxGrid GridProps on click #121732

    Corith
    Participant

    Found it.

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

    change JqxGrid GridProps on click #121735

    Martin
    Participant

    Hello Corith,

    Thank you for the update!

    Best Regards,
    Martin Yotov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.