Filtered DataMap binding problem

Filtered DataMap binding problem

Posted by: h-rienaecker on 14 September 2017, 2:46 am EST

• 

  h-rienaecker

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 2:46 am EST

  We are testing some grids for our new angular app.
  
  FlexGrid is one of our favorites but we have a little problem.

  We are using the grid to edit articles. Each article has two units: ‘piece’ and ‘carton’
  
  These units are stored in the article-object.
  
  At the begining we’re creating a new object and push all the units into it.

  
  angular.forEach(pos.article.units, function(unit) {
    var temp = {
      id: unit.id,
      name: unit.name
    };
    myUnits.push(temp);
  });
  

  Afterwards we’re filtering out duplicates cause each article can be added more than once.

  
  var temp = {};
  for (var i = 0; i < myUnits.length; i++) {
    temp[myUnits[i]['id']] = myUnits[i];
  }
  myUnits= new Array();
  for (var key in temp) {
    myUnits.push(temp[key]);
  }
  

  To edit the units within the grid we’re using a datamap like this.

  
  this.dmUnits = new wijmo.grid.DataMap(myUnits, 'id', 'name');
  

  As far as everything works but if we change the unit within the grid the wrong id will be stored. (It seems to be the id of the first articel with the unit ‘piece’ or ‘carton’.)

  
  this.beginningEdit = function(s, e) {
    var col = s.columns[e.col];
    if (col.binding == 'unitId') {
      var view = col.dataMap.collectionView;
      var ids = _.map(s.rows[e.row].dataItem.article.units, function(unit) {
        return unit.id;
      });
      view.filter = function(item) {
        var bool = ids.indexOf(item.id) > -1
        return bool;
      }
    }
  }
  
  this.cellEditEnded = function(s, e) {
    var item = s.rows[e.row].dataItem; //this item has the wrong id - not the selected
    if (e.col === 6) {
      ...
    }
    ...
  };
  

  The markup:

  
  <wj-flex-grid items-source="ctrl.cvPositions" initialized="ctrl.init(s,e)"
  beginning-edit="ctrl.beginningEdit(s,e)" cell-edit-ended="ctrl.cellEditEnded(s, e)"
  cell-edit-ending="ctrl.cellEditEnding(s, e)">
    ...
    <wj-flex-grid-column header="Unit" binding="unitId" data-map="ctrl.dmUnits"></wj-flex-grid-column>
    ...
  </wj-flex-grid>
  

  NOTE: If the units have different names, there is no problem but this is not possible for us.

• 

  h-rienaecker

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:46 am EST

  Here is a fiddle with the problem. Hope that helps.

• 

  bernardo

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:46 am EST

  I may be wrong, but what you described seems to be the expected behavior.

  The grid uses dataMaps for two purposes:

  1. To convert stored values into display values. In this case, there is no problem if multiple items have the same display value. They will look the same on the grid, of course, but the stored values will still be different. For example, if you have { id: 0, name: ‘box’ } and { id: 1, name: ‘box’ }, cells with value 0 and 1 will show ‘box’.

  2. To convert edited cell values into stored values. In this case, when you finish editing a cell, the grid will do a reverse-lookup on the map and will find the first item with a display value that matches what the user typed into the cell. If the display values are not unique, the first one found be used. Using the same example as above, if the user typed ‘box’ into a cell, the grid will choose the item with id 0 and will store 0 in the cell.

  I don’t see any way around this; if there are multiple items with the same display value in the map, the grid has no way of guessing which one the user wants when he types one of the display values.

  Perhaps I am missing something though. If so, please clarify and I’ll be happy to try and provide some help.

• 

  ricardo.valim

  • Post Options:
  • Link
    Copy

  Posted 19 March 2020, 5:30 am EST

  Hello Guys,

  I have here two dependent columns (both of them CustomGridEditor with DataMap), the second depends on first’s Id, but choosing a value and trying to open the second’s dropdown is the problem.

  The beginningEdit from the second is trigger before the closeEditor from the first one, so I still have the old value as filter.

  Do you have an exemple of CustomGridEditor with DataMap with dependent columns? Couldn’t find one.

  Thank you
  
  Ricardo Valim

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 19 March 2020, 5:07 pm EST

  Hi Ricardo,

  Please refer to the sample attached. In this sample, the City column’s ComboBox is dependent on the Country. You may handle the beginningEdit event and if the column is the city, then filter the data source of the ComboBox.

  Also, this sample uses the ‘wj-custom-editor’ class which I have added manually. You may use the CustomGridEditor class provided in the sample.

  Regards,
  
  Ashwin

  custom editor.zip

• 

  ricardo.valim

  • Post Options:
  • Link
    Copy

  Posted 20 March 2020, 2:49 am EST

  Hello Ashwin

  It works, the trick was using settimeout!

  Regards,
  
  Ricardo