ListView - Manual data editing

Products - RadListView bound to SQL datasource
Name: Chai
Quantity: 10 boxes x 20 bags
Price: $18.00
Units: 39
Discontinued:
 
Name: Chang
Quantity: 24 - 12 oz bottles
Price: $19.00
Units: 17
Discontinued:
 
Name: Aniseed Syrup
Quantity: 12 - 550 ml bottles
Price: $10.00
Units: 13
Discontinued:
 

Customers - RadListView bound to XML datasource
CustomerID: 0
CompanyName: Alfreds Futterkiste
ContactName: Maria Anders
 
CustomerID: 1
CompanyName: Antonio Moreno Taqueria
ContactName: Ana Trujillo
 
CustomerID: 2
CompanyName: Around the Horn
ContactName: Antonio Moreno
 
12
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates Manual Datasource operations with the RadListView Control.
In this particular example, the first control is bound to an SQL datasource. The actual data changes are made to an inmemory copy of the original data and are discarded when one revisits the page. The logic used, however is applicable in any scenario, and with any database.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.ListViewExamplesVBNet.DataEditing.ManualEditing.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container" id="demo-container">
        <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="All" EnableRoundedCorners="false" DecorationZoneID="demo-container" />
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxPanel runat="server" ID="AjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
            <asp:Label runat="server" ID="StatusLabel" Style="display: none;" EnableViewState="false"></asp:Label>
            <telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight" ItemPlaceholderID="ProductItemContainer"
                DataKeyNames="ProductID" AllowPaging="True" OnItemCommand="RadListView1_ItemCommand"
                OnNeedDataSource="RadListView1_NeedDataSource">
                <LayoutTemplate>
                    <fieldset>
                        <legend>Products - RadListView bound to SQL datasource</legend>
                        <table class="layoutTable">
                            <tr>
                                <td class="button">
                                    <telerik:RadButton RenderMode="Lightweight" ID="Button1" runat="server" CommandName="InitInsert" Visible="<%# Not Container.IsItemInserted %>"
                                        Text="Add new product">
                                    </telerik:RadButton>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Panel ID="ProductItemContainer" runat="server">
                                    </asp:Panel>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
                                        PageSize="3">
                                        <Fields>
                                            <telerik:RadDataPagerButtonField FieldType="FirstPrev"></telerik:RadDataPagerButtonField>
                                            <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
                                            <telerik:RadDataPagerButtonField FieldType="NextLast"></telerik:RadDataPagerButtonField>
                                        </Fields>
                                    </telerik:RadDataPager>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </LayoutTemplate>
                <ItemTemplate>
                    <fieldset class="itemFieldset">
                        <table class="itemTable">
                            <tr>
                                <td class="cellLabel">Name:
                                </td>
                                <td class="cellInfo">
                                    <%# Eval("ProductName") %>
                                </td>
                            </tr>
                            <tr>
                                <td>Quantity:
                                </td>
                                <td class="cellInfo">
                                    <%# Eval("QuantityPerUnit") %>
                                </td>
                            </tr>
                            <tr>
                                <td>Price:
                                </td>
                                <td class="cellInfo">
                                    <%# DataBinder.Eval(Container.DataItem, "UnitPrice", "{0:C}") %>
                                </td>
                            </tr>
                            <tr>
                                <td>Units:
                                </td>
                                <td class="cellInfo">
                                    <%# Eval("UnitsInStock") %>
                                </td>
                            </tr>
                            <tr>
                                <td>Discontinued:
                                </td>
                                <td class="cellInfo">
                                    <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Eval("Discontinued") %>'
                                        Enabled="false"></asp:CheckBox>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <asp:ImageButton ID="Button1" runat="server" CommandName="Edit" ImageUrl="~/ListView/Examples/DefiningStructure/DeclarativeDefinition/images/Edit.gif"></asp:ImageButton>&nbsp;
                                    <asp:ImageButton ID="Button2" runat="server" CommandName="Delete" CommandArgument='<%#Eval("ProductID") %>'
                                        ImageUrl="~/ListView/Examples/DefiningStructure/DeclarativeDefinition/images/Delete.gif"></asp:ImageButton>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </ItemTemplate>
                <EditItemTemplate>
                    <fieldset class="itemFieldset">
                        <table class="itemTable">
                            <tr>
                                <td class="cellLabel">Name:
                                </td>
                                <td class="cellInfo">
                                    <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox1" runat="server" Text='<%# Bind("ProductName") %>' Width="100px"></telerik:RadTextBox>
                                    <asp:RequiredFieldValidator ForeColor="Red" runat="server" ID="RequiredField1" ControlToValidate="TextBox1"
                                        ErrorMessage="*"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>Quantity:
                                </td>
                                <td class="cellInfo">
                                    <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox2" runat="server" Text='<%# Bind("QuantityPerUnit") %>' Width="100px"></telerik:RadTextBox>
                                    <asp:RequiredFieldValidator ForeColor="Red" runat="server" ID="RequiredFieldValidator2" ControlToValidate="TextBox2"
                                        ErrorMessage="*"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>Price:
                                </td>
                                <td class="cellInfo">
                                    <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox3" runat="server" Text='<%# Bind("UnitPrice") %>' Width="65px"></telerik:RadTextBox>
                                    <asp:RequiredFieldValidator ForeColor="Red" runat="server" ID="RequiredFieldValidator3" ControlToValidate="TextBox3"
                                        ErrorMessage="*"></asp:RequiredFieldValidator>
                                    <asp:RangeValidator ID="RangeValidator1" runat="server" Type="Double" MinimumValue="0" MaximumValue="1000" ControlToValidate="TextBox3"
                                        ErrorMessage="Invalid" ForeColor="Red"></asp:RangeValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>Units:
                                </td>
                                <td class="cellInfo">
                                    <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox4" runat="server" Text='<%# Bind("UnitsInStock") %>' Width="65px"></telerik:RadTextBox>
                                    <asp:RequiredFieldValidator ForeColor="Red" runat="server" ID="RequiredFieldValidator6" ControlToValidate="TextBox4"
                                        ErrorMessage="*"></asp:RequiredFieldValidator>
                                    <asp:CustomValidator runat="server" ID="CustomValidator1" ControlToValidate="TextBox4"
                                        OnServerValidate="CustomValidator1_ServerValidate" ForeColor="Red" ErrorMessage="Invalid"></asp:CustomValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>Discontinued:
                                </td>
                                <td class="cellInfo">
                                    <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Bind("Discontinued") %>'></asp:CheckBox>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <asp:ImageButton ID="Button1" runat="server" CommandName="Update" ImageUrl="~/ListView/Examples/DefiningStructure/DeclarativeDefinition/images/Update.gif"></asp:ImageButton>
                                    <asp:ImageButton ID="Button2" runat="server" CommandName="Cancel" CausesValidation="false"
                                        ImageUrl="~/ListView/Examples/DefiningStructure/DeclarativeDefinition/images/Cancel.gif"></asp:ImageButton>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </EditItemTemplate>
                <InsertItemTemplate>
                    <fieldset class="itemFieldset">
                        <table class="itemTable">
                            <tr>
                                <td class="cellLabel">Name:
                                </td>
                                <td class="cellInfo">
                                    <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox1" runat="server" Text='<%# Bind("ProductName") %>' Width="100px"></telerik:RadTextBox>
                                    <asp:RequiredFieldValidator ForeColor="Red" runat="server" ID="RequiredFieldValidator1" ControlToValidate="TextBox1"
                                        ErrorMessage="*"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>Quantity:
                                </td>
                                <td class="cellInfo">
                                    <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox2" runat="server" Text='<%# Bind("QuantityPerUnit") %>' Width="100px"></telerik:RadTextBox>
                                    <asp:RequiredFieldValidator ForeColor="Red" runat="server" ID="RequiredFieldValidator2" ControlToValidate="TextBox2"
                                        ErrorMessage="*"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>Price:
                                </td>
                                <td class="cellInfo">
                                    <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox3" runat="server" Text='<%# Bind("UnitPrice") %>' Width="65px"></telerik:RadTextBox>
                                    <asp:RequiredFieldValidator ForeColor="Red" runat="server" ID="RequiredFieldValidator3" ControlToValidate="TextBox3"
                                        ErrorMessage="*"></asp:RequiredFieldValidator>
                                    <asp:RangeValidator ID="RangeValidator1" runat="server" Type="Double" MinimumValue="0" MaximumValue="1000" ControlToValidate="TextBox3"
                                        ErrorMessage="Invalid" ForeColor="Red"></asp:RangeValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>Units:
                                </td>
                                <td class="cellInfo">
                                    <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox4" runat="server" Text='<%# Bind("UnitsInStock") %>' Width="65px"></telerik:RadTextBox>
                                    <asp:RequiredFieldValidator ForeColor="Red" runat="server" ID="RequiredFieldValidator6" ControlToValidate="TextBox4"
                                        ErrorMessage="*"></asp:RequiredFieldValidator>
                                    <asp:CustomValidator runat="server" ID="CustomValidator1" ControlToValidate="TextBox4"
                                        OnServerValidate="CustomValidator1_ServerValidate" ForeColor="Red" ErrorMessage="Invalid"></asp:CustomValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>Discontinued:
                                </td>
                                <td class="cellInfo">
                                    <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Bind("Discontinued") %>'></asp:CheckBox>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <asp:ImageButton ID="Button1" runat="server" CommandName="PerformInsert" ImageUrl="~/ListView/Examples/DefiningStructure/DeclarativeDefinition/images/Update.gif"></asp:ImageButton>
                                    <asp:ImageButton ID="Button2" runat="server" CommandName="Cancel" CausesValidation="false"
                                        ImageUrl="~/ListView/Examples/DefiningStructure/DeclarativeDefinition/images/Cancel.gif"></asp:ImageButton>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </InsertItemTemplate>
            </telerik:RadListView>
            <br />
            <telerik:RadListView ID="RadListView2" runat="server" RenderMode="Lightweight" ItemPlaceholderID="ProductItemContainer"
                DataKeyNames="CustomerID" AllowPaging="True" OnItemCommand="RadListView2_ItemCommand"
                DataSourceID="XmlDataSource1">
                <LayoutTemplate>
                    <fieldset>
                        <legend>Customers - RadListView bound to XML datasource</legend>
                        <table class="layoutTable">
                            <tr>
                                <td class="button">
                                    <telerik:RadButton RenderMode="Lightweight" ID="Button1" runat="server" CommandName="InitInsert" Visible="<%# Not Container.IsItemInserted %>"
                                        Text="Add new customer">
                                    </telerik:RadButton>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Panel ID="ProductItemContainer" runat="server">
                                    </asp:Panel>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PagedControlID="RadListView2"
                                        PageSize="3">
                                        <Fields>
                                            <telerik:RadDataPagerButtonField FieldType="FirstPrev"></telerik:RadDataPagerButtonField>
                                            <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
                                            <telerik:RadDataPagerButtonField FieldType="NextLast"></telerik:RadDataPagerButtonField>
                                        </Fields>
                                    </telerik:RadDataPager>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </LayoutTemplate>
                <ItemTemplate>
                    <fieldset class="itemFieldset">
                        <table class="itemTable">
                            <tr>
                                <td class="cellLabel">CustomerID:
                                </td>
                                <td class="cellInfo">
                                    <%# Eval("CustomerID") %>
                                </td>
                            </tr>
                            <tr>
                                <td>CompanyName:
                                </td>
                                <td class="cellInfo">
                                    <%# Eval("CompanyName")%>
                                </td>
                            </tr>
                            <tr>
                                <td>ContactName:
                                </td>
                                <td class="cellInfo">
                                    <%# Eval("ContactName")%>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <asp:ImageButton ID="Button1" runat="server" CommandName="Edit" ImageUrl="~/ListView/Examples/DefiningStructure/DeclarativeDefinition/images/Edit.gif"></asp:ImageButton>&nbsp;
                                    <asp:ImageButton ID="Button2" runat="server" CommandName="Delete" CommandArgument='<%#Eval("CustomerID") %>'
                                        ImageUrl="~/ListView/Examples/DefiningStructure/DeclarativeDefinition/images/Delete.gif"></asp:ImageButton>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </ItemTemplate>
                <EditItemTemplate>
                    <fieldset class="itemFieldset">
                        <table class="itemTable">
                            <tr>
                                <td class="cellLabel">CompanyName:
                                </td>
                                <td class="cellInfo">
                                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("CompanyName") %>' Width="120px"></asp:TextBox>
                                    <asp:RequiredFieldValidator ForeColor="Red" runat="server" ID="RequiredFieldValidator7" ControlToValidate="TextBox1"
                                        ErrorMessage="*"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>ContactName:
                                </td>
                                <td class="cellInfo">
                                    <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("ContactName") %>' Width="120px"></asp:TextBox>
                                    <asp:RequiredFieldValidator ForeColor="Red" runat="server" ID="RequiredFieldValidator8" ControlToValidate="TextBox4"
                                        ErrorMessage="*"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <asp:ImageButton ID="Button1" runat="server" CommandName="Update" text="Update" ImageUrl="~/ListView/Examples/DefiningStructure/DeclarativeDefinition/images/Update.gif"></asp:ImageButton>
                                    <asp:ImageButton ID="Button2" runat="server" CommandName="Cancel" text="Cancel" ImageUrl="~/ListView/Examples/DefiningStructure/DeclarativeDefinition/images/Cancel.gif"></asp:ImageButton>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </EditItemTemplate>
                <InsertItemTemplate>
                    <fieldset class="itemFieldset">
                        <table class="itemTable">
                            <tr>
                                <td class="cellLabel">CompanyName:
                                </td>
                                <td class="cellInfo">
                                    <asp:TextBox ID="TextBox1" runat="server" Width="120px"></asp:TextBox>
                                    <asp:RequiredFieldValidator ForeColor="Red" runat="server" ID="RequiredFieldValidator7" ControlToValidate="TextBox1"
                                        ErrorMessage="*"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>ContactName:
                                </td>
                                <td class="cellInfo">
                                    <asp:TextBox ID="TextBox2" runat="server" Width="120px"></asp:TextBox>
                                    <asp:RequiredFieldValidator ForeColor="Red" runat="server" ID="RequiredFieldValidator8" ControlToValidate="TextBox2"
                                        ErrorMessage="*"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <asp:ImageButton ID="Button1" runat="server" CommandName="PerformInsert" text="Insert"
                                        ImageUrl="~/ListView/Examples/DefiningStructure/DeclarativeDefinition/images/Update.gif"></asp:ImageButton>
                                    <asp:ImageButton ID="Button2" runat="server" CommandName="Cancel" text="Cancel" ImageUrl="~/ListView/Examples/DefiningStructure/DeclarativeDefinition/images/Cancel.gif"></asp:ImageButton>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </InsertItemTemplate>
            </telerik:RadListView>
            <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/Xml/XmlDataSourceExampleTemp.xml"></asp:XmlDataSource>
        </telerik:RadAjaxPanel>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?