Jump to content

Hiding focus lines in TUniDBGrid


Tim
 Share

Recommended Posts

Hi,

 

In my project i have a TUniDBGrid connected via a TDataSource to a TClientDataset. The data will not be editable directly in the grid (although it will be possible to delete rows by clicking a separate TUniButton control). I would like for the grid to appear as little like a grid as possible and more like a tabular listing of data. To this end i have set following options of the TUniDBGrid control:

 

WebOptions.Paged=false
TrackOver=false
StripeRows=false
ReadOnly=true
Options.dgRowSelect=true
Options.dgColLines=false
Options.dgRowLines=false
Options.dgTitles=false
 

I have also added the following to TUniServerModule.CustomCSS:

 

.x-grid-row-selected .x-grid-cell-inner
{
    background-color:white;
}
.x-panel .x-grid-body
{
    border-width: 0
}
This hides the left, right and bottom borders of the grid (i would also like to hide the top border, but i guess i can cover this up with a TUniPanel), the column headers, the lines between unfocused rows, and the different colors when the user clicks on or moves the mouse over a row. Unfortunately, an ugly dotted line is still displayed above and below the focused row -- see attachment. Can anybody suggest of a way of hiding this?
 
Many thanks,
Tim

post-2020-0-31537500-1425533686_thumb.png

Link to comment
Share on other sites

Hi Farshad,

 

The user should be able to scroll vertically through the rows in the grid (if there are more records than can be displayed in the space available), but otherwise there is no way to navigate through the data and no concept of current row or column.

 

The user needs to be able to select/deselect rows by clicking on a checkbox displayed at the leftmost position in each grid row. Selected rows can then be deleted by clicking a separate TUniButton control. I had initially hoped to implement this using the dgMultiSelect and dgCheckSelect options (hence my other post http://forums.unigui.com/index.php?/topic/5110-dgmultiselect-option-in-tunidbgrid/). I have now come up with an alternative implementation: The TClientDataSet has an extra Selected field, which gets set when the user clicks on the leftmost portion of a grid row; in the grid's OnFieldImage event a tick or cross bitmap displayed depending on the value of the Selected field.

 

Overall the current implementation works well, it is just that the focus lines (and to a lesser extent the top border of the grid) detract from the desired look and feel.

 

Many thanks,

Tim

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...

Attached is a demo project showing a read-only grid without lines. Records can be multiselected (by clicking on a home-made checkbox in the left column) and deleted (by clicking the button underneath the grid). If you look closely you can see a thin blue line between the header and the data. In Firefox a small blue line also appears under a checkbox if its cell is currently focussed. So it is not a perfect solution, but still a big improvement in my opinion. I hope this demo project is useful for someone. If anyone has any suggestions as to how to improve this further -- in particular how to get rid of the blue lines -- please let me know :)

GridNoLinesDemo.zip

Link to comment
Share on other sites

.. a thin blue line between the header and the data. ..

 

Hi Tim.

 

I do not know why you want  get rid of the lines :)

but, try:

 

procedure TMainForm.UniFormCreate(Sender: TObject);
const
  cMin = 1;
  cMax = 13;
  cNumberAsString : array[cMin..cMax] of string = ('one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen');

  procedure AddRecord(n : integer);
  begin
    ClientDataSet1.Append();
    ClientDataSet1.FieldByName('id').AsInteger := n;
    ClientDataSet1.FieldByName('data').AsString := cNumberAsString[n];
    ClientDataSet1.FieldByName('selected').AsBoolean := n mod 2 = 0;
    ClientDataSet1.Post();
  end;

var
  i : integer;
begin
  ClientDataSet1.CreateDataSet();
  ClientDataSet1.Active := true;
  for i := cMin to cMax do AddRecord(i);
  ClientDataSet1.First();
  DataSource1.DataSet := ClientDataSet1;

  UniSession.AddJS(UniDBGrid1.JSName + '.headerCt.hide()');   // <------------------------
end;

Best regards.

Link to comment
Share on other sites

Thanks very much! The blue line between the header and the data is now gone :)

 

In Firefox i still have the problem that a small blue line is visible at the bottom of the focussed cell (see attached image BlueLineUnderFocusedCell.png). Any chance of getting rid of that too? Then it would be perfect :)

post-2020-0-52864300-1427699360_thumb.png

Link to comment
Share on other sites

It relates to the font size. If I set UniGrid1.Font.Size to a much bigger value (say 24), then i see a thick blue line in all browsers if one of the leftmost (image) cells has the focus. If I set UniGrid1.Font.Size to a much smaller value (say 8), then i see a thick blue line in all browsers if one of the rightmost (text) cells has the focus. In the original demo project i tried to pick a value for UniGrid1.Font.Size that avoids the blue line appearing in either the leftmost or rightmost cells, but it seems that different browsers render the grid slightly differently so that this does not always work. Possibly i could add something to UniServerModule.CustomCSS to make it display the focussed grid cell as white rather than blue? The value of UniGrid1.Font.Size would then not be so critical.

 

It seems i may have spoken too soon about the headerCt.hide() trick: While it *does* hide the blue line between the header and the data, it also seems to have the effect of altering the column widths. Please see the attached image ChangedColumnWidths.png. The top half shows how the original demo project appears in Firefox. The bottom half shows how it appears with the call to headerCt.hide() added at the end of UniFormCreate. Any ideas why that might happen?

 

Thanks again :)

post-2020-0-59396200-1427700303_thumb.png

Link to comment
Share on other sites

1.

 

replace

UniSession.AddJS(UniDBGrid1.JSName + '.headerCt.hide()');

to

UniSession.AddJS('Ext.onReady(function(){' + UniDBGrid1.JSName + '.headerCt.hide()});');

2. and

 

replace

.x-grid-row-selected .x-grid-cell-inner
{
    background-color:white;
}
.x-panel .x-grid-body
{
    border-width: 0
}

to

.x-grid-row .x-grid-cell-selected{
  background-color: #FFFFFF !important;
}

Now, should works, as you want :)

  • Upvote 1
Link to comment
Share on other sites

Yes, that seems to have got it :) I ended up retaining the border-width:0 in the CustomCSS, because otherwise I get a blue border on the left and bottom sides of the grid (see attached image BordersBottomAndLeft.png for a comparison of how it looks with and without this change). In UniServerModule.CustomCSS i now have the following code, which gives me the appearance that i want:
.x-grid-row .x-grid-cell-selected {
  background-color: #FFFFFF !important;
}
.x-panel .x-grid-body {
    border-width: 0
}

Many thanks,

Tim

 

post-2020-0-24389800-1427710333_thumb.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...