Customizing list grid cell

[mahbal]

Hi

In one of my project i need to display a list grid to user which fetches data from datasource . Unlike default listgrid view i need to display each record in listgrid in different format as given below.I have attached the image file for reference

...................................................................................................
.Date place time
.
.Headline
.
.content
.
.................................................................................................

...................................................................................................
.Date place time
.
.Headline
.
.content
.
.................................................................................................


All these fields displayed in single listgrid cell is fetched from single datasource.

How can I achieve this by using List grid?
Is their any other option to achieve this with out using List grid?

Thanks in advance.

[Isomorphic]

You haven't explained enough of your requirements to enable the question to be answered. For example:

1. are this different data values interactive - does something happen when you click on them?

2. is editing supported in this view?

3. how much such records do you need to display? If it's more than around 100, you'll need an approach that uses rendering on demand as more records are scrolling into view

The simplest approach, for just a read-only non-interactive display, is just to define a single-field ListGrid and use a CellFormatter to render out an HTML <table> to achieve this placement of data.

[mahbal]

Hi

1)Yes except content field all other fields are interactive when we click on each field it must redirect to some other page or new pop up window must appear.

2)Editing is not supported.

3)The number of records may vary from 1 to more than thousands and lakhs depending up on the data available.

[Isomorphic]

The best way to handle this is probably to use a ListGrid with one column and use the listGrid.showRecordComponents feature to create a non-editable DynamicForm that fills the entire cell and lays out the data in the way you want.

You will definitely need to use recordComponentPoolingMode:"recycle" or this will not scale to your data volume.

To be clear, this is basically using the ListGrid to manage incremental rendering and component recycling for a pool of DynamicForm instances - you won't be using any of the usual multi-column rendering behavior of the ListGrid, and again the DynamicForms you create will completely cover the default ListGrid rendering of Records.

[mahbal]

Hi Isomorphic,

In this list grid when i hover on each grid records a button must be displayed on hovered record alone . How can i achieve this.

Thank's

[Isomorphic]

You didn't mention *where* on the row should cause the button to appear, but, recordComponents can do this via just the standard Canvas-level hover APIs.

[mahbal]

Button should appear on top right corner of each grid.

[Isomorphic]

You probably meant of each row. If so, the advice just given applies.