How to show scroll horizontal by condition in flexgrid wijmo

Posted by: viethdhe130200 on 24 October 2022, 3:02 pm EST

  • Posted 24 October 2022, 3:02 pm EST - Updated 24 October 2022, 3:02 pm EST

    I want to show scroll horizontal from the 4th position column onwards because in the first 3 columns I used frozenColumns={3}. So in flex grid wijmo is there any property that I can set to display horizontal scroll from the 4th column onwards (do not show scroll horizontally in the first 3 columns in the table) I hope anyone helps me in this case. Thank you very much!!!

  • Posted 24 October 2022, 3:03 pm EST

    My code:

    [code]componentDidMount() { const { listClassesOfSchool1, listClassesOfSchool2, listClassesOfSchool3, listClassesOfSchool4 } = this.state; const listData = dataFake.data.entities.field_work_types; const listItems = []; listData.forEach(item => { listItems.push({ id: item.id, classId: item.classId, className: item.className, majorId: item.majorId, majorName: item.majorName, isIncludeInstance: false, listClass1: listClassesOfSchool1, listClass2: listClassesOfSchool2, listClass3: listClassesOfSchool3, listClass4: listClassesOfSchool4, }); }); this.setState({ listItems: new CollectionView(listItems) }); }

    handleCheckBox = (isChecked, id) => { const listClasses = […this.state.listClasses]; listClasses[id].isChecked = isChecked; this.setState({ listClasses }); }

    render() { const { listItems, listClasses, listClassesOfSchool1, listClassesOfSchool2, listClassesOfSchool3, listClassesOfSchool4 } = this.state; return (

    {listClasses.map(item => { return (
    <input type=‘checkbox’ name=‘checkbox’ checked={item.isChecked} onChange={e => this.handleCheckBox(e.target.checked, item.id)} /> {item.name}
    ) })} <FlexGrid autoGenerateColumns={false} itemsSource={listItems} frozenColumns={3} headersVisibility=‘Column’ allowSorting={false} allowDragging={0} initialized={this.initialDataGrid} quickAutoSize={true} > <FlexGridColumnGroup header=‘Class’ cssClassAll={‘wj-align-center’} > <FlexGridColumnGroup header=‘Name’ binding=‘className’ isReadOnly={true} cssClassAll={‘wj-align-center’} > <FlexGridColumnGroup header=‘Major’ binding=‘majorName’ isReadOnly={true} cssClassAll={‘wj-align-center’} > {listClasses[0].isChecked && ( <FlexGridColumnGroup header={listClasses[0].name} cssClassAll={‘wj-align-center’} visible={false} > {listClassesOfSchool1.map((item, index) => { return ( <FlexGridColumnGroup header={item.name} binding={
    listClass1[${index}].name
    } isReadOnly={true} cssClassAll={ ‘wj-align-center’ } /> ); })} )} {listClasses[1].isChecked && ( <FlexGridColumnGroup header={listClasses[1].name} cssClassAll={‘wj-align-center’} visible={false} > {listClassesOfSchool2.map((item, index) => { return ( <FlexGridColumnGroup header={item.name} binding={
    listClass2[${index}].name
    } isReadOnly={true} cssClassAll={ ‘wj-align-center’ } /> ); })} )} {listClasses[2].isChecked && ( <FlexGridColumnGroup header={listClasses[2].name} cssClassAll={‘wj-align-center’} visible={false} > {listClassesOfSchool3.map((item, index) => { return ( <FlexGridColumnGroup header={item.name} binding={
    listClass3[${index}].name
    } isReadOnly={true} cssClassAll={ ‘wj-align-center’ } /> ); })} )} {listClasses[3].isChecked && ( <FlexGridColumnGroup header={listClasses[1].name} cssClassAll={‘wj-align-center’} visible={false} > {listClassesOfSchool4.map((item, index) => { return ( <FlexGridColumnGroup header={item.name} binding={
    listClass4[${index}].name
    } isReadOnly={true} cssClassAll={ ‘wj-align-center’ } /> ); })} )}
    ) }[/code]

  • Posted 26 October 2022, 7:32 pm EST

    Hello,

    Sorry, but it wouldn’t be possible to achieve the behavior due to the FlexGrid design architecture. Sorry for the inconvenience.

    Regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels