Wijmo Flexgrid row based DataMap

Wijmo Flexgrid row based DataMap

Posted by: productinfo on 17 July 2018, 10:23 pm EST

• 

  productinfo

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 17 July 2018, 10:23 pm EST

  Hi. How do I set dataMap for each dynamic row?

• 

  productinfo

  • Post Options:
  • Link
    Copy

  Posted 18 July 2018, 5:42 pm EST

  Since the rows are data-based, the DataMap data for each row is different. How do I create a row-based dataMap for it? I want to solve it with checkbox, but this time the grid (initialized) event did not work when the checkbox changed.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 18 July 2018, 11:21 pm EST

  Hi,
  
  The dataMap can only be set for FlexGrid columns and not for rows.

  Can you please let us know more about your use case so that we may suggest accordingly?

  However, if you mean dynamic dataMap i.e dataMap for a column which changes its value according to the value of some other field in the same row. Please, refer to the following sample:- http://jsfiddle.net/Wijmo5/8brL80r8/

  ~Manish

• 

  productinfo

  • Post Options:
  • Link
    Copy

  Posted 19 July 2018, 12:42 am EST

  Example

  
  itemsSource = [
    {
      "line_id": 1,
      "material_code": "0001",
      "material_unit_set": {
        "id": 1,
        "description": "row_1_unit_1"
      }
    },
    {
      "line_id": 2,
      "material_code": "0002",
      "material_unit_set": {
        "id": 1,
        "description": "row_2_unit_1"
      }
    },
    {
      "line_id": 3,
      "material_code": "0003",
      "material_unit_set": {
        "id": 3,
        "description": "row_3_unit_3"
      }
    }
  ]
  
  

  row1

  
  dataMap = new wjCore.DataMap([
    {
      "id": 1,
      "description": "row_1_unit_1"
    },
    {
      "id": 1,
      "description": "row_1_unit_2"
    },
    {
      "id": 3,
      "description": "row_1_unit_3"
    }
  ], 'id', 'description');
  
  

  row2

   dataMap = new wjCore.DataMap([
    {
      "id": 4,
      "description": "row_2_unit_1"
    },
    {
      "id": 5,
      "description": "row_2_unit_2"
    },
    {
      "id": 6,
      "description": "row_2_unit_3"
    }
  ], 'id', 'description');
  
  

  row3

   dataMap = new wjCore.DataMap([
    {
      "id": 7,
      "description": "row_3_unit_1"
    },
    {
      "id": 8,
      "description": "row_3_unit_2"
    },
    {
      "id": 9,
      "description": "row_3_unit_3"
    }
  ], 'id', 'description');
  
  

  Grid:

  
  <wj-flex-grid #flexGrid [itemsSource]="itemsSource">
      <wj-flex-grid-column [header]="'line_id'" [binding]="'line_id'"></wj-flex-grid-column>
      <wj-flex-grid-column [header]="'material_code'" [binding]="'material_code'"></wj-flex-grid-column>
      <wj-flex-grid-column [header]="'material_unit_set'" [binding]="'material_unit_set.id'"
                           [dataMap]="dataMap" [showDropDown]="true"></wj-flex-grid-column>
  </wj-flex-grid>
  
  

• 

  productinfo

  • Post Options:
  • Link
    Copy

  Posted 19 July 2018, 10:11 pm EST

  Manish ?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 19 July 2018, 11:56 pm EST

  Hi,

  We are currently working on this case and will update you on Monday.

  ~Manish

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 22 July 2018, 11:06 pm EST

  Hi,
  
  DataMap is applied at column level so you cannot have separate dataMap for each row.
  
  However if you want to restrict the values displayed in the dropdown in dataMap then you may do so by overriding the getDisplayValues() method of dataMap.

  Please refer to the following sample which implements the same:-
  
  https://stackblitz.com/edit/angular-fhzmga?file=app%2Fapp.component.ts

  ~Manish

• 

  admin

  • Post Options:
  • Link
    Copy

  Posted 25 March 2020, 4:04 am EST

  Hello,
  
  I have a similar problem but I think it’s easier. I have an object that has a series of objects on it.
  
  I would like to display the object’s name on a flexgrid and select an object from the set of objects associated with that object.

  It would be two columns Name and Clause, this last one I think would be a dataMap.

  This would be the object.

  
   {
      "id": 1,
      "name": "RC Explotación",
      "abrev": "RX Expl",
      "bbr_id": 1,
      "active": true,
      "syu_cr": 100016,
      "syu_mo": 100016,
      "clausulas": [
        {
          "id": 1,
          "bco_id": 1,
          "bsc_id": 0,
          "name": "Clausula 1",
          "text": "",
          "active": true
        },
        {
          "id": 2,
          "bco_id": 1,
          "bsc_id": 0,
          "name": "Clausula 2",
          "text": "",
          "active": true
        }
      ]
  }
  
  

  My code is this.

  
      <wj-flex-grid [itemsSource]="formGroup.value.dataCovers" [selectionMode]="'Row'">
                  <wj-flex-grid-column [binding]="'name'" [header]="'Cobertura'" [width]="'50*'" [isReadOnly]="true"></wj-flex-grid-column>
                  <wj-flex-grid-column [binding]="'clausulas'" [header]="'Clausula'" [width]="'50*'"></wj-flex-grid-column>
                </wj-flex-grid>
  
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 25 March 2020, 8:45 pm EST

  Hi,

  For your requirements, I would suggest you use ComboBox as a the FlexGrid’s editor instead of using the DataMap. Use the WjFlexGridCellTemplate to bind the ComboBox to the cell and update the values using the Angular’s binding. Also, you will need to store the selected value in another variable so I have added clausulas_id variable which will store the selected id from the clausulas. Please refer to the sample link below:

  https://stackblitz.com/edit/angular-wcvtrt

  Regards,
  
  Ashwin

• 

  admin

  • Post Options:
  • Link
    Copy

  Posted 25 March 2020, 9:27 pm EST

  Thank you very much, it was just what I needed.