TWebResponsiveGrid

WEB TMS WEB Core
1
Hi,

If I set the HTML of an item to something like:

<div class="text-white bg-danger h-100 w-100">blah blah blah</div>

Then the item cannot be selected. I have tried it as a <p> as well.

This is also the case in a string grid.

Thanks,

Ken
2

Having no idea how you defined the CSS classes "text-white bg-danger h-100 w-100", I cannot see/judge if there is a hover class. For hovering , you need to define a CSS hover style.

3

I think I might be missing something here. I am using bootstrap classes which I thought were automatically included. I haven't put any styles in the project html file. How can I get this to work?

4

Test:

CSS added in HTML template

    <style>
    .myclass {
      background-color:red;
    }
    .myclass:hover {
      background-color:yellow;
    }
    .myclass:active {
      background-color:gray;
    }
    </style>

Code added to initialize items:

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  webresponsivegrid1.Options.ItemClassName := 'myclass';

  webresponsivegrid1.BeginUpdate;

  webresponsivegrid1.Items.Add.HTML := 'abc';
  webresponsivegrid1.Items.Add.HTML := 'def';
  webresponsivegrid1.Items.Add.HTML := 'xyz';


  webresponsivegrid1.EndUpdate;
end;

This shows how the CSS is used for the normal, hover & down state of the items in the grid


5

Thanks but for how I wanted to use this I would need it per item.

6

This code sets one item regular color to blue but hover & active behavior is the same (could be changed too with a hover or active css override)


procedure TForm1.WebFormCreate(Sender: TObject);
begin
  webresponsivegrid1.Options.ItemClassName := 'myclass';

  webresponsivegrid1.BeginUpdate;

  webresponsivegrid1.Items.Add.HTML := 'abc';
  webresponsivegrid1.Items.Add.HTML := 'def';
  webresponsivegrid1.Items.Add.HTML := 'xyz';

  webresponsivegrid1.EndUpdate;

  webresponsivegrid1.Items.Items[0].ElementHandle.classList.add('myclassblue');
end;


    .myclass {
      background-color:red;
    }
    .myclass:hover {
      background-color:yellow;
    }
    .myclass:active {
      background-color:gray;
    }
    .myclassblue {
      background-color:blue;
    }
7

Thanks, this would be perfect except the myclassblue never gets used it just uses the general background color.

8
But using the same way of doing it that you suggested for string grids works fine:

gObligations.Items.Items[J-1].ElementHandle.style.setProperty('background-color','green');

9

The code I sent was working fine here and it uses for the first item the myclassblue for the first item in the default TWebResponsiveGrid

10

Ok, thanks. I'll wait for he new version.