Smart UI Components & Libraries – Grid, Scheduler, Gantt, Kanban for Angular, React, Next.js, Vue, Blazor, JavaScript › Forums › Data Grid › List of Columns in their current order

Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 9, 2021 at 8:50 pm #101584
    fgeorgejr
    Member

    How do you simply get a string type list of all column labels/datafields in their current order that respects their current position after dragging and dropping, etc.

    March 9, 2021 at 10:35 pm #101585
    fgeorgejr
    Member

    Also, I noticed that I always get stale data that is not up to date when I try something like:
    grid.columns.toArray().forEach(function(element) {
    console.log(element.visibleIndex + element.dataField);
    });
     
    So, what could be the proper way to do this? Any help is much appreciated.

    March 10, 2021 at 6:17 am #101587
    admin
    Keymaster

    Hi Felix George,
    After columns reorder, the columns array is updated. For example, if you drag the first column and drop it after the last column, the resulting array in our demo is:

    0: Proxy {label: "Last Name", width: 150, dataField: "lastName", dataType: "string", visibleIndex: 0, …}
    1: Proxy {label: "Product", width: 200, dataField: "productName", dataType: "string", visibleIndex: 1, …}
    2: Proxy {label: "Quantity", width: 100, dataField: "quantity", dataType: "number", visibleIndex: 2, …}
    3: Proxy {label: "Unit Price", width: 100, dataField: "price", cellsFormat: "c2", dataType: "number", …}
    4: Proxy {label: "Total", dataField: "total", cellsFormat: "c2", dataType: "number", visibleIndex: 4, …}
    5: Proxy {label: "First Name", width: 150, dataField: "firstName", dataType: "string", visibleIndex: 5, …}
    length: 6
    __proto__: Array(0)

    Best regards,
    Peter Stoev
    Smart UI Team
    https://www.htmlelements.com/

    March 11, 2021 at 3:48 am #101591
    fgeorgejr
    Member

    I get the exact same thing (in developer tools upon variable inspection).  So, the problem is not catchable in dev tools in the browser.
    But, if you run a for loop and try to use that data, you will get a stale version of it, unless I’m doing something wrong. For example, how would you extract the strings from that columns array at the end of the columsdragged event?  I have done this several times and I always get stale and outdated state of the strings in their original order.  I gather that you will get the same result if you run the code I printed in the second post. Please advise.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.