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

Data Editing

Id Rating Title Year Delete
  • Update
  • Insert
In order to update item you need to select it from the grid












The demo shows how to work with flexible CRUD Client-side operations provided by the ClientDataSource control. The editing is achieved by using client-side methods such as: add(), update() and remove().

You can easily update a row data by selecting it, changing the values of the Rating, Title and Year fields and pressing the Update button inside the Update Configuration panel. In order to insert a new record, switch to the Insert Configuration panel, fill the ID, Rating, Title and Year textboxes and press Insert. The change will be applied and a new row will appear at the bottom part of the table.

In you are willing to learn more about the data editing client-side methods of RadClientDataSource, see the following articles:
add()
update()
remove()
  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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 rel="Stylesheet" type="text/css" href="styles.css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                <script type="text/javascript">
                    var numeric1ID = "<%=RadNumericTextBox1.ClientID %>";
                    var textBox1ID = "<%=RadTextBox1.ClientID %>";
                    var picker1ID = "<%=RadDatePicker1.ClientID %>";

                    var numeric2ID = "<%=RadNumericTextBox2.ClientID %>";
                    var textBox2ID = "<%=RadTextBox2.ClientID %>";
                    var picker2ID = "<%=RadDatePicker2.ClientID %>";

                    var datasourceID = "<%=RadClientDataSource1.ClientID %>";

                    function pageLoad() {
                        $find(datasourceID).set_data(movies);
                    }
                </script>
            </telerik:RadCodeBlock>
            <div class="tableWrapper">
                <table id="movies" class="metrotable">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Rating</th>
                            <th>Title</th>
                            <th>Year</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="5"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <telerik:RadClientDataSource ID="RadClientDataSource1" runat="server">
                <ClientEvents OnChange="OnChange" />
                <Schema>
                    <Model ID="id">
                    </Model>
                </Schema>
            </telerik:RadClientDataSource>

            <div class="configPanel">
                <telerik:RadTabStrip RenderMode="Lightweight" runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" SelectedIndex="0">
                    <Tabs>
                        <telerik:RadTab Text="Update" Width="140px"></telerik:RadTab>
                        <telerik:RadTab Text="Insert" Width="140px"></telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" CssClass="innerMultiPage">
                    <telerik:RadPageView runat="server" ID="PageView1">
                        In order to update item you need to select it from the grid
                <br />
                        <br />
                        <telerik:RadLabel RenderMode="Lightweight" runat="server" ID="RatingLabel1" AssociatedControlID="RadNumericTextBox1" Text="Rating:"></telerik:RadLabel>
                        <br />
                        <telerik:RadNumericTextBox RenderMode="Lightweight" Skin="Silk" Enabled="false" runat="server" ID="RadNumericTextBox1" MaxValue="10" NumberFormat-DecimalDigits="1"></telerik:RadNumericTextBox>
                        <br />
                        <telerik:RadLabel RenderMode="Lightweight" runat="server" ID="TitleLabel1" AssociatedControlID="RadTextBox1" Text="Title:"></telerik:RadLabel>
                        <br />
                        <telerik:RadTextBox RenderMode="Lightweight" Skin="Silk" runat="server" Enabled="false" ID="RadTextBox1" MaxLength="100"></telerik:RadTextBox>
                        <br />
                        <telerik:RadLabel RenderMode="Lightweight" runat="server" ID="YearLabel1" AssociatedControlID="RadDatePicker1" Text="Year:"></telerik:RadLabel>
                        <br />
                        <telerik:RadDatePicker RenderMode="Lightweight" Skin="Silk" runat="server" Enabled="false" MinDate="1/1/1900" ID="RadDatePicker1" DateInput-LabelWidth="30%">
                        </telerik:RadDatePicker>
                        <input type="button" value="Update" onclick="updateItem(); return false;" class="update_btn" />
                    </telerik:RadPageView>
                    <telerik:RadPageView runat="server" ID="PageView2">
                        <br />
                        <telerik:RadLabel RenderMode="Lightweight" runat="server" ID="RatingLabel2" AssociatedControlID="RadNumericTextBox2" Text="Rating:"></telerik:RadLabel>
                        <br />
                        <telerik:RadNumericTextBox RenderMode="Lightweight" Skin="Silk" runat="server" MaxLength="100" ID="RadNumericTextBox2" MaxValue="10" NumberFormat-DecimalDigits="1"></telerik:RadNumericTextBox>
                        <br />
                        <telerik:RadLabel RenderMode="Lightweight" runat="server" ID="TitleLabel2" AssociatedControlID="RadTextBox2" Text="Title:"></telerik:RadLabel>
                        <br />
                        <telerik:RadTextBox RenderMode="Lightweight" Skin="Silk" runat="server" ID="RadTextBox2"></telerik:RadTextBox>
                        <br />
                        <telerik:RadLabel RenderMode="Lightweight" runat="server" ID="YearLabel2" AssociatedControlID="RadDatePicker2" Text="Year:"></telerik:RadLabel>
                        <br />
                        <telerik:RadDatePicker RenderMode="Lightweight" Skin="Silk" runat="server" MinDate="1/1/1900" ID="RadDatePicker2" DateInput-LabelWidth="30%">
                        </telerik:RadDatePicker>
                        <input type="button" value="Insert" onclick="insertItem(); return false;" class="insert_btn" />
                    </telerik:RadPageView>
                </telerik:RadMultiPage>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance