New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Manual data editing

Products - RadListView bound to SQL datasource
Name: mean
Quantity:
Price: $123.00
Units: 150
Discontinued:
 
Name: 1211
Quantity:
Price: $12.31
Units: 12
Discontinued:
 
1

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

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" Inherits="Telerik.ListViewExamplesCSharp.DataEditing.ManualEditing.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<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" OnItemUpdating="RadListView1_ItemUpdating"
                OnItemInserting="RadListView1_ItemInserting" OnItemDeleting="RadListView1_ItemDeleting"
                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="<%# !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="80px"></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="80px"></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="80px"></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="80px">
                                    </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" DataSourceID="XmlDataSource1" OnItemUpdating="RadListView2_ItemUpdating"
                OnItemInserting="RadListView2_ItemInserting" OnItemDeleting="RadListView2_ItemDeleting">
                <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="<%# !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>

Support & Learning Resources

Find Assistance