Author Topic: Pqgrid - change row height dynamically  (Read 2351 times)

rsgmedia

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 50
    • View Profile
Pqgrid - change row height dynamically
« 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.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Pqgrid - change row height dynamically
« Reply #1 on: October 16, 2018, 03:52:20 pm »
autoRow should be set to false.

Code: [Select]
autoRow: false