1. Home
  2. Forum
  3. Angular - EJ 2
  4. Resizing is not working properly

Resizing is not working properly

Hi Team,


Resizing is not working properly as we are using hierarchical grid, if im trying to resize the 2nd column then it is resizing 1st column and if we try to resizing 3rd column it is resizing 2nd one.
1. Column is getting hidden when we try to resize the column


I have attached my sample code. please add you basic data on it. we have used below width and minwidth for my application. Please help on it,as we have deadline

width: 100,
minWidth: 20,


Note:1.  Now datetime columns we are using some other libraries. for parent grid we are manipulating by using lib in app.html(please check code in attached sample) but for child grid how i can manipulate it.
2. How can I change the sorting icon from up to down n down to up while sorting,those are not proper(reverse)

Regards,
Bhavya

Attachment: sample_4dc5d692.zip

2 Replies
BH Bhavya Harini April 24, 2020 04:31 AM UTC

Hi Team,

Please help on it ASAP

KM Kuralarasan Muthusamy Syncfusion Team April 27, 2020 12:43 PM UTC

Hi Bhavya, 

Thanks for contacting Syncfusion support. 

Query #1: Resizing is not working properly as we are using hierarchical grid, if im trying to resize the 2nd column then it is resizing 1st column and if we try to resizing 3rd column it is resizing 2nd one. 
                                                                                                                   && 
Query #2: Column is getting hidden when we try to resize the column 
                                                                                                                   && 
Query #3: if we resize last menu item is not displayed(hidden) 
 
For these resize issues we suggest you change “I need an icon before the expand icon”  this requirement workaround like as below code snippet, 
 
app.component.ts: 
 
rowDataBound(args) { 
    var tdEle = document.createElement('div'); 
    tdEle.classList.add('e-icons', 'Custom-icon'); 
    args.row.firstElementChild.appendChild(tdEle); 
    args.row.querySelector('.custom-menu').style.visibility = "hidden"; 
    args.row.addEventListener('mouseenter', function (args) { 
      args.target.querySelector('.e-menu-wrapper').style.visibility = "visible"; 
    }) 
    args.row.addEventListener('mouseleave', function (args) { 
      args.target.querySelector('.e-menu-wrapper').style.visibility = "hidden"; 
    }) 
  } 
 
dataBound(args) { 
    if (this.initialRender) { 
      var headertable = this.grid.element.querySelector('.e-columnheader'); 
      var tdEle = document.createElement('div'); 
      headertable.firstElementChild.appendChild(tdEle); 
      this.initialRender = false; 
    } 
  } 
 
app.component.css  
 
.Custom-icon, .Updated-icon { 
    float: left; 
} 
 
.e-dtdiagonalright, .e-dtdiagonaldown { 
    width: 40%; 
    display: inline-block; 
} 
 
Instead of creating new td, we have rendered the custom icon within the detail row expand and collapse cell. 
 
Query #4: Now datetime columns we are using some other libraries. for parent grid we are manipulating by using lib in app.html(please check code in attached sample) but for child grid how i can manipulate it. 
 
We could not understood this query properly. So please provide more details about this requirement. This will help us to provide a better suggestion asap. 
 
Query #5: How can I change the sorting icon from up to down n down to up while sorting,those are not proper(reverse). 
 
From this query, we found that you want to change the sort icon. You can override this icons like as following code snippet, 
 
app.component.css  
 
.e-sortfilterdiv.e-descending:before { 
    content: '\e840'; 
} 
 
.e-sortfilterdiv.e-ascending:before { 
    content: '\e83f'; 
} 
 
We have modified our sample with this solutions and you can find that sample from the below link, 


Regards, 
Kuralarasan M  


Loader.
Up arrow icon