ResponsiveList Questions

IW TMS IntraWeb Component Pack
1

I have read the documentation on the ResponsiveList control, but I still do not have the desired functionality. I am close, but need a few answers to complete my testing. I am using the data-aware version of the control.



1. Does the control only support Bitmap images? I followed the example on BLOBS, but I get an error stating that the bitmap image is not correctly formatted. The field contains PNG formatted images.



2. Is there a way to display a static image? I tried inserting an IMG tag into the Data Template, but the image never shows.



3. How do you get the values of the selected item?



4. How do you get values for an item when it is clicked?



5. If I add a button to the data template, how do I access the values for the row on a button click?

2
1. We are not aware of any issues with displaying PNG images from a BLOB field. Have you tried using different image files? Are image files in BMP or JPEG format displayed correctly?

2. Yes static images are supported. Can you please make sure the path to the image file is correct and accessible by the IntraWeb application?

3. You can get the values from the active record in the DataSet or you can use the AsyncGetAttributes call with the ItemIndex value as a parameter. This call will trigger the OnAsyncGetAttributes event that returns the requested value(s).

Detailed information can be found in the product manual PDF.

4. The OnItemClick or OnAsyncItemClick event is triggered when an item is clicked. You also use the AsyncGetAttributes call and OnAsyncGetAttributes event in this case.

5. Add a ControlEventHandler to the Button's onclick event in the template which will trigger the OnAsyncControlEvent. Then you can use the AsyncGetAttributes/OnAsyncGetAttributes technique again.

Example:
procedure TformResponsiveList1.IWAppFormCreate(Sender: TObject);
var
  li: TIWListItem;
begin
    li := TIWResponsiveList1.Items.Add;
    li.Text.Add('<br><input type="text" id="textid" value="test">');
    li.Text.Add('<br><input type="button" id="button" value="Button" onclick="'
      + TIWResponsiveList1.HTMLName + 'ControlEventHandler(event, ''ButtonClick'')">');
end;

procedure TformResponsiveList1.TIWResponsiveList1AsyncControlEvent(
  Sender: TObject; EventParams: TStringList; EventType, ControlID: string;
  ItemIndex: Integer);
var
  id, att: TStringList;
begin
  if EventType = 'ButtonClick' then
  begin
    id := TStringList.Create;
    id.Add('textid');
    att := TStringList.Create;
    att.Add('value');
    TIWResponsiveList1.AsyncGetAttributes(ItemIndex, id, att);
    id.Free;
    att.Free;
  end;
end;

procedure TformResponsiveList1.TIWResponsiveList1AsyncGetAttributes(
  Sender: TObject; EventParams: TStringList; ItemIndex: Integer; ControlIDs,
  AttributeNames, AttributeValues: TStringList);
begin
  WebApplication.ShowMessage(AttributeValues.Text);
end;


Detailed information can be found in the product manual PDF.
3

Bart,



I appreciate the detailed response and included example. That made all of the difference for my test.



1. There is NOT a problem displaying images in PNG format. I was able to isolate my problem down to a specific record. It was definitely a data problem.



I used the Northwind sample database, Employees table. While getting that working I also discovered how to format the image with text aligned to the right.



TIWDBResponsiveList1.DataTemplate.Add('<img src="<#Photo>"; style="float: left; margin: 5px;";>');



2. I got the static image display working when I used an external URL for the image. I was not able to get it to work with a file inside the projects wwwroot\files folder, but I think that is related to something else. I will try to resolve that elsewhere.



3,4 & 5. All worked exactly as you described and demonstrated in the example.

4

Daniel,


Good to hear you got it working now.
About (2), for an example you can have a look at the non-DB ResponsiveList demo in the TMSIWFeaturesDemo App which uses static images. The same technique should also work for the TIWDBResponsiveList.