Set column freeze on User's selection

Question

I have a radio button that let users select whether to freeze a column or not.

The grid instance may already load before the user's selection.

How do I implement this? I'm thinking about destroy the grid instance but $("#Grid").ejGrid("destroy"); showing error that "ejGrid is not a function"
But please feel free to suggest another solution

Rajapandi Ravi · Answer

Hi Edward,Greetings from Syncfusion supportWe have checked your query and we could see that on clicking
in that radio button you like to freeze the column. Based on your query we have
prepared a sample and we suggest you use the below way to achieve your
requirement. Please refer the below code example and sample for more
information.

let grid: Grid = new Grid(
          {
             
  dataSource: orderData,
             
  allowPaging: true,
             
  dataBound: function() {
                 
  let radiobutton: RadioButton = new RadioButton({ label: 'Ship Country', change: change, name: 'default' });
                 
  // Render initialized RadioButton.
                 
  radiobutton.appendTo('#element1');
             
  },
             
  height: 365,
             
  columns: [
                 
  { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
                 
  { field: 'CustomerName', headerText: 'Customer Name', width: 150 },
                 
  { field: 'OrderDate', headerText: 'Order Date', width: 135, format: 'yMd',
  textAlign: 'Right' },
                 
  { field: 'Freight', width: 120, format: 'C', textAlign: 'Right' },
                 
  { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format:
  'yMd', textAlign: 'Right' },
                 
  { field: 'ShipCountry', headerTemplate: '#datetemplate', headerText: 'Ship
  Country', width: 150 }
             
  ],
             
  pageSettings: { pageCount: 2, pageSizes: true }
          });
      grid.appendTo('#Grid');
   
  function change(args) { //change event of
  radio button
      var column =
  grid.getColumnByIndex(+args.event.target.closest('th').getAttribute('aria-colindex'));
      column.isFrozen = true;
      grid.refreshColumns(); //UI
  changes
  }

Sample: https://stackblitz.com/edit/mzj4da?file=index.ts,index.htmlRegards,Rajapandi R

Edward Do · Answer

Thanks for your response. I tried your solution, but the grid.refreshColumns(); makes the datasource reloading non stop.

Btw, I should mention that the button is a control outside of the grid.

The scenario is when user selects the button, the grid will refresh and freeze the first column.

Rajapandi Ravi · Answer

Hi Edward,Thanks for your updateBased on your reported scenario we have prepared a sample
and achieved your requirement, please refer the below code example and sample
for more information.

let
  radiobutton: RadioButton = new RadioButton({ label: 'Check to Freeze', change: change, name:
  'state', checked: false });
  radiobutton.appendTo('#radiobutton1');

let
  grid: Grid = new Grid(
         
  {
             
  dataSource: orderData,
             
  allowPaging: true,
             
  height: 365,
             
  columns: [
                 
  { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
                 
  { field: 'CustomerName', headerText: 'Customer Name', width: 150 },
                 
  { field: 'OrderDate', headerText: 'Order Date', width: 135, format: 'yMd',
  textAlign: 'Right' },
                 
  { field: 'Freight', width: 120, format: 'C', textAlign: 'Right' },
                 
  { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format:
  'yMd', textAlign: 'Right' },
                 
  { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
             
  ],
             
  pageSettings: { pageCount: 2, pageSizes: true }
        
   });
     
  grid.appendTo('#Grid');
   
  function
  change(args) {
     
  var column = grid.getColumnByField('ShipCountry');
     
  column.isFrozen = true;
     
  grid.refreshColumns();
  }

Sample: https://stackblitz.com/edit/mzj4da-gjdfbb?file=index.ts,index.htmlRegards,Rajapandi R

Edward Do · Answer

thank you for your solution. I tried your code and having another issue with refreshColumn() after clicking on the radio button. It performs multiple requests to the service that provides the data and do not stop. The grid keeps refreshing.

I include my code here. When the grid is refreshed, I call onReload function and I aware that using the refreshColumn() causing multiple requests. That's why I use a workaround approach to update dataSource and dataQuery. is there any suggestion to apply your solution for freezing column into my code ?

 var dataManager = new ej.data.DataManager({
        url: sourceUrl, //sourceUrl is passing from parameter
        adaptor: new ej.data.UrlAdaptor(),
    });
if (dataQuery == null) //dataQuery is passing from parameter
        dataQuery = new ej.data.Query();
if (SearchButtonHiddenField.val() == "0") {
        SearchButtonHiddenField.val("1");
        var grid = new ej.grids.Grid({
            columns: jsonColumns,
            dataSource: dataManager,
            query: dataQuery,
            allowPaging: true,
            pageSettings: { pageSize: PageSizeDefault, pageCount: 10, currentPage: CurrentPageDefault },
            allowSorting: true,
            allowResizing: true,
            allowResizeToFit: true,
            allowSelection: true,
            enableRowHover: true,
            sortSettings: { allowUnsort: false, columns: [{ field: SortColumnDefault, direction: SortDirectionDefault }] }, //allowUnsort: false, disables unsorted state only allowing ascending/descending sorting
            enableAltRow: true,
            gridLines: 'Both',
            allowTextWrap: true,
            columnLayout: 'Auto',
            queryCellInfo: function (args) {
                FormatGrid(args, rowSelectionOn);
            },
            actionBegin: function (args) {
                //Call Grid.cshtml onActionBegin function when grid supports paging, pass gridName/args
                onActionBegin(gridName, args);
                //Call local onActionBegin function when grid displays processing image, pass gridName/args
                onActionBeginLocal(gridName, args);
            },
            dataBound: function (args) {
                //Call specific functions for the page itself
                //OnGridDataBound(args);
                //Call Grid.cshtml onDataBound function for all grids, pass gridName
                onDataBound(gridName);
                //Call local onDataBound function to display total count/page rows dropdown/processing image, pass gridName
                onDataBoundLocal(gridName);
            },
            actionComplete: function (args) {
                UpdateTableInfo(gridName);
            }
        });
        grid.appendTo('#' + gridName);
    }
    else {
        //Reload grid
        //Call Grid.cshtml onReload function for all grids, pass gridName/dataManager/dataQuery
        onReload(gridName, dataManager, dataQuery);
    }

function onReload(gridName, dataManager, dataQuery) {
        //Reload Grid
        //Set grid.dataSource instead of calling grid.refresh(), refresh caused the controller datasource method to be fired multiple times
        var grid = document.getElementById(gridName).ej2_instances[0]; // Grid instance
        grid.dataSource = dataManager;
        grid.query = dataQuery;
    }

Rajapandi Ravi · Answer

Hi Edward,Thanks for the updateCurrently, we are validating this query with your shared information,
and we will update you the details on or before 27th June 2022.
Until then we appreciate your patience.Regards,Rajapandi R

Rajapandi Ravi · Answer

Hi Edward,Thanks for the update.By default, when we invoke the refreshColumns() method the dataBound event gets triggered, in your query you have performed some actions in dataBound event, so it will trigger again and again like loop. It was the cause of the problem. To resolve the problem, we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information. API: https://ej2.syncfusion.com/documentation/api/grid/#databound https://ej2.syncfusion.com/documentation/api/grid/#loadRegards,Rajapandi R