How to fix column header Widths

[Danyelle]

When My Grid is in mobile view the header widths shrink so that I can not read the headers. I want them to stay the width I set them to.

In Mobile view:

Exsample: Decription should be completely visible. I would rather the columns stay where they can be seen and the user can scroll to see what they need. 

Code:

<ejs-grid id="Grid" dataSource=@Model.Tools height="510px" allowPaging="true" allowSorting="true" allowFiltering="true" allowGrouping="true" allowReordering="true" allowResizing="false"  allowMultiSorting="true" allowPdfExport="true" allowExcelExport="true"  showColumnChooser="true" toolbarClick="toolbarClick" printComplete='printComplete' toolbar="@(new List<string>() { "Print", "PdfExport","ExcelExport","Search", "ColumnChooser"})">
      <e-grid-groupsettings columns="@(new string[] {"LocationDescription"})"></e-grid-groupsettings>
      <e-grid-filterSettings columns="filterColumns" type="Excel"></e-grid-filterSettings>
      <e-grid-pagesettings pageCount="6" pageSize="16" pageSizes="@(new string[] { "5", "10" , "16","20", "All" })"></e-grid-pagesettings>
      <e-grid-columns>
          <e-grid-column field="LocationDescription" headerText="Location" width="120"></e-grid-column>
          <e-grid-column field="ToolID" headerText="ID" width="50"></e-grid-column>
          <e-grid-column field="InventoryDescription" headerText="Description" width="120"></e-grid-column>
          <e-grid-column field="GroundLength" headerText="Ground Length" width="110"></e-grid-column>
          <e-grid-column field="ToolID" headerText="Test" template="#temp" allowFiltering="false" width="50"></e-grid-column>
          ...more columns
         
      </e-grid-columns>
  </ejs-grid>

[Vignesh Sivagnanam]

Hi Danyelle  

Greetings from Syncfusion support 

Based on your query we found that the columns width are reduced while using grid in mobile view. By default the viewport size of the desktop is high when compared to the mobile viewport. So, we have override this default behavior and achieved your requirement by autofit the grid columns using the grid’s dataBound event. 

You can use the below code to achieve your requirement. Please refer the below code example and sample for your reference, 

<div> 

  <ejs-grid id="Grid" dataSource="ViewBag.DataSource" dataBound="dataBound" height="510px" allowPaging="true" allowSorting="true" allowFiltering="true" allowGrouping="true" allowReordering="true" allowResizing="false" allowMultiSorting="true" allowPdfExport="true" allowExcelExport="true" showColumnChooser="true" toolbar="@(new List<string>() { "Print", "PdfExport","ExcelExport","Search", "ColumnChooser"})"> 

    <e-grid-filtersettings type="Excel" columns="filterColumns" /> 

    <e-grid-groupsettings columns="@(new string[] {"ShipCountry"})"></e-grid-groupsettings> 

    <e-grid-pagesettings pageCount="6" pageSize="16" pageSizes="@(new string[] { "5", "10" , "16","20", "All" })"></e-grid-pagesettings> 

    <e-grid-columns> 

………………………………………………………. 

    </e-grid-columns> 

  </ejs-grid> 

</div> 

<script> 

  function dataBound(args) { 

    this.autoFitColumns(); 

  } 

</script> 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-dotnet-core1257333253.zip 

Documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/#autofit-specific-columns 

https://ej2.syncfusion.com/documentation/api/grid/#databound 

Regards 

Vignesh Sivagnanam 

[Danyelle]

this works, sort of. It leaves a big gap at the end of my grid in desktop view and it makes the Test Column to small. Is there a way to not autofit certain columns? Say the Notes and Test Section.

[Danyelle]

How do I only autofit columns in mobile view?

[Sujith Kumar Rajkumar]

Hi Danyelle, 

 

Please find the response for your queries below, 

 

Query – 1: “this works, sort of. It leaves a big gap at the end of my grid in desktop view and it makes the Test Column to small.” 

 

When auto fitting the columns, it will be adjusted based on the content and if there are extra width it will be displayed as white space which is the behavior. However you can fill up the remaining space when auto fitting columns by setting the Grid resizeSettings mode property as Auto. 

 

<e-grid-resizesettings mode="Auto"></e-grid-resizesettings> 

  

API: https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridResizeSettings.html#Syncfusion_EJ2_Grids_GridResizeSettings_Mode 

 

We have modified the previously shared sample based on this for your reference. You can find it below, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/163689/ze/GridModified1758291395 

 

Query – 2: “Is there a way to not autofit certain columns? Say the Notes and Test Section.” 

 

You can auto fit specific columns alone by passing the column field to the autoFitColumns property as demonstrated in the below code snippet, 

 

this.autoFitColumns(['Notes', 'TestSection']);   

 

More details on this can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/#autofit-specific-columns 

 

Query – 3: “How do I only autofit columns in mobile view” 

 

You can achieve this requirement by checking the if the current mode is mobile before calling the auto fit columns method as demonstrated below, 

 

function dataBound(args) { 

    if (/Mobi/i.test(window.navigator.userAgent)) { 

        this.autoFitColumns(); 

    } 

} 

 

More details on checking if it is mobile view can be checked in the below stack overflow link, 

 

Link: https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R