ListView CRUD Operations

Other usage samples: Simple List View | ModelBinding Sample | Grouping Sample | Layout Test | ItemDataBound Event | CRUD Operations

This sample demonstrates edit, delete, and insert operations using the ListView component.

Id Name Price Actions
No items. Use the insert row below to add one.

Status: Ready


Code:

<ListView Context="Item"
          ItemType="Widget"
          EditIndex="@editIndex"
          InsertItemPosition="InsertItemPosition.LastItem"
          ItemEditing="OnItemEditing"
          ItemUpdating="OnItemUpdating"
          ItemCanceling="OnItemCanceling"
          ItemDeleting="OnItemDeleting"
          ItemInserting="OnItemInserting">
    <ItemTemplate>
        <tr>
            <td>@Item.Name</td>
            <td>
                <button @onclick="() => listView.HandleCommand("edit", null, index)">Edit</button>
                <button @onclick="() => listView.HandleCommand("delete", null, index)">Delete</button>
            </td>
        </tr>
    </ItemTemplate>
    <EditItemTemplate>...</EditItemTemplate>
    <InsertItemTemplate>...</InsertItemTemplate>
    <EmptyDataTemplate>No items available.</EmptyDataTemplate>
</ListView>