<%@ Page Language="C#" %>
<%@ 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>
<style>
.size-custom {
max-width: 531px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function ParameterMap(sender, args) {
if (args.get_type() != "read" && args.get_data()) {
args.set_parameterFormat({ customersJSON: kendo.stringify(args.get_data().models) });
}
}
function Parse(sender, args) {
var response = args.get_response().d;
if (response) {
args.set_parsedData(response.Data);
}
}
function dataFormCreated(sender, args) {
window.dataform1 = sender;
}
function dataFormSetValues(sender, args) {
var dataItem = args;
if (dataItem.CustomerID == undefined) {
setTimeout(function () {
sender.rebind();
}, 20)
}
$telerik.findElement(document, "ViewCustomerIDLabel1").innerHTML = dataItem.CustomerID;
$telerik.findElement(document, "ViewCompanyNameLabel1").innerHTML = dataItem.CompanyName;
$telerik.findElement(document, "ViewContactNameLabel1").innerHTML = dataItem.ContactName;
$telerik.findElement(document, "ViewContactTitleLabel1").innerHTML = dataItem.ContactTitle;
$telerik.findElement(document, "EditCustomerIDLabel1").innerHTML = dataItem.CustomerID;
$telerik.findControl(document, "EditCompanyName").set_value(dataItem.CompanyName);
$telerik.findControl(document, "EditContactName").set_value(dataItem.ContactName);
$telerik.findControl(document, "EditContactTitle").set_value(dataItem.ContactTitle);
}
function dataFormGetValues(sender, args) {
if (args.get_commandName() == "PerformInsert") {
var dataItem = {};
dataItem.CompanyName = $telerik.findControl(document, "InsertCompanyName").get_value();
dataItem.ContactName = $telerik.findControl(document, "InsertContactName").get_value();
dataItem.ContactTitle = $telerik.findControl(document, "InsertContactTitle").get_value();
args.set_dataItem(dataItem);
$telerik.findControl(document, "InsertCompanyName").set_value("");
$telerik.findControl(document, "InsertContactName").set_value("");
$telerik.findControl(document, "InsertContactTitle").set_value("");
}
else if (args.get_commandName() == "Update") {
var dataItem = {};
dataItem.CompanyName = $telerik.findControl(document, "EditCompanyName").get_value();
dataItem.ContactName = $telerik.findControl(document, "EditContactName").get_value();
dataItem.ContactTitle = $telerik.findControl(document, "EditContactTitle").get_value();
args.set_dataItem(dataItem);
}
}
function dataFormCommand(sender, args) {
if (args.get_commandName() == "InitInsert") {
$telerik.$(sender.get_element()).find(".rdfPager").hide();
}
else {
$telerik.$(sender.get_element()).find(".rdfPager").show();
}
}
//]]>
</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-container size-custom">
<h4>RadDataForm bound to RadClientDataSource</h4>
<telerik:RadDataForm RenderMode="Lightweight" runat="server" ID="RadDataForm1"
DataKeyNames="CustomerID" RenderWrapper="true" class="rdfRightAligned rdfNoFieldHint rdfNoFieldHint" ClientDataSourceID="RadClientDataSource1">
<ClientSettings>
<ClientEvents OnCommand="dataFormCommand" OnSetValues="dataFormSetValues" OnGetValues="dataFormGetValues" OnDataFormCreated="dataFormCreated" />
</ClientSettings>
<LayoutTemplate>
<div style="width: 531px" class="RadDataForm RadDataForm_<%# Container.Skin %> rdfRightAligned rdfNoFieldHint rdfNoFieldHint">
<div id="itemPlaceholder" runat="server">
</div>
<div class="rdfPager rdfPagerRight">
<span>
<telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" OnClientClicked="function(){dataform1.page('First');}" CommandArgument="First" CommandName="Page"
CssClass="rdfActionButton rdfPageFirst" Skin="Silk" ToolTip="First" AutoPostBack="false">
<Icon PrimaryIconCssClass="rdfIcon rdfPageFirstIcon" />
</telerik:RadButton>
<telerik:RadButton RenderMode="Lightweight" ID="RadButton2" runat="server" OnClientClicked="function(){dataform1.page('Prev');}" CommandArgument="Prev" CommandName="Page"
CssClass="rdfActionButton rdfPagePrev" Skin="Silk" ToolTip="Previous" AutoPostBack="false">
<Icon PrimaryIconCssClass="rdfIcon rdfPagePrevIcon" />
</telerik:RadButton>
</span><span>
<telerik:RadButton RenderMode="Lightweight" ID="RadButton3" runat="server" OnClientClicked="function(){dataform1.page('Next');}" CommandArgument="Next" CommandName="Page"
CssClass="rdfActionButton rdfPageNext" Skin="Silk" ToolTip="Next" AutoPostBack="false">
<Icon PrimaryIconCssClass="rdfIcon rdfPageNextIcon" />
</telerik:RadButton>
<telerik:RadButton RenderMode="Lightweight" ID="RadButton4" runat="server" OnClientClicked="function(){dataform1.page('Last');}" CommandArgument="Last" CommandName="Page"
CssClass="rdfActionButton rdfPageLast" Skin="Silk" ToolTip="Last" AutoPostBack="false">
<Icon PrimaryIconCssClass="rdfIcon rdfPageLastIcon" />
</telerik:RadButton>
</span>
</div>
</div>
</LayoutTemplate>
<ItemTemplate>
<fieldset id="View" class="rdfFieldset rdfBorders">
<legend class="rdfLegend">Customers</legend>
<div class="rdfRow">
<asp:Label ID="ViewCustomerIDLabel2" runat="server" CssClass="rdfLabel" Text="Customer ID:"></asp:Label>
<asp:Label ID="ViewCustomerIDLabel1" runat="server" CssClass="rdfFieldValue" Text='' />
</div>
<div class="rdfRow">
<asp:Label ID="ViewCompanyNameLabel2" runat="server" CssClass="rdfLabel" Text="Company Name:"></asp:Label>
<asp:Label ID="ViewCompanyNameLabel1" runat="server" CssClass="rdfFieldValue" Text='' />
</div>
<div class="rdfRow">
<asp:Label ID="ViewContactNameLabel2" runat="server" CssClass="rdfLabel" Text="Contact Name:"></asp:Label>
<asp:Label ID="ViewContactNameLabel1" runat="server" CssClass="rdfFieldValue" Text='' />
</div>
<div class="rdfRow">
<asp:Label ID="ViewContactTitleLabel2" runat="server" CssClass="rdfLabel" Text="Contact Title:"></asp:Label>
<asp:Label ID="ViewContactTitleLabel1" runat="server" CssClass="rdfFieldValue" Text='' />
</div>
<div class="rdfCommandButtons">
<hr class="rdfHr" />
<telerik:RadButton RenderMode="Lightweight" ID="InitInsertButton" runat="server" ButtonType="SkinnedButton" OnClientClicked="function(){dataform1.showInsertItem();}" AutoPostBack="false" Text="Insert" ToolTip="Insert" />
<telerik:RadButton RenderMode="Lightweight" ID="EditButton" runat="server" ButtonType="SkinnedButton" OnClientClicked="function(){dataform1.editItem();}" AutoPostBack="false" Text="Edit" ToolTip="Edit" />
<telerik:RadButton RenderMode="Lightweight" ID="DeleteButton" runat="server" ButtonType="SkinnedButton"
OnClientClicking='function(sender, args){if(window.confirm("Are you sure you want to delete this record?"))dataform1.deleteItem();}' AutoPostBack="false"
Text="Delete" ToolTip="Delete" />
</div>
</fieldset>
</ItemTemplate>
<EditItemTemplate>
<fieldset id="Edit" class="rdfFieldset rdfBorders">
<legend class="rdfLegend">Edit Customer</legend>
<div class="rdfRow">
<asp:Label ID="EditCustomerIDLabel2" runat="server" CssClass="rdfLabel" Text="Customer ID:"></asp:Label>
<asp:Label ID="EditCustomerIDLabel1" runat="server" CssClass="rdfFieldValue" />
</div>
<div class="rdfRow">
<asp:Label ID="EditCompanyNameLabel" runat="server" AssociatedControlID="EditCompanyName" CssClass="rdfLabel" Text="Company Name:"></asp:Label>
<telerik:RadTextBox RenderMode="Lightweight" ID="EditCompanyName" runat="server" Text='' WrapperCssClass="rdfInput" />
</div>
<div class="rdfRow">
<asp:Label ID="EditContactNameLabel" runat="server" AssociatedControlID="EditContactName" CssClass="rdfLabel" Text="Contact Name:"></asp:Label>
<telerik:RadTextBox RenderMode="Lightweight" ID="EditContactName" runat="server" WrapperCssClass="rdfInput" />
</div>
<div class="rdfRow">
<asp:Label ID="EditContactTitlelabel" runat="server" AssociatedControlID="EditContactTitle" CssClass="rdfLabel" Text="Contact Title:"></asp:Label>
<telerik:RadTextBox RenderMode="Lightweight" ID="EditContactTitle" runat="server" WrapperCssClass="rdfInput" />
</div>
<div class="rdfCommandButtons">
<hr class="rdfHr" />
<telerik:RadButton RenderMode="Lightweight" ID="UpdateButton" runat="server" ButtonType="SkinnedButton" OnClientClicked="function(){dataform1.updateItem();}" AutoPostBack="false" Text="Update" ToolTip="Update" />
<telerik:RadButton RenderMode="Lightweight" ID="CancelButton" runat="server" ButtonType="SkinnedButton" OnClientClicked="function(){dataform1.cancelUpdate();}" AutoPostBack="false" Text="Cancel" ToolTip="Cancel" />
</div>
</fieldset>
</EditItemTemplate>
<InsertItemTemplate>
<fieldset id="Insert" class="rdfFieldset rdfBorders">
<legend class="rdfLegend">Insert New Customer</legend>
<div class="rdfRow">
<asp:Label ID="CustomerLabel2" runat="server" AssociatedControlID="InsertCompanyName" CssClass="rdfLabel" Text="Company Name:"></asp:Label>
<telerik:RadTextBox RenderMode="Lightweight" ID="InsertCompanyName" runat="server" Text='' WrapperCssClass="rdfInput" />
</div>
<div class="rdfRow">
<asp:Label ID="Label1" runat="server" AssociatedControlID="InsertContactName" CssClass="rdfLabel" Text="Contact Name:"></asp:Label>
<telerik:RadTextBox RenderMode="Lightweight" ID="InsertContactName" runat="server" WrapperCssClass="rdfInput" />
</div>
<div class="rdfRow">
<asp:Label ID="Label2" runat="server" AssociatedControlID="InsertContactTitle" CssClass="rdfLabel" Text="Contact Title:"></asp:Label>
<telerik:RadTextBox RenderMode="Lightweight" ID="InsertContactTitle" runat="server" WrapperCssClass="rdfInput" />
</div>
<div class="rdfCommandButtons">
<hr class="rdfHr" />
<telerik:RadButton RenderMode="Lightweight" ID="PerformInsertButton" runat="server" ButtonType="SkinnedButton" OnClientClicked="function(){dataform1.insertItem();}" AutoPostBack="false" Text="Insert" ToolTip="Insert" />
<telerik:RadButton RenderMode="Lightweight" ID="CancelButton" runat="server" ButtonType="SkinnedButton" OnClientClicked="function(){dataform1.cancelInsert();}" AutoPostBack="false" Text="Cancel" ToolTip="Cancel" />
</div>
</fieldset>
</InsertItemTemplate>
</telerik:RadDataForm>
<telerik:RadClientDataSource ID="RadClientDataSource1" runat="server" AllowBatchOperations="true">
<ClientEvents OnCustomParameter="ParameterMap" OnDataParse="Parse"/>
<DataSource>
<WebServiceDataSourceSettings BaseUrl="EditingWcfService.svc/">
<Select Url="GetCustomers" DataType="JSON" />
<Update Url="UpdateCustomers" DataType="JSON" />
<Insert Url="InsertCustomers" DataType="JSON" />
<Delete Url="DeleteCustomers" DataType="JSON" />
</WebServiceDataSourceSettings>
</DataSource>
<Schema>
<Model ID="CustomerID">
<telerik:ClientDataSourceModelField FieldName="CustomerID" DataType="String" />
<telerik:ClientDataSourceModelField FieldName="CompanyName" DataType="String" />
<telerik:ClientDataSourceModelField FieldName="ContactName" DataType="String" />
<telerik:ClientDataSourceModelField FieldName="ContactTitle" DataType="String" />
</Model>
</Schema>
</telerik:RadClientDataSource>
</div>
</form>
</body>
</html>