ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: rsgmedia on October 16, 2018, 02:32:22 pm

Title: Pqgrid - change row height dynamically
Post by: rsgmedia on October 16, 2018, 02:32:22 pm

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, the row height should changed. Is this the correct implementation or could be other way.

Title: Re: Pqgrid - change row height dynamically
Post by: paramvir on October 16, 2018, 03:52:20 pm

autoRow should be set to false.

Code: [Select]

autoRow: false