Wijmo Flexgrid row based DataMap

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

  • Posted 17 July 2018, 10:23 pm EST

    Hi. How do I set dataMap for each dynamic row?
  • Replied 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.
  • Replied 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
  • Replied 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>
  • Replied 19 July 2018, 10:11 pm EST

    Manish ?
  • Replied 19 July 2018, 11:56 pm EST

    Hi,

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

    ~Manish
  • Marked as Answer

    Replied 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
  • Replied 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>


  • Replied 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
  • Replied 25 March 2020, 9:27 pm EST

    Thank you very much, it was just what I needed.
Need extra support?

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

Learn More

Forum Channels