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.

  • 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 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" 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="120px"></telerik:RadTextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Quantity:
                                </td>
                                <td class="cellInfo">
                                    <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox2" runat="server" Text='<%# Bind("QuantityPerUnit") %>' Width="120px"></telerik:RadTextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Price:
                                </td>
                                <td class="cellInfo">
                                    <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox3" runat="server" Text='<%# Bind("UnitPrice") %>' Width="65px"></telerik:RadTextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Units:
                                </td>
                                <td class="cellInfo">
                                    <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox4" runat="server" Text='<%# Bind("UnitsInStock") %>' Width="65px"></telerik:RadTextBox>
                                </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" 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">
                                    Name:
                                </td>
                                <td class="cellInfo">
                                    <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox1" runat="server" Text='<%# Bind("ProductName") %>' Width="120px"></telerik:RadTextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Quantity:
                                </td>
                                <td class="cellInfo">
                                    <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox2" runat="server" Text='<%# Bind("QuantityPerUnit") %>' Width="120px"></telerik:RadTextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Price:
                                </td>
                                <td class="cellInfo">
                                    <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox3" runat="server" Text='<%# Bind("UnitPrice") %>' Width="65px"></telerik:RadTextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Units:
                                </td>
                                <td class="cellInfo">
                                    <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox4" runat="server" Text='<%# Bind("UnitsInStock") %>' Width="65px"></telerik:RadTextBox>
                                </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" 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>
            <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>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    ContactName:
                                </td>
                                <td class="cellInfo">
                                    <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("ContactName") %>' Width="120px"></asp:TextBox>
                                </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>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    ContactName:
                                </td>
                                <td class="cellInfo">
                                    <asp:TextBox ID="TextBox2" runat="server" Width="120px"></asp:TextBox>
                                </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?