change forcefit true on unidbgrid to false when the screen resolution is small

[Muhammad Idris]

how to change forcefit true on unidbgrid to false when the screen resolution is small such as a cellphone or tablet, so that the data in the column can be shifted to make it visible

ForceFit = True

 

when the screen resolution is small the data in the column becomes unclear

[Sherzod]

Hello,

Desktop grid?

[Muhammad Idris]

2 hours ago, Sherzod said:

Hello,

Desktop grid?

in a web browser

[Hayri ASLAN]

Hello,

You can't change forceFit dynamically in ExtJS.

[emin]

I prefer to use columns lock property on mobile Example: For mobile unidbgrid1.columns[0].locked:=true; 

You can use this code on create event

or on create event 

if uniGUIApplication.UniSession.IsPhone then

unidbgrid1.forcefit:=false

[Muhammad Idris]

19 hours ago, emin said:

I prefer to use columns lock property on mobile Example: For mobile unidbgrid1.columns[0].locked:=true; 

You can use this code on create event

or on create event 

if uniGUIApplication.UniSession.IsPhone then

unidbgrid1.forcefit:=false

still remains unchanged ForceFit

[Sherzod]

3 minutes ago, Muhammad Idris said:

still remains unchanged ForceFit

Hello,

Can you make a simple testcase to check?

[Muhammad Idris]

1 hour ago, Sherzod said:

Hello,

Can you make a simple testcase to check?

this is an example

DbgridForceFit.zip

[Sherzod]

Thanks. I'll check. 

[Sherzod]

23 hours ago, Muhammad Idris said:

this is an example

DbgridForceFit.zip 5.76 MB · 0 downloads

Hello,

Try this approach:

1. MainForm.Script ->

// Put this in MainForm.Script (or globally in ServerModule.CustomFiles)
Ext.override(Ext.grid.Panel, {
  /**
   * on = true  → forceFit = true; setFlex(1) for all non-locked columns; then setWidth(initialConfig.width)
   * on = false → forceFit = false; setFlex(0) for all non-locked columns; then setWidth(initialConfig.width)
   * Locked columns are: checkbox, row number, or columns marked with col.flexLock = true
   * Layouts are safely suspended/resumed with try/finally.
   */
  setForceFitSimple: function (on) {
    var g = this,
        v = g.getView && g.getView(),
        h = v && v.getHeaderCt && v.getHeaderCt(),
        cols = g.getColumnManager().getColumns(),
        suspended = false;

    try {
      // keep parity with console approach + update header state when available
      g.forceFit = (on === true);
      if (h && h.setForceFit) h.setForceFit(on === true);

      Ext.suspendLayouts();
      suspended = true;

      Ext.Array.each(cols, function (col) {
        // skip service/locked columns
        if (col.isCheckerHd || col.isRowNumberer || col.flexLock) return;

        if (on) {
          if (col.setFlex) col.setFlex(1);
          if (col.initialConfig && col.initialConfig.width != null)
            col.setWidth(col.initialConfig.width);
        } else {
          if (col.setFlex) col.setFlex(0);
          if (col.initialConfig && col.initialConfig.width != null)
            col.setWidth(col.initialConfig.width);
        }
      });
    } catch (e) {
      // optional: log the error; at minimum we still resume layouts in finally
      if (window.console && console.error) console.error('setForceFitSimple error:', e);
    } finally {
      if (suspended) Ext.resumeLayouts(true);
    }
  }
});

2. Usage ->

procedure TMainForm.UniFormResize(Sender: TObject);
begin
   //if UniSession.IsPhone then
   // unidbgrid1.forcefit:=false else unidbgrid1.forcefit:=true;

   if UniSession.IsPhone then
     UniDBGrid1.ForceFit := False else UniDBGrid1.ForceFit := True;

   UniDBGrid1.JSInterface.JSCall('setForceFitSimple', [UniDBGrid1.ForceFit]);
end;

 

[Muhammad Idris]

On 8/30/2025 at 8:00 PM, Sherzod said:

Hello,

Try this approach:

1. MainForm.Script ->

// Put this in MainForm.Script (or globally in ServerModule.CustomFiles)
Ext.override(Ext.grid.Panel, {
  /**
   * on = true  → forceFit = true; setFlex(1) for all non-locked columns; then setWidth(initialConfig.width)
   * on = false → forceFit = false; setFlex(0) for all non-locked columns; then setWidth(initialConfig.width)
   * Locked columns are: checkbox, row number, or columns marked with col.flexLock = true
   * Layouts are safely suspended/resumed with try/finally.
   */
  setForceFitSimple: function (on) {
    var g = this,
        v = g.getView && g.getView(),
        h = v && v.getHeaderCt && v.getHeaderCt(),
        cols = g.getColumnManager().getColumns(),
        suspended = false;

    try {
      // keep parity with console approach + update header state when available
      g.forceFit = (on === true);
      if (h && h.setForceFit) h.setForceFit(on === true);

      Ext.suspendLayouts();
      suspended = true;

      Ext.Array.each(cols, function (col) {
        // skip service/locked columns
        if (col.isCheckerHd || col.isRowNumberer || col.flexLock) return;

        if (on) {
          if (col.setFlex) col.setFlex(1);
          if (col.initialConfig && col.initialConfig.width != null)
            col.setWidth(col.initialConfig.width);
        } else {
          if (col.setFlex) col.setFlex(0);
          if (col.initialConfig && col.initialConfig.width != null)
            col.setWidth(col.initialConfig.width);
        }
      });
    } catch (e) {
      // optional: log the error; at minimum we still resume layouts in finally
      if (window.console && console.error) console.error('setForceFitSimple error:', e);
    } finally {
      if (suspended) Ext.resumeLayouts(true);
    }
  }
});

2. Usage ->

procedure TMainForm.UniFormResize(Sender: TObject);
begin
   //if UniSession.IsPhone then
   // unidbgrid1.forcefit:=false else unidbgrid1.forcefit:=true;

   if UniSession.IsPhone then
     UniDBGrid1.ForceFit := False else UniDBGrid1.ForceFit := True;

   UniDBGrid1.JSInterface.JSCall('setForceFitSimple', [UniDBGrid1.ForceFit]);
end;

 

still can not

DbgridForceFit_1.zip

[Sherzod]

1 hour ago, Muhammad Idris said:

still can not

I can’t directly test your test case since I don’t have TVirtualTable. But that’s not important, I was able to test it with a simple demo example, and it works for me.

And from your screenshot it actually looks like forceFit is applied — columns are stretched to fit the grid width (desktop mode). With forceFit=false you would see fixed widths and a horizontal scrollbar...

[Muhammad Idris]

On 9/1/2025 at 3:39 PM, Sherzod said:

I can’t directly test your test case since I don’t have TVirtualTable. But that’s not important, I was able to test it with a simple demo example, and it works for me.

And from your screenshot it actually looks like forceFit is applied — columns are stretched to fit the grid width (desktop mode). With forceFit=false you would see fixed widths and a horizontal scrollbar...

Could you please send a sample application? Thank You

[emin]

You have to select this options to see how it acts on phone

[Muhammad Idris]

15 hours ago, emin said:

You have to select this options to see how it acts on phone

I have selected the phone but ForceFit is still True

[emin]

Quote

I prefer to use columns lock property on mobile Example: For mobile unidbgrid1.columns[0].locked:=true; 

You can use this code on create event

or on create event 

if uniGUIApplication.UniSession.IsPhone then

unidbgrid1.forcefit:=false

Can you try this again