How to add index dynamically in wijmo flexgrid using angular

Posted by: teenu.k on 6 July 2020, 3:17 am EST

  • Posted 6 July 2020, 3:17 am EST

    Hi,

    In my flexGrid i have coloumngroups . my requirement is i need to change the index of my columns dynamically , according to some configurations

    below is the sample code snippet.

    <wj-flex-grid #flex [columnGroups]=“allTableColumn” [itemsSource]=“invoiceItemsSource”>

    In component.ts i have below code

    in this below json i added index property but it is not working .the index values for this json will change dynamically. how to achieve this using the below json?

    this.allTableColumn=[

    {“allowSorting”: false, “binding”: “filteredJson.active”, “header”: “”, “visible”: true, “dataType”: “3”, “aggregate”:“None”,“index”:0},

    { “allowSorting”: false, “binding”: “filteredJson.ourInvoiceRef”,“align”:“left”, “header”: “”, “visible”: true, “dataType”: “1”, “aggregate”:“None”,“index”:2},

    { “allowSorting”: false, “binding”: “createdDate”,“align”:“left”, “header”: “”, “visible”: true, “dataType”: “4”, “format”: “dd/MM/yyyy”, “aggregate”:“None”,“index”:1},

    { “allowSorting”: false, “binding”: “groupId”,“align”:“left”, “header”: “”, “visible”: true, “dataType”: “1”, “aggregate”:“None”,index:3},

    { “allowSorting”: false, “header”: “”,“align”:“center”, “visible”:“true”,“columns”:[

    { "allowSorting": false, "binding": "periodStartDate","align":"left", "header": "",  "dataType": "4", "format": "dd/MM/yyyy", "aggregate":"None","index":5, "visible":true},
    { "allowSorting": false, "binding": "periodEndDate", "align":"left","header": "",  "dataType": "4", "format": "dd/MM/yyyy", "aggregate":"None","index":6}]}
    

    ]

    Regards,

    Teenu

  • Posted 6 July 2020, 10:14 pm EST

    Hello Teenu,

    The columnGroups definition does not work with index property, it shows the columns in the same order as they are placed in the Array.

    Hence, to show as per the index order the updated array would be:

    [
    {"allowSorting": false, "binding": "filteredJson.active", "header": "", "visible": true, "dataType": "3", "aggregate":"None","index":0},
    [b]{ "allowSorting": false, "binding": "createdDate","align":"left", "header": "", "visible": true, "dataType": "4", "format": "dd/MM/yyyy", "aggregate":"None","index":1},[/b]
    { "allowSorting": false, "binding": "filteredJson.ourInvoiceRef","align":"left", "header": "", "visible": true, "dataType": "1", "aggregate":"None","index":2},
    { "allowSorting": false, "binding": "groupId","align":"left", "header": "", "visible": true, "dataType": "1", "aggregate":"None",index:3},
    { "allowSorting": false, "header": "","align":"center", "visible":"true","columns":[
        { "allowSorting": false, "binding": "periodStartDate","align":"left", "header": "", "dataType": "4", "format": "dd/MM/yyyy", "aggregate":"None","index":5, "visible":true},
        { "allowSorting": false, "binding": "periodEndDate", "align":"left","header": "", "dataType": "4", "format": "dd/MM/yyyy", "aggregate":"None","index":6}]}
    ]
    

    Hope it helps!

    Regards,

    Manish Gupta

Need extra support?

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

Learn More

Forum Channels