We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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


3 Replies

DM Dineshnarasimman Muthu Syncfusion Team March 8, 2023 06:25 PM UTC

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



DK Denis Kirchner March 8, 2023 08:27 PM UTC

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




DM Dineshnarasimman Muthu Syncfusion Team March 14, 2023 05:00 PM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon