TWebResponsiveGrid

Hi,

How can I lod this from an array I have extracted from a respones? I am using:

jsO:=TJSONObject.ParseJsonValue(AResponse) as TJSonObject;
Res:=StrToInt(jsO.GetJsonValue('Result'));
if Res=200 then
begin
    jsObj:=jsO.ParseJsonValue(jsO.GetJsonValue('Body')) as TJsonObject;
//    jArr:=jsObj.GetValue('obligations') as TJSONArray;
    jsObj2:=jsObj.GetValue('obligations') as TJSONObject;
    gObligations.BeginUpdate;
    gObligations.Items.Clear;
    gObligations.LoadFromJSON(jsObj2.ToJSON);
    gObligations.EndUpdate;
  ...

I get nothing. I have tested that the array is populate>

Thanks,

Ken

The method LoadFromJSON expects the URL of a JSON file, not the JSON.
This is demonstrated in the demo Basics\ResponsiveGrid.

To add items directly via code instead of loading from a JSON URI, you'd need to fill the ResponsiveGrid.Items collection

Ah, ok. Thanks, that's fine.

This causes an error when clicking on one of the items. It displays ok. Can you please check this out in the new version:

RItem:=gObligations.Items.Add;
RItem.HTML:='<table width="100%" border="0"><tbody>'+
        '<tr><td>Period Key: '+PeriodKey+'</td><td>Status: '+Status+'</td></tr>'+
        '<tr><td>Start: '+StartPeriodS+'</td><td>End: '+EndPeriodS+'</td></tr>'+
        '<tr><td>Due: '+DueS+'</td><td>Received: '+ReceivedS+'</td></tr>'+
        '</tbody></table>';
Hi,

Trying to do this differently as I want the background color to be different according to it's status.

I have tried this by setting the individual items HTML as:

<div class="container text-white" style="background-color:orangered">
<div class="row">xxxxx</div>
</div>

This sort of works, see https://snag.gy/3Pj5Nv.jpg

Problem with this though is that selecting an item has no visible feedback and the item gap isn't correct.

Is there a better way to set the background color?

Thanks,

Ken
https://snag.gy/3Pj5Nv

I tested:



procedure TForm1.WebButton1Click(Sender: TObject);
var
  PeriodKey,Status,StartPeriodS, EndPeriodS, DueS, ReceivedS: string;
begin
  PeriodKey := 'a';
  Status := 'b';
  StartPeriodS := 'c';
  EndPeriodS := 'd';
  DueS := 'e';
  ReceivedS := 'f';

  WebResponsiveGrid1.BeginUpdate;
  WebResponsiveGrid1.Items.Add.HTML :='<table width="100%" border="0"><tbody>'+
        '<tr><td>Period Key: '+PeriodKey+'</td><td>Status: '+Status+'</td></tr>'+
        '<tr><td>Start: '+StartPeriodS+'</td><td>End: '+EndPeriodS+'</td></tr>'+
        '<tr><td>Due: '+DueS+'</td><td>Received: '+ReceivedS+'</td></tr>'+
        '</tbody></table>';


  WebResponsiveGrid1.EndUpdate;
end;

and I could not see a click problem with this.

You can make a CSS class with a different color setting for hover.


I cannot judge from this picture what could be wrong with gap.
Setting the hover collor to cl yellow shows it like this https://snag.gy/mW5lEt.jpg

The problem is that the gap is set to 0.