[How to change TunimPanel Background Image at Runtime?]

1 minute ago, Sherzod said:

What exactly?

  if oPanelX is TUniCustomContainerPanel then
     begin
        var oPanel:= TUniCustomContainerPanel(oPanelX);
        if Assigned(oPanel) then
          begin
            var oJS:= oPanel.JSInterface;
            oJS.JSAddListener('painted',
            oJS.JSFunction('sender',
            'sender.bodyElement.setStyle(''background'', ''url('+S+')'')'));

            oJS.JSAddListener('painted',
            oJS.JSFunction('sender',
            'sender.bodyElement.setStyle(''background-repeat'', ''no-repeat'')'));

            oJS.JSAddListener('painted',
            oJS.JSFunction('sender',
            'sender.bodyElement.setStyle(''background-size'', ''100% 100%'')'));
          end;
     end;
I try setting in one command.

[How to change TunimPanel Background Image at Runtime?]

11 minutes ago, Sherzod said:

Sorry, what do you mean?

'sender.bodyElement.setStyle(''background'', ''url(/files/mainlogo2.jpg)  no-repeat 100% 100%'')')); Can do like this?

[How to change TunimPanel Background Image at Runtime?]

19 minutes ago, Sherzod said:

Hello,

I don't know where you got it from:

 

In your case this will be correct:

procedure TMainmForm.UnimFormCreate(Sender: TObject);
begin
  var oPanel:= UnimContainerPanel1;
//  TuniLayoutConfig(oPanel.LayoutConfig).Cls:= 'mainbackground';
  var oJS:= oPanel.JSInterface;
  oJS.JSAddListener('painted',
  oJS.JSFunction('sender',
  'sender.bodyElement.setStyle(''background'', ''url(/files/mainlogo2.jpg) repeat scroll 0% 0%'')'));
end;

 

how to set cover of image with setstyle?
  var oPanel:= UnimContainerPanel1;
//  TuniLayoutConfig(oPanel.LayoutConfig).Cls:= 'mainbackground';
  var oJS:= oPanel.JSInterface;
  oJS.JSAddListener('painted',
  oJS.JSFunction('sender',
  'sender.bodyElement.setStyle(''background'', ''url(/files/mainlogo2.jpg)'')'));

  oJS.JSAddListener('painted',
  oJS.JSFunction('sender',
  'sender.bodyElement.setStyle(''background-size'', ''cover'')'));

Can coding in single command?
 

[How to change TunimPanel Background Image at Runtime?]

procedure TMainmForm.UnimFormCreate(Sender: TObject);
begin
  var oPanel:= UnimContainerPanel1;
//  TuniLayoutConfig(oPanel.LayoutConfig).Cls:= 'mainbackground';  // work OK.
  var oJS:= oPanel.JSInterface;
  oJS.JSAddListener('afterrender',
  oJS.JSFunction('sender',
  'document.body.style.background=''url("/files/mainlogo2.jpg");repeat scroll 0% 0%'''));  //Mainlogo2.jpg not shown.
end;

 

FormBackground.zip

[possible? .. give TUniPanel a background-image per CSS?]

On 2/13/2016 at 12:53 AM, Sherzod said:

Hi,

 

Try:

 

CSS:

.tulips {
  background: url("files/tulips.jpg")
}

UniPanel1 ...

function afterrender(sender, eOpts)
{
  sender.body.addCls("tulips")
}

Or:

UniSession.AddJS(UniPanel1.JSName + '.body.addCls(''tulips'')');

Best regards.

How to change filename (jpg) at run-time?

[How to sort natural order of tunidbgrid with Tclientdataset?]

2 hours ago, Sherzod said:

For example, try sorting this in Excel...

[How to sort natural order of tunidbgrid with Tclientdataset?]

Just now, Sherzod said:

Hello,

In fact, this is the natural order.

code-1
code-2
...
code-10
this is correct order.

[How to sort natural order of tunidbgrid with Tclientdataset?]

[How to change tunidbgrid font of column row number?]

45 minutes ago, Sherzod said:

But what's stopping you from using one class?

.customGrid .x-column-header{
   line-height: normal;
  vertical-align: middle;
  }
.customGrid .x-title-text{
  line-height: normal;
  vertical-align: middle;
  }

.customGrid .x-grid-td .x-grid-cell-inner {
  line-height: normal;
  vertical-align: middle;
  text-overflow: ellipsis;
  overflow: hidden;
  }

 

customGrid3 .x-grid-td .x-grid-cell-inner {
  line-height: normal;
  vertical-align: middle;
  text-overflow: ellipsis;
  overflow: hidden;
  }
.customGrid1 .x-column-header{
   line-height: normal;
  vertical-align: middle;
 } 
if combine above (customCSSGrid1&customCSSGrid3)  customCSSGrid3 display incorrect.

customCSSGrid4 .x-grid-cell-row-numberer {
  font-weight: bold;
  font-size: 14px;
  font-family: cursive, "Times New Roman", Times, serif;
}

Need other customCSSGrid4 to customize grid row number.

[How to change tunidbgrid font of column row number?]

9 minutes ago, Sherzod said:

How do you understand this? I don't quite understand.

.customGrid1 .x-column-header{
   line-height: normal;
  vertical-align: middle;
  }
.customGrid2 .x-title-text{
  line-height: normal;
  vertical-align: middle;
  }

.customGrid3 .x-grid-td .x-grid-cell-inner {
  line-height: normal;
  vertical-align: middle;
  text-overflow: ellipsis;
  overflow: hidden;
  }

.customGrid4 .x-grid-cell-row-numberer {
  font-weight: bold;
  font-size: 14px;
  font-family: cursive, "Times New Roman", Times, serif;
}

Is possible to combine multiple css with LayoutConfig.Cls 
Example: dbGrid.LayoutConfig.cls := 'customGrid1;customGrid2; customGrid3;customGrid4';

[How to change tunidbgrid font of column row number?]

3 hours ago, Sherzod said:

What is this? Clarify, please.

setting multiple css with cls of layloutconfig.

[How to change tunidbgrid font of column row number?]

8 hours ago, Sherzod said:

Well,

1. CustomCSS ->

.customGrid .x-grid-cell-row-numberer {
  font-weight: bold;
  font-size: 14px;
  font-family: cursive, "Times New Roman", Times, serif;
}

2. OnCreate or when created dynamically ->

UniDBGrid.JSInterface.JSConfig('cls', ['customGrid']);

 

Can setting cls = 'customGrid1;customGrid2; customGrid3'?

[How to change tunidbgrid font of column row number?]

8 hours ago, Sherzod said:

Well,

1. CustomCSS ->

.customGrid .x-grid-cell-row-numberer {
  font-weight: bold;
  font-size: 14px;
  font-family: cursive, "Times New Roman", Times, serif;
}

2. OnCreate or when created dynamically ->

UniDBGrid.JSInterface.JSConfig('cls', ['customGrid']);

 

  oList.Add('.customGridHeader .x-column-header{');
  oList.Add('    line-height: normal;');
  oList.Add('    vertical-align: middle;');
  oList.Add('}');

  oList.Add('.customGridTitle .x-title-text{');
  oList.Add('    line-height: normal;');
  oList.Add('    vertical-align: middle;');
  oList.Add('}');

  oList.Add('.customGridBody .x-grid-td .x-grid-cell-inner {');
  oList.Add('    line-height: normal;');
  oList.Add('    vertical-align: middle;');
  oList.Add('    text-overflow: ellipsis;');
  oList.Add('    overflow: hidden;');
  oList.Add('}');

How to combine .x-grid-cell-row-number css with above css,
or coding js at runtime with dbgrid jsInterface? 

[How to change tunidbgrid font of column row number?]

11 hours ago, Sherzod said:

I don't understand why you want this at runtime?

for writing special components.

[How to change tunidbgrid font of column row number?]

1 minute ago, Sherzod said:

What's the point of this?

for example change css with coding runtime through unigui component.

[How to change tunidbgrid font of column row number?]

8 minutes ago, Sherzod said:

Hello,

One possible solution:

CustomCSS ->

.x-grid-cell-row-numberer {
  font-weight: bold;
  font-size: 14px;
  font-family: cursive, "Times New Roman", Times, serif;
}

 

How to change above css with dbgrid.jsInterface?

[How to change tunidbgrid font of column row number?]

[How to fire Event (edit) of dbGrid after end editing with editor (TuniEdit)?]

5 hours ago, Sherzod said:

So, has the issue been resolved?

function headerclick(ct, column, e, t, eOpts)
{
    var timeNow = (new Date()).getTime();
    if (this.lastClicked) {
        if (timeNow > (this.lastClicked + 500)) {
        } else {
            ajaxRequest(this, "columndblclick", ["columntext=" + column.text,
             "columnindx=" + column.dataIndex]);
        }
    }
    this.lastClicked = timeNow;
}
 

This script cause dbgrid do not fire grid.edit.

[How to fire Event (edit) of dbGrid after end editing with editor (TuniEdit)?]

24 minutes ago, Sherzod said:

So, has the issue been resolved?

Not Resolve!  Dbgrid dont't fire ajaxRequest "edit" to server.
if i change dbgrid to edit mode on server. How to force dbgrid to fire ajaxRequest "edit"

[How to fire Event (edit) of dbGrid after end editing with editor (TuniEdit)?]

1 hour ago, Sherzod said:

Hello, 

For what? 

-Grid.DataSet is Memory Table.
-After end editing of column editor then change dataset to edit mode.
-read data and save to master database with entity object.
-write data from entity object to dataset then dataset.post.

Oh..Sorry , I founded bug in my component.
cause: repeat write grid header at run-time with client operation mode.

 

[How to fire Event (edit) of dbGrid after end editing with editor (TuniEdit)?]

[DBGrid Spaltenbreite automatisch anpassen]

On 2/1/2016 at 3:45 PM, Sherzod said:

Hi,

 

If I understood you correctly, try:

 

UniDBGrid1 -> ClientEvents -> ExtEvents [Ext.data.Store[store] ] add store.load fn:

function store.load(sender, records, successful, eOpts)
{
  sender.grid.columnManager.columns.forEach(function(col){col.autoSize()})
}

Best regards.

How to write code only columns[0] autosize?

[How to setting dbgrid column with ellipsetext?]

2 hours ago, Sherzod said:

Well,

Does this solution work for all columns?

 

.x-grid-cell-inner {
    text-overflow: ellipsis !important;
}

I try above method but not work.

and try to combine with this css in servermodule

  .customGridHeader .x-column-header {
      line-height: normal;
     vertical-align: middle;
  }

  .customGridBody .x-grid-td  .x-grid-cell-inner{
      line-height: normal;
      vertical-align: middle;

      text-overflow: ellipsis;
  }

 

[How to setting dbgrid column with ellipsetext?]

4 minutes ago, Sherzod said:

Are you sure you are asking this for columns and not rows?

10 minutes ago, Sherzod said:

Are you sure you are asking this for columns and not rows?

 

[How to setting dbgrid column with ellipsetext?]

On 8/18/2023 at 10:48 AM, Sherzod said:

Hello, 

This post may help you: