Unable to change property `rowHt`in pqGrid

[sahil.b]

Hi,

I am unable to change/update the value of rowHt.

//--- CODE ---//
    componentDidMount() {
        this.rowHeightManager();
    }

    changeDropDown(e) {
        const rowHt = parseInt(e.target.value, 10);
        jQ(`#${this.props.id}`).pqGrid('option', 'rowHt', rowHt);
        jQ(`#${this.props.id}`).pqGrid('refreshDataAndView');

        // This is updating the value but not reflecting on Grid UI
        console.log(jQ(`#${this.props.id}`).pqGrid('option', 'rowHt'), rowHt);


    }

    rowHeightManager() {
        const $option = [25,50,75].map(item => `<option value="${item}">${item}</option>`).join('');
        const $selectBox = `<select id="changeRowHeight" class="ui-corner-all">${$option}</select>`;
        const $footer = jQ(`#${this.props.id}`).find('.pq-grid-footer.pq-pager');
        $footer.append(`<span class="pq-separator"></span><span class="pq-page-rppoptions">${$selectBox}</span>`);

        $footer.find('#changeRowHeight').on('change', this.changeDropDown.bind(this));
        // console.log($footer);
    }
//--- END CODE---//

The above code will add a dropDown in footer next to pagination section. On changing the value from the dropDown i want the row height to be changed. Is this the correct implementation or could be other way.

Thanks,
Sahil