Set Column width on ViewChild/ContentChild base doesn't work

[Denis Kirchner]

Hello, I have the following goal: to define the width of individual columns using ViewChild/ContentChild. I have tried different approaches, but none of them give me the desired result. 

The widths of the individual columns are greater than that specified by the function.

The incoming column Setting Object:

const columnSetting: TableColumnSize = {

name: "345px",

title: "245px",

itemCod: "45px"

}

Try 1: Set column width size by column list

private setColumnSize(columnSetting: TableColumnSize): void {

    if (!this.gridContent || !this.gridName) return;

    if (!this.hasSetData) {

      if (!columnSetting || Object.keys(columnSetting).length <= 0) return;

      const columns = this.gridcontent.columns as column[];

      for (let i = 0; i < columns.length; i++) {

        const fieldname = columns[i].field;

        columns[i].width = columnsetting[fieldname];

        (this.gridcontent.columns as column[])[i].width =

          columnsetting[fieldname];

      }

      this.hassetData = true;

    }

}

Try 2 with getColumnByField

private setColumnSize(columnSetting: TableColumnSize): void {

    if (!this.gridContent || !this.gridName) return;

    if (!this.hasSetData) {

      if (!columnSetting || Object.keys(columnSetting).length <= 0) return;

     

      for (const colKey of Object.keys(columnSetting)) {

        this.gridContent.getColumnByField(colKey)?.width = columnsetting[fieldname];

      }

      this.hassetData = true;

    }

}

Try 3 with persistence data

private setColumnSize(columnSetting: TableColumnSize): void {

    if (!this.gridContent || !this.gridName) return;

    if (!this.hasSetData) {

        if (!columnSetting || Object.keys(columnSetting).length <= 0) return;

        let persistence = JSON.parse(this.gridcontent.getPersistData());

        const columns: Columns[] = persistence.columns as Columns[] || [];

        for (const colKey of Object.keys(columnSetting)) {

            const colIndex = columns.findIndex(x => x.field === colKey);

            if (colIndex > -1) {

                persistence.columns[colIndex].width = columnsetting[colKey];

            }

        }

        this.gridContent.setProperties(persistence);

        this.hassetData = true;

    }

}

I also try to trigger the function by your grid event "load" but it seems, the width size of the columns is not equal to the column size setting from Backend.

When I define a static width value in the Input Property "width" on the grid component -> it works.

However, when I set the width dynamically, it is unfortunately the case that the information from the Column Width Setting Object does not match the information in the view.

Even with whole numbers or pixels I don't get the desired result. In all grids "autoFit" is disabled and is not triggered. I suspect that there is some kind of asynchronous calculation of the width for the rendering of the grid taking place in the background.

Can you please explain this to me and help me? My goal is to define the widths of the individual columns using Content-/ViewChild. I get the information from our backend.

Thanks in advance for the help.

Best regards
Denis Kirchner

[Dineshnarasimman Muthu]

Hi Denis,

Query:  Set Column width on ViewChild/ContentChild base doesn't work

We are currently working on the sample "Set Column width on ViewChild". Rest assured that we are doing our best to update on or before March 10th,2023. Until then we appreciate your patience and understanding.

Regards,

Dineshnarasimman

[Denis Kirchner]

Hi Dineshnarasimman,

Thanks for your feedback. I look forward to the update and am excited when I can implement the feature in my Angular project.

Many greetings

Denis Kirchner

[Dineshnarasimman Muthu]

Hi Denis,

Thank you for your patience.

Query: Changing the width of individual column using ViewChild or ContentChild

We have analyzed your query about setting width of individual column using ViewChild or ContentChild and we suggest you to take instance of grid instead of individual column and by accessing the column and width property we can change the width of the individual columns. We have attached the code snippet for your reference.

 <ejs-grid [dataSource]='data' #grid  height='315px'>

 

 @ViewChild('grid') grid:ElementRef|any;

    ngAfterViewInit(): void {

      this.grid.getColumnByField("OrderID").width=1000;

     

    }

 

Please let us know if you need further assistance.

Regards,

Dineshnarasimman