Flexgrid enabling draggable disables row/cell selection

Flexgrid enabling draggable disables row/cell selection

Posted by: dharric on 31 December 2018, 5:57 pm EST

• 

  dharric

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 31 December 2018, 5:57 pm EST

  After enabling draggable for cells clicking on cells no longer triggers selectionChanged. Is there no way to allow both?

• 

  dharric

  • Post Options:
  • Link
    Copy

  Posted 1 January 2019, 10:38 am EST

  If turning on dnd disables cell selection, how can I enable and disable dnd programmatically? I can get an instance of the grid, but how do I get the body panel where the cells live in–so I can set cell.draggable = false?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 2 January 2019, 1:09 am EST

  Hi,

  Could you please let us know how you are making the cells draggable?
  
  We tried with the formatItem event to get the cells element and make cells draggable and selection changed seems to be fired normally on cell click.
  
  Could you please have a look at the following sample and let us know if we are missing something to replicate the issue: https://stackblitz.com/edit/react-o34uct?file=index.js
  
  You need to handle the formatItem event to get the cell element as demonstrated in the above sample.
  
  Also, please let us know your exact requirement so that we may suggest you the best possible solution accordingly.

  ~Sharad

• 

  dharric

  • Post Options:
  • Link
    Copy

  Posted 2 January 2019, 9:56 am EST

  Please double check your sample code. Yes it is selectable but it is not draggable. Also I am doing drag and drop so both draggable and droppable would need to be enabled. Here’s my own code.

  import React from 'react';
  import { FlexGrid } from 'wijmo/wijmo.react.grid';
  import { CollectionView } from 'wijmo/wijmo';
  import { SelectionMode } from '../../../../../common/services/GridHelper';
  import { CellType } from 'wijmo/wijmo.grid';
  import { AllowRowDragAndDrop } from '../../../../../common/services/GridHelper';
  
  const colDefs = [
      {
          header: 'Benchmark Name',
          binding: 'name',
          width: 200
      },
      {
          header: 'UID',
          binding: 'uid'
      },
      {
          header: 'K2ID',
          binding: 'k2id'
      },
      {
          header: 'Currency',
          binding: 'currency'
      },
      {
          header: 'Ticker',
          binding: 'ticker'
      },
      {
          header: 'Market Sector',
          binding: 'marketSector'
      },
      {
          header: 'Description',
          binding: 'description',
          width: 250
      }
  ]
  
  export default class BenchmarkMapperDefaultGrid extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              defaultBenchmarkSet: [],
              selectedOrder: 0,
              selectedBenchmark: 0,
              enableSort: true,
              enabledEditor: false,
              action: ''
          }
  
          this.gridSelectionChanged = this.gridSelectionChanged.bind(this);
      }
      
      initializedGrid = (s) => {
          const self = this;
          self.grid = s;
  
          AllowRowDragAndDrop(self, CellType, false);
      }
  
      gridSelectionChanged = (s) => {
          this.setState({ selectedOrder: s.selectedItem.order, selectedBenchmark: s.selectedItem.uid })
      }
  
      itemFormatter = (panel, r, c, cell) => {
          if (panel.cellType === CellType.Cell) {
              cell.draggable = true;
              cell.droppable = true;
          }
      }
  
      sortClick = (e) => {
          e.preventDefault();
          // todo: save to db
          var test = this.grid.itemsSource.items;
      }
  
      addClick = (e) => {
          e.preventDefault();
  
          // enable add in editor
          // send add text to editor
          this.setState({ action: 'Add', enabledEditor: true });
      }
  
      updateClick = (e) => {
          e.preventDefault();
  
          // enable add in editor
          // send add text to editor
          this.setState({ action: 'Update', enabledEditor: true });
      }
  
      render() {
          let i = 0;
          const liList = this.props.defaultBenchmarkOrders.map((bench, index) => {
              const style = { paddingTop: 18 - (i++) + 'px' };
              return (<li key={`benchmark-order-${index}`} style={style}>{bench}</li>);
          });
  
          return (<React.Fragment>
              <div className="mapper-panel">
                  <span className="mapper-container-ul">
                      <div className="mapped-list-header"><strong>Default Set:</strong></div>
                      <ul className="mapped-list">
                          {liList}
                      </ul>
                  </span>
                  <span className="mapper-container">
                      <FlexGrid
                          autoGenerateColumns={false}
                          columns={colDefs}
                          itemsSource={new CollectionView(this.props.defaultBenchmarkSet, {
                              currentItem: null
                          })}
                          style={{ maxHeight: '200px', maxWidth: '1200px' }}
                          initialized={this.initializedGrid}
                          selectionMode={SelectionMode.row}
                          selectionChanged={this.gridSelectionChanged}
                          itemFormatter={this.itemFormatter}
                      />    
                      <div className="mapper-btn-entity-left">
                          <button className="btn btn-outline-secondary mapper-btn" onClick={this.sortClick}>Save Sort</button>
                          <button className="btn btn-outline-secondary mapper-btn" onClick={this.addClick}>Add</button>
                          <button className="btn btn-outline-secondary mapper-btn" onClick={this.updateClick}>Edit</button>
                          <button className="btn btn-outline-secondary">Delete</button>
                      </div>
                  </span>
              </div>
              <span className="mapper-panel">
                  {this.props.render({
                      refreshDefaultGrid: this.props.refreshDefaultGrid,
                      selectedBenchmarkGroup: this.props.selectedBenchmarkGroup,
                      selectedPakTemplate: this.props.selectedPakTemplate,
                      selectedEntityType: this.props.selectedEntityType,
                      action: this.state.action,
                      enabledEditor: this.state.enabledEditor,
                      selectedOrder: this.state.selectedOrder,
                      selectedBenchmark: this.state.selectedBenchmark,
                      allBenchmarkOrders: this.props.allBenchmarkOrders,
                      allBenchmarks: this.props.allBenchmarks
                  })}
              </span>
          </React.Fragment>);
      }
  }
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 3 January 2019, 12:45 am EST

  We have modified the sample according to the code snippet provided but we are still unable to replicate the issue.
  
  Please have a look at the following modified sample: https://stackblitz.com/edit/react-yqbswh?file=index.js
  
  The only thing missing in the sample is the call to ‘AllowRowDragAndDrop’ function used in the code snippet.
  
  Please make sure that you are not calling preventDefault on ‘mousedown’ event for the grid in AllowRowDragAndDrop.