ClientDataSource - Binding to DataSource Controls

Employee IDFirst NameLast NameCityDelete
Page size:
 6 items in 2 pages
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
This demo illustrates how you can bind RadGrid client-side and use EntityDataSource to retrieve the data. All configuration is done in the markup without any custom code.

An EntityDataSource control is used to extract the records from the database. Then a RadClientDataSource control is added and the RadGrid is using it to show the data. In order for the RadClientDataSource to get the data its DataSourceControlSettings-DataSourceID property is set to the ID of the EntityDataSource control.

The demo also shows CRUD operations with batch editing, performed entirely on the server through a callback request from the RadClientDataSource to the EntityDataSource. In this case should setup the Schema-Model settings of the RadClientDataSource by adding the respective model fields and model ID. In the DataSourceControlSettings you should also set AllowAutomaticDeletes, AllowAutomaticInserts and AllowAutomaticUpdates to true to enable these operations.

Note that the EnableServerPaging and EnableServerSorting properties for the ClientDataSource are enabled. This way the operations are performed on the server and only the relevant records are returned.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Title="" Language="VB"  AutoEventWireup="false" %>

<!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>
</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 no-bg">

        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" Skin="Silk"
            ClientDataSourceID="RadClientDataSource1" AllowPaging="true" PageSize="5" AllowSorting="true"
            AllowAutomaticDeletes="true" AllowAutomaticInserts="true" AllowAutomaticUpdates="true">
            <MasterTableView CommandItemDisplay="Top" ClientDataKeyNames="EmployeeID" DataKeyNames="EmployeeID" EditMode="Batch">
                <Columns>
                    <telerik:GridBoundColumn DataField="EmployeeID" HeaderText="Employee ID" ReadOnly="true">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="LastName" HeaderText="Last Name">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="City" HeaderText="City">
                    </telerik:GridBoundColumn>
                    <telerik:GridButtonColumn ConfirmText="Delete this product?" ConfirmDialogType="RadWindow"
                        ConfirmTitle="Delete" HeaderText="Delete" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
                    </telerik:GridButtonColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>


        <telerik:RadClientDataSource ID="RadClientDataSource1" runat="server" EnableServerPaging="true" EnableServerSorting="true" AllowPaging="true">
            <DataSource>
                <DataSourceControlSettings DataSourceID="EntityDataSourceCustomers"
                    DataKeyNames="EmployeeID" DataFields="EmployeeID, FirstName, LastName, City"
                    AllowAutomaticDeletes="true" AllowAutomaticInserts="true" AllowAutomaticUpdates="true" />
            </DataSource>
            <Schema>
                <Model ID="EmployeeID">
                    <telerik:ClientDataSourceModelField DataType="Number" FieldName="EmployeeID" />
                    <telerik:ClientDataSourceModelField DataType="String" FieldName="FirstName" />
                    <telerik:ClientDataSourceModelField DataType="String" FieldName="LastName" />
                    <telerik:ClientDataSourceModelField DataType="String" FieldName="City" />
                </Model>
            </Schema>
        </telerik:RadClientDataSource>

        <asp:EntityDataSource ID="EntityDataSourceCustomers" runat="server" ConnectionString="name=NorthwindReadWriteEntities"
            DefaultContainerName="NorthwindReadWriteEntities" EntitySetName="Employees"
             EnableDelete="True" EnableFlattening="False" EnableInsert="True" EnableUpdate="True">
        </asp:EntityDataSource>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?