JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid Grid Column Width Based on value of the column

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #102193
    Ronak
    Member
    Up
    0
    Down

    Hello,
    Type Of Integration: Angular
    I want to implement two things within the Grid as below.

    1. I have integrated the Smart.Grid and want the column to be auto size (width) based on the max value it contains.
    2. persist column width if user resize any column on every load or refresh.

    Thanks,

    #102194
    YavorDashev
    Member
    Up
    0
    Down

    Hi Ronak,
    If you set the width property of a column to ‘auto’ and the allowResize(disables changing the width of the column) property to false this way when you have large value the GridColumn width will adjust so that the value inside the cell will not overflow it.
    I have prepared a quick code snippet how to set your column:

    	behavior = {
            columnResizeMode: 'growAndShrink'
             };
    	columns: GridColumn[] =
    	[
    	  { label: 'Name', dataField: 'name', width: 250 },
    	  { label: 'Beverage Type', dataField: 'type', width: 250 },
    	  { label: 'Calories', dataField: 'calories', width: 180 },
    	  { label: 'Total Fat', dataField: 'totalfat', width: 'auto', allowResize: false},
    	  { label: 'Protein', dataField: 'protein' }
    	];

    Let me know if that works for you!
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.