How to set minWidth to a column of grid table using Grid Component

Question

Hi,I have an issue with my grid table.My Grid Table has 4 columns. The second, third and fourth column has a specific column (ie: 200px; 150px; 90px). And I don't set width property for the first column (which means

its width is auto).  If user's screen is large, everything is good, But if user's screen is small enough, the first column is disappear. I try to set the minWidth for that column, but it only works when users resize their screen, not in the initial rendering.What I expect is that: when the screen is large, the width of the first column is auto. Ang if

the screen is small enough,

the first column will have the minWidth property (in this case, the grid table will have a horizontal scroll bar).Thanks,

Santhosh Iruthayaraj · Accepted Answer

Hi nguyen hoang phuong,Greetings from Syncfusion Support!You can set the minWidth for columns during the initial
render by accessing the header table and content table inside the “created”
event of the Grid. We have prepared a code snippet and a sample for your
reference. Please find them below:

[app.component.html]
   
  <ejs-grid #grid [dataSource]="data" allowPaging="true" (created)="created()">
  .  .  .  .  .

[app.component.ts]
   
    // triggers when the component is created
    created() {
      // get the header and content tables
      // and apply the minWidth at initial render for the column
      this.grid
        .getHeaderTable()
        .querySelector('colgroup').firstChild.style.minWidth = '100px';
   
      this.grid
        .getContentTable()
        .querySelector('colgroup').firstChild.style.minWidth = '100px';
    }

Sample: https://stackblitz.com/edit/angular-grid-column-initial-minwidthAPI references:
 created event: https://ej2.syncfusion.com/angular/documentation/api/grid/#created
 getHeaderTable method: https://ej2.syncfusion.com/angular/documentation/api/grid/#getheadertable
 getContentTable method: https://ej2.syncfusion.com/angular/documentation/api/grid/#getcontenttable
Please let us know if you have any further queries or require
additional assistance.Regards,Santhosh I

nguyen hoang phuong · Answer

Hi Syncfusion Team,It works perfectly now. Thanks for your help!Regards,Nguyen

Santhosh Iruthayaraj · Answer

Hi nguyen hoang phuong,We are glad that the provided solution helped resolve the
issue. Please feel free to reach out if you have any further queries.Regards,Santhosh I

nguyen hoang phuong · Answer

Hi Syncfusion Team,I have a further issue.I want to draw a connector from a port of a node. I can achieve it by hovering the mouse to the node, and then 4 ports are appeared, and I just need to hover the mouse to a port and draw a connector from it. I also can do it when I select that node,

hover the mouse to the position of a port, and a square is appeared, and I draw connector from it. You can check it in this link:
https://stackblitz.com/edit/github-rp2sd8?file=src%2Fapp.component.ts
The project on the link above uses Angular 15,

Angular 11, @syncfusion/ej2-angular-diagrams 23.1.39-ngcc. You can check it on this link:https://stackblitz.com/edit/angular-11-new-fndm9k?file=src%2Fapp%2Fapp.component.ts In this link, I just can draw the connector when I hover the node (NOT select that node). You also can check by the attached video.So, Is the reason due to the differences between two versions of

@syncfusion/ej2-angular-diagrams

? And How can I draw a connector by 2 methods in the second link (just like in the first link)?Regards,NguyenAttachment: demo_video_b3652ba7.rar

Vivisa Ganesan · Answer

Hi,The issue has been successfully resolved in the most recent version. We kindly recommend upgrading to the latest release, version 23.1.43 using below link. We have also modified the sample with our latest version. Please refer the below samplehttps://www.npmjs.com/package/@syncfusion/ej2-diagramsSample:Diagram Syncfusion (forked) - StackBlitzRegards,Vivisa

nguyen hoang phuong · Answer

Hi,Thank you and Syncfusion Team for your prompt reply. I really appreciate it.The problem is solved now.Once again, thanks for your help!Regards,Nguyen

Vivisa Ganesan · Answer

Hi,You're welcome! Please let us know if you have any further queries on this. We will be happy to assist.Regards,Vivisa

nguyen hoang phuong · Answer

​Hi Syncfusion Team,Your first solution in this article ( this.grid.getHeaderTable().querySelector('colgroup').firstChild.style.minWidth = '100px';) works well. But when I group data, this solution doesn't seem to work. When I resize the screen, the first column doesn't have the minWidth and it will disappear.So the question is: how can I set minWidth for the first column in both cases: not grouping data and grouping data?I have prepared a sample for you (when grouping data):https://stackblitz.com/edit/angular-grid-column-initial-minwidth-dn1prj Regards,Nguyen

nguyen hoang phuong · Answer

Hi Syncfusion Team,Do you have any updates on this item?Regards,Nguyen

Aishwarya Rameshbabu · Answer

Hi nguyen hoang phuong,Upon reviewing your query,
it appears that you are experiencing difficulty in setting the minWidth
of a column after grouping in the initial rendering of the Grid. To render the
column based on the minWidth specified during the initial rendering, you
can utilize the "resetIndentWidth" method of the Grid in the dataBound
event. The flag variable is used to call the function only at the initial
rendering of Grid. For more information, please refer to the provided code
example and sample.

App.component.ts
   
    dataBound() {
      if (this.flag) {
        this.grid.resetIndentWidth();
      }
      this.flag = false;
    }

Sample: https://stackblitz.com/edit/angular-grid-column-initial-minwidth-ec1yxv?file=src%2Fapp.component.ts,src%2Fapp.component.html,package.jsonAPI Reference: dataBoundIf
you need any further assistance or have additional questions, please feel free
to let us know.RegardsAishwarya
R

nguyen hoang phuong · Answer

Hi

Aishwarya Rameshbabu,Thanks for your response.I've tried your suggestion, And it worked in my real project. Thank you again.But when I work around with this, there are some issues with this, which I can show you in the sample below.https://stackblitz.com/edit/angular-nvf4zk-umejrh First, there is an error when we resize the page. To reporduce this bug, when open this link, please click the "Toggle data" button 2 times, then click the "Toggle Page" 1 time. Then when you are in the Grid page, try to resize the page, you will get this bug.Second, when I turn on the "enableVirtualization" mode and make the grid's height based on the data, I get some white spaces, and the grid only show some data.  And the

"enableVirtualization" mode seems not to work. Also when we resize the screen to be small enough, the first column disappears. Can you check this bug?Regards,Nguyen

nguyen hoang phuong · Answer

Hi,In my real project, when I work with 2 pages and try to resize the page, I get 2 bugs like this: which leads us to the following code line:  I don't know if this bug is the same with the bug in my sample above or not.Could you please check it?Regards,Nguyen

Rajapandi Ravi · Answer

Nguyen,Query related to Grid:After reviewing your provided sample, we observed that
within the beforeDataBound event of the Grid, you’re calling the Grid’s refresh
method. Invoking the refresh method triggers the component’s re-rendering
process, resulting in a recursive call. Unfortunately, due to this continuous
recursion, the rendering process remains incomplete, and it was the cause of
your reported problem.We have removed the refresh in the beforeDataBound event in
your shared sample and the Grid was rendered properly and while resizing the
window 1st column “ID” was maintained properly in both small and
large screen. Since the problem was resolve by removing the refresh method, you
don’t need to invoke the resetIndentWidth method in the dataBound event of
Grid. Please refer the below screenshot and working sample for more
information.Screenshot:Sample: https://stackblitz.com/edit/angular-nvf4zk-mwzois?file=grid-page%2Fgrid-page.component.html,grid-page%2Fgrid-page.component.tsAnd in your query, you have mentioned that the below error
from the Grid. We have checked the sample and we are not able to reproduce the
reported error at our end. We hope the script error resolve while using the
above suggestion. If the below script error occurs, please share the issue
replication procedure with video demonstration that would be helpful for us to
validate and provide better solution.Query related to Kanban:We are able to reproduce your reported problem at our end,
currently we are validating script error in our source which was occurred from
the Kanban source while resizing the window. We will update you the details by
tomorrow 14th Jun 2024. Until then we appreciate your patience.

nguyen hoang phuong · Answer

Hi,Thanks for your response.I have some questions:First, About the first column of grid table. When I don't group data on the first loading, I can use the first suggestion of Syncfusion Team (on this topic) by setting like this:this.grid.getHeaderTable().querySelector('colgroup').firstChild.style.minWidth = '100px'; ​But when I group data on the first loading, this approach won't work anymore. What you might have done is that you resized the page after loading the first time, and we could see that the first column displayed as we expected. But what I want is that the first column will have the minWidth value on the first loading, in both case: grouping or not grouping data. I hope you can understand my requirement. Thanks.Second, About the query related to Kanban. Maybe some issues come from the refresh method. I used this method in the kanban component; and when I remove this method, the issue (in the console) disappear. But I used it based on the suggestion in this topic: Kanban Virtualization . And I really need to use this, so that the Kanban can work exactly what I expected. So this related topic can help you to fix this issue.Third, As you can see in the grid page. When we first toggle to grid page, we can see that the grid's height is not correct. The 'e-content' element has the 'auto' height (which is not correct, because I've set it to '400px' in the onBeforeDatabound event). Then if we click to collapse the first group, the height of the 'e-content' element will automatically back to '400px'. I don't know why grid has this behaviour. FYI: I've created another topic with the same issue (maybe). You can check it: issue when scolling grid. Thanks.Fourth, I will try to replicate the issue on the grid in a sample (the getTableWidth issue).Regards,Nguyen

Aishwarya Rameshbabu · Answer

Hi
Nguyen,First: Sorry for the inconvenience caused. You
can use the below code lines to set the minWidth of a column with and
without initial grouping. We have identified that you are currently utilizing
an older version of the Syncfusion package. Therefore, we highly recommend
upgrading to the latest version in order to resolve the reported script issue effectively.

dataBound() {
      if (this.flag) {
        this.grid.resetIndentWidth();
      }
      this.flag = false;
    }

Second: Regarding the
Kanban-related query, you can follow up on the forum below:Kanban VirtualizationThird: Regarding the
virtualization with Grid-related query, you can follow up on the forum below:Issue when scrolling gridFourth: Waiting to hear
back from you.RegardsAishwarya
R