How to show scroll horizontal by condition in flexgrid wijmo

How to show scroll horizontal by condition in flexgrid wijmo

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

• 

  viethdhe130200

  • Post Options:
  • Link
    Copy

  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!!!

• 

  viethdhe130200

  • Post Options:
  • Link
    Copy

  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]

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  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