dbGrid mobile - How to set row height and its font?

[AMIT]

I used dbgrid for mobile and found the row height of the grid is too much.    Is it possible to set the row height?

[Sherzod]

Hi,

 

For now you can try this:

 

1. UnimDBGrid1 -> ClientEvents -> UniEvents ... beforeInit fn:

function beforeInit(sender, config)
{
  config.itemHeight = 30;
}

2. UniServerModule -> CustomCSS ... add

.x-grid .x-grid-cell {
    height: 30px !important;
    line-height: 30px !important;
    font-family: 'Times New Roman', Times, serif;
    font-size:  11pt;
}

Best regards.

[AMIT]

Thank so much.   However the Grid Title height is still not change.   Is it possible to make it has the same height?

[Sherzod]

Hi,

 

Try...

 

1. UnimDBGrid1 -> ClientEvents -> UniEvents ... beforeInit fn:

function beforeInit(sender, config)
{
  config.itemHeight = 30;
  config.headerContainer = {
    height: 30
  };
}

2. UniServerModule -> CustomCSS ... add

.x-grid .x-grid-column {
    border-style: solid;
    border-width: 1px 1px 0;
    height: 30px;
    line-height: 30px;
    padding: 0 8px;
    vertical-align: middle;
    font-family: 'Times New Roman', Times, serif;
    font-size:  11pt;
    font-weight: bold;
}

.x-grid .x-grid-cell {
    height: 30px !important;
    line-height: 30px !important;
    font-family: 'Times New Roman', Times, serif;
    font-size:  11pt;
}

Best regards.

[AMIT]

Thank you

[jameswong]

hi, how to set tab height and its font on ​pagecontrol

Hi,

 

Try...

 

1. UnimDBGrid1 -> ClientEvents -> UniEvents ... beforeInit fn:

function beforeInit(sender, config)
{
  config.itemHeight = 30;
  config.headerContainer = {
    height: 30
  };
}

2. UniServerModule -> CustomCSS ... add

.x-grid .x-grid-column {
    border-style: solid;
    border-width: 1px 1px 0;
    height: 30px;
    line-height: 30px;
    padding: 0 8px;
    vertical-align: middle;
    font-family: 'Times New Roman', Times, serif;
    font-size:  11pt;
    font-weight: bold;
}

.x-grid .x-grid-cell {
    height: 30px !important;
    line-height: 30px !important;
    font-family: 'Times New Roman', Times, serif;
    font-size:  11pt;
}

Best regards.

[Fábio Matte]

This code is for when you want to apply CSS in a single UnimDBGrid1 , which in this case we should give a nickname to the CSS that goes to the UnimDBGrid1:

 

 

1. UnimDBGrid1 -> ClientEvents -> UniEvents ... beforeInit fn:

function beforeInit(sender, config)
{
    config.cls="mGridCliente";
    config.itemHeight = 30;
    config.headerContainer = {height: 30};
}

2. UniServerModule -> CustomCSS ... add

.mGridCliente .x-grid-column {
    border-style: solid;
    border-width: 1px 1px 0;
    height: 30px;
    line-height: 30px;
    padding: 0 8px;
    vertical-align: middle;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size:  9pt;
    font-weight: bold;
    width: 100%;
    text-align: center;
    background-color: #4CAF50;
    color: white;	
}

.mGridCliente .x-grid-cell {
    height: 40px !important;
    line-height: 30px !important;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size:  18pt;
    font-weight: bold;
    color: black;
    border-collapse: collapse;
    width: 100%;	
    background-color: #99ccff;
}

[milanius]

I tried set config.itemHeight = 30 and it doesn't work in version 1.70.0.1485 Is any other possibility how to set row height in TUnimDBGrid? Setting of header height works perfect...

[Sherzod]

Hi, 

I will check 

[Sherzod]

On 2/11/2019 at 4:24 AM, milanius said:

I tried set config.itemHeight = 30 and it doesn't work in version 1.70.0.1485 Is any other possibility how to set row height in TUnimDBGrid? Setting of header height works perfect...

Hi,

Can you try this approach (even without CustomCSS) ?!:

function beforeInit(sender, config) 
{
    var _height = 30;

    config.itemConfig = {
        height: _height
    };

    config.headerContainer = {
        height: _height
    };
}

 

[milanius]

4 hours ago, Sherzod said:

Hi,

Can you try this approach (even without CustomCSS) ?!:

function beforeInit(sender, config) 
{
    var _height = 30;

    config.itemConfig = {
        height: _height
    };

    config.headerContainer = {
        height: _height
    };
}

 

Hi, it works great, thanks! 

[Sanyi]

Hi!

I tried this mGridCliente, but not working... I want to design my grid. What do I wrong?

I attach my test, which come from your DBGrid - DrawColumnCell demo.

Thanks,

Regards,

Sándor

DBGrid - DrawColumnCell.zip

[Sherzod]

On 5/6/2020 at 11:15 AM, Sanyi said:

I tried this mGridCliente, but not working...

Hi,

Sorry for the late response.

Please explain in more detail what does not work?

 

[Sanyi]

OnDrawColumnCell 

[crystian]

On 5/11/2020 at 8:33 PM, Sherzod said:

Hi,

Sorry for the late response.

Please explain in more detail what does not work?

 

hi sherzod i have one similar quest about height of column header of unidbgrid.

how change a default size when this component is created
look at moment he is created at 32px in theme triton.
btw i want to change that size.

if i change in custom css this broken my others elements
look the image

[Sherzod]

Hello Crystian,

Which build of UniGUI are you using?

The above configuration does not work? Do you want to change the height of the header?

[crystian]

On 5/15/2020 at 5:24 PM, Sherzod said:

Hello Crystian,

Which build of UniGUI are you using?

The above configuration does not work? Do you want to change the height of the header?

im use 1.90.0.1523 

 

On 2/12/2019 at 6:28 AM, Sherzod said:

Hi,

Can you try this approach (even without CustomCSS) ?!:

function beforeInit(sender, config) 
{
    var _height = 30;

    config.itemConfig = {
        height: _height
    };

    config.headerContainer = {
        height: _height
    };
}

 

 i tried that config but not work 

 

 

[Sherzod]

6 hours ago, crystian said:

 i tried that config but not work 

I will check.

[Sherzod]

6 hours ago, crystian said:

 i tried that config but not work 

Can you try this approach for example?:

function painted(sender, eOpts)
{
    sender.getHeaderContainer().setHeight(60);
}

 

[crystian]

46 minutes ago, Sherzod said:

Can you try this approach for example?:

function painted(sender, eOpts)
{
    sender.getHeaderContainer().setHeight(60);
}

no sucess

function beforeInit(sender, config) 
{  
   function painted(sender, eOpts)
   {
    sender.getHeaderContainer().setHeight(60);
   }
}

[Sherzod]

2 minutes ago, crystian said:

no sucess

UniDBGrid or UnimDBGrid?

The post seems about mobile.

[crystian]

1 minute ago, Sherzod said:

UniDBGrid or UnimDBGrid?

The post seems about mobile.

i used UniDBGrid, in case its possible or only on mobile ?

 

[Sherzod]

15 minutes ago, crystian said:

i used UniDBGrid

function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts)
{
    columns.forEach(function(col){col.setHeight(60)});
}

 

[crystian]

7 minutes ago, Sherzod said:

function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts)
{
    columns.forEach(function(col){col.setHeight(60)});
}

 

nice! thats works, 
taking advantage of the moment, it is possible to make the same configuration on the pager?

[Sherzod]

Ok I will check.