WebDBTableControl and font column size

WEB TMS WEB Core
1

Hi,
How can i increase the font size of thid table ? can i do it direct by code or html associated... in the html code i've a tag like '

' but how can i do it ?

Have you a sample code in bootstrap to configure the grid ?
bye

2

Global font control is via TWebDBTableControl.Font.
Per column, you can create a CSS class with your desired font and set this CSS class via TWebDBTableControl.Columns[x].ElementClassName

3

can i have a sample , please ?

4

Add a CSS class to your project HTML file, for example:

.myfont {
  font-family: "Times New Roman", Times, serif; 
  font-size: 12pt;
}

and use it from the form code:

TWebDBTableControl.Columns[x].ElementClassName := 'myfont';

5

I've a custom.css where there is the .myfont settings. At design time on Columns object (with object inspector) i've set ElementClassName = myfont... but nothing happen !! always default font. I tried also to use grdAliqIVAGetCellChildren() event to put grdAliqIVA.Columns[ACol].ElementClassName := 'myfont'; but nothing .... Can you help me ?

6

In the form of TWebDBTableControl i've a HTML associated with this code . The your project where my derived is : XDataMusicWeb

There is an HTML problem ?



    <div class="row">
      <div class="col-sm-6">
        <div class="dataTables_length">
          <label>Mostra <select id="aliqiva_gr.cbPageSize" class="form-control input-sm"></select> voci</label>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="dataTables_filter">
          <label>Cerca :<input id="aliqiva_gr.edCercaOrd" type="search" class="form-control input-sm" placeholder="Inserisci il valore"></label>
        </div>
      </div>
    </div>

    <div id="aliqiva_gr.grdAliqIVA"></div>

    <div class="row">
      <div class="col-sm-6">
        <div class="dataTables_info" role="status" aria-live="polite">
          <span id="aliqiva_gr.lbPaginationInfo"></span>
        </div>
      </div>
      <div class="col-sm-6">
        <div id="aliqiva_gr.lcPaginator" class="dataTables_paginate paging_simple_numbers">
        </div>
      </div>
    </div>

</div>
7

I added this CSS to the form HTML

 <style>
  .redcolumn { background-color:red; font-size: 12pt; font-weight:bold; }
  </style>

Then I added this event handler:

procedure TForm1.WebTableControl1GetCellClass(Sender: TObject; ACol,
  ARow: Integer; AField: TField; AValue: string; var AClassName: string);
begin
  if acol = 1 then
  begin
    AClassName := 'redcolumn';
  end;
end;

and it shows this result:

image
image779×406 10.6 KB

8

Ok bruno go fine ... but i've a index.html page where my custom.css is declared like :

<link href="./template/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="./template/vendor/datatables-plugins/dataTables.bootstrap.css" rel="stylesheet" type="text/css">
<link href="./template/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="./template/dist/css/sb-admin-2.css" rel="stylesheet">
<link href="./template/vendor/morrisjs/morris.css" rel="stylesheet">
<link href="./template/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="./template/custom/custom.css" rel="stylesheet" type="text/css">

<script src="./template/vendor/jquery/jquery.min.js"></script>
<script src="./template/vendor/bootstrap/js/bootstrap.min.js"></script>

<title>New_Tech_Gest</title>
<script type="text/javascript" src="$(ProjectName).js"></script>

<style>
</style>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

why i cant see in other pages ? i can see bootstrap css but not mine custom css ...

Bye

9

discovered the problem !! was a cache problem, css file must be changed of version everytime its changed like this instruction :

Note -> ?v=1 ... v2 ... v3 .... etc

Bye

10

You can use the automatic version feature to avoid such cache issues. This can be enabled in project options.

11

don't go !! i've already set it but nothing.... this (?v=1 ...) solve