Filtered DataMap binding problem

Originally Posted 11 October 2016, 10:03 pm EST

  • Originally Posted 11 October 2016, 10:03 pm 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 = {

    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) {

    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 =[e.row].dataItem.article.units, function(unit) {
    view.filter = function(item) {
    var bool = ids.indexOf( > -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>

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

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

    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.
  • Reply

    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
  • Marked as Answer


    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.


  • Reply

    Hello Ashwin

    It works, the trick was using settimeout!

Need extra support?

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

Learn More

Forum Channels