BuyLog In
Bug Report T621152
Visible to All Users

DataGrid - The columnOption method sets an option for a wrong column when using multi-row columns

created 7 years ago

I have a multi-row header grid (please see this example). When I set the caption option on Urban column using columnOption(), it sets the caption on the Country column.

JavaScript
// app.component.ts  
ngAfterViewInit() {  
      const grid = this.gridComponent.instance;  
      grid.option("columns", this.columns);  
      //debugger;  
      grid.columnOption("Population_Urban", "caption", "Urban Caption");  
      // at this point Country column's caption is "Urban Caption". i.e. grid.ciolumnOption() set the caption on the wrong column from this.columns.  

      grid.option("columns", this.columns);  
      // at this point the grid's Country column's caption is "Urban Caption", while Urban column's caption is still "Caption"  
    }

I thuink the problem is in ui.grid_core.columns_controller.js columnOptionCore() function:

JavaScript
columns = that.option("columns");  
column = columns && columns[columnIndex];

columns is a tree structure while columnIndex is an index in the flattened collection of columns.

Sign in to comment on this post

Answers approved by DevExpress Support

created 7 years ago (modified 7 years ago)

We have fixed the issue described in this ticket and will include the fix in our next maintenance update. To apply this solution before the official update, request a hotfix by clicking the corresponding link for product versions you require.

Note: Hotfixes may be unavailable for beta versions and updates that are about to be released.

    Sign in to comment on this post
    created 7 years ago

    Hi,

    It appears that the algorithm you are using is logically incorrect because you reset the columns collection after modifying the caption via the columnOption method. The simplest and most reliable approach is to define the columns collection via binding:

    HTML
    <dx-data-grid  
    id="gridContainer"  
    [columns]="columns"  
...

    After that, it will be sufficient to use a single line of code to change the column's caption:

    JavaScript
    ngAfterViewInit() {  
    this.gridComponent.instance.columnOption("Population_Urban", "caption", "Urban Caption");  
...

    Here is the modified sample: https://plnkr.co/edit/LoYEDXGrPkYdapOkq1c2?p=preview.

    If your scenario is different, please describe it in greater detail. This will help us find an appropriate solution.

    Thanks,
    Alessandro

      Comments (2)
      I I
      iboot 7 years ago

        The point of this ticket is to reort a bug in columnOption() method. I am not looking for an advice on how to bind the columns to the grid. This example is just the easiest way for me to demonstrate the bug. Which is - when I call: grid.columnOption("Population_Urban", "caption", "Urban Caption");the Country column's caption in columns property is set to "Urban Caption".
        In my actual scenario I have columns property bound to another control on the page that displays columns' captions. When I change Urban's caption, it actually displays the new caption in the place of Country's caption and Urban's caption is unchanged.

        Alessandro (DevExpress Support) 7 years ago

          Hi,

          Thank you for your clarification. I will forward this ticket to our R&D team for further research. In the meantime, we recommend that you remove the last line, where the columns collection is assigned again:

          JavaScript
          grid.option("columns", this.columns);

          This line is not required because you assign this collection initially. Here is the modified example: https://plnkr.co/edit/7NzWaJXPXhVVxehWkdCT?p=preview.

          Sign in to comment on this post

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.