SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsfineui-datalist

fineui-datalist

Frontend & websites

View repository

Updated 10-16 07:22

About this skill

FineUI DataList Skill

When to Use

  • Display a vertical data list suited to mobile or card layouts
  • Generate list items with static DataListItem or server-side data
  • Implement single selection, multiple selection, grouping, navigation, or "load more"
  • Read the current selected value, or let a multi-select list continue accumulating selections on a normal click

DataList and Grid both display collection data, but their purposes differ: use Grid when you need columns, sorting, paging, editing, or a header; use DataList when you need concise vertical text-and-image items, mobile navigation, or a card-style list.

Before You Start

  1. First determine the syntax from the project structure: F.js / Pro / Core-MVC / Core-RazorForms / Core-RazorPages / FineUI.Java, and do not mix property names.
  2. Clarify whether the list items are plain text or trusted HTML. Plain text is encoded by default; text-and-image templates can use RawHtml only when the content is encoded or comes from trusted constants.
  3. When selection is needed, also set EnableSelect; for multiple selection, also set EnableMultiSelect, and provide a stable Value for each item.

Syntax Overview by Stack (Static List)

// F.js
F.create({
    type: 'DataList', id: 'DataList1', renderTo: '#wrap',
    fields: ['text', 'value'],
    data: [['中国', 'cn'], ['美国', 'us']]
});

<%-- FineUI.Pro --%>
<f:DataList ID="DataList1" runat="server">
    <f:DataListItem Text="中国" Value="cn" />
    <f:DataListItem Text="美国" Value="us" />
</f:DataList>

// FineUI.Core MVC
@(F.DataList().ID("DataList1").Items(
    F.DataListItem().Text("中国").Value("cn"),
    F.DataListItem().Text("美国").Value("us")))

<!-- FineUI.Core RazorForms / RazorPages -->
<f:DataList ID="DataList1">
    <f:DataListItem Text="中国" Value="cn" />
    <f:DataListItem Text="美国" Value="us" />
</f:DataList>

<!-- FineUI.Java -->
<f:data-list id="DataList1">
    <f:data-list-item text="中国" value="cn"></f:data-list-item>
    <f:data-list-item text="美国" value="us"></f:data-list-item>
</f:data-list>

Documentation Reference Files

File When to Read
references/items-data.md Static items, server-side binding, plain text and RawHtml text-and-image items, load more
references/selection-navigation.md Single/multiple selection, reading the selected value, accumulating selections on a normal click, grouping and navigation items

Related Skills

  • fineui-foundation: technology stack determination, page skeleton, RawHtml security model
  • fineui-panel: ViewPort panel and top toolbar commonly used on mobile pages
  • fineui-grid: data display that needs a header, columns, sorting, paging, and editing

Constraints & Rules

  1. Property names vary by syntax: F.js uses selectable / multiSelect / selectedItems; C# uses EnableSelect / EnableMultiSelect / SelectedValueArray; Java tags use enable-select / enable-multi-select / selected-value-array。
  2. Selection must have a stable Value: selectable items set Value; server-side data binding sets DataValueField. Do not use display text as a business identifier.
  3. Plain text is encoded by default: declarative items use Text; text-and-image HTML uses TextRawHtml / _TextRawHtml / RawHtml, and dynamic data within it must be encoded first.
  4. Rebinding and appending are different: when replacing the entire list, clear and rebind; for "load more" use AppendData / appendData, and do not rebuild the existing list every time.
  5. DataList is not Grid: do not generate Columns, pagers, cell editing, or Grid's selection API.
  6. Use only public controls and APIs: do not guess user controls from source class names; when unsure, check the source code for all three stacks and the official examples.
  7. KeepCurrentSelection only affects click selection: enable it for multiple selection, and a normal click will toggle the current item on top of the existing selection without pressing Ctrl; it is not responsible for restoring selection after rebinding data.

Official Resources