change column width on edit

[Zachary]

I have an edit template for a column that is wider than the display template. I would like to change the Colin widths when the user enters edit mode so the content is not cut off then switch it back when they are done editing. What would be the best way to do that?

[Jagadesh Ram Raajkumar]

Hi Zachary, 

Greetings from Syncfusion Support. 

Based on your queries we need the following details to better understand your query and provide details regarding the same quickly. 

1. Kindly share with us your complete treegrid code including events and with package.json file.
2. Why do you want the column width to be changed only when editing but not after rendering the treegrid.
3. If possible kindly share with us an issue reproducing sample or a video demo depicting your requirement.

Regards,
Jagadesh Ram 

[Zachary]

Hi Jagadesh,

Let me take a second shot at explaining.

I'm using the edit property of e-column to change the edit template when the user edits the row.

The problem is that what is displayed is a very narrow column, but when I edit I need much more space, so I need to expand the size of the column when the user enters edit while shrinking other columns.

Then when the user exits edit mode I need to change the column widths back.

I think that if you can tell me how to change the column widths that should be enough and I know what events to modify them on.

[Jagadesh Ram Raajkumar]

Hi Zachary, 

Based on your query, we suggest you increase the column width before rendering treegrid itself. By giving sufficient width to that column that holds the template, upon editing it will be rendered with extra width. Thus the space issues you are facing can be avoided. 

Regards,
Jagadesh Ram 

[Zachary]

The issue is that I need the view width to be smaller if I have it set to the same width needed for the edit column it would be too big.

Is there a way to dynamically resize the column on edit itself?

[Pon Selva Jeganathan]

Hi Zachary,  

  

Thanks for update. 

  

Query: Is there a way to dynamically resize the column on edit itself? 

  

We achieved this requirement by using action begin, action complete event and refresh column method of the tree grid. 

  

In the example below, we changed the width while editing. In the action begin event, we change the width of the edit column while editing, and we restore the column width when we save the record in the action complete event. 

  

Please refer to the below code snippet, 

  

App.component.html 

<div class="col-lg-8 control-section"> 

  <ejs-treegrid 

    #treegrid 

    (actionBegin)="actionBegin($event)" 

    (actionComplete)="actionComplete($event)" 

  > 

    <e-columns> 

      <e-column 

…. 

  </ejs-treegrid> 

</div> 

  

  

App.component.ts 

  

actionBegin(args) { 

    if (args.type == 'edit') { 

      var col = this.treegrid.columns; 

      for (var i = 0; i < col.length; i++) { 

        if (args.columnName == col[i].field) { 

          col[i].width = '300px'; 

          this.treegrid.refreshColumns(); 

        } 

      } 

    } 

  } 

  actionComplete(args) { 

     

    if (args.type == 'save') { 

      var col = this.treegrid.columns; 

      for (var i = 0; i < col.length; i++) { 

        if (args.column.field == col[i].field) { 

          col[i].width = '50px'; 

          this.treegrid.refreshColumns(); 

        } 

      } 

    } 

  

  

Please refer to the below sample, 

https://stackblitz.com/edit/angular-tpfv7w?file=app.component.ts 

  

Please refer to the below API documentation, 

https://ej2.syncfusion.com/documentation/api/treegrid/#actionbegin 

https://ej2.syncfusion.com/documentation/api/treegrid/#actioncomplete 

https://ej2.syncfusion.com/documentation/api/treegrid/#refreshcolumns 

  

Kindly get back to us for further assistance. 

  

Regards, 

Pon selva 

[Zachary]

Thank you for the help. This was exactly what I needed!

[Jagadesh Ram Raajkumar]

Hi Zachary, 

Thanks for the updateWe are glad to hear your query has been solved.

Kindly get back to us for further assistance. We are happy to assist you.

Regards,
Jagadesh Ram