This is a migrated thread and some comments may be shown as answers.

ClientDataSource with ASP.NET WebForms

4 Answers 237 Views

ClientDataSource

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

answered on 17 Jun 2020, 01:29 PM

Hi Michael,

The way RadClientDataSource interacts with a WebService is very similar to how it would with PageMethods. You will need to prepare the environment for PageMethods. See Pagemethods in asp.net and Calling ASP.Net AJAX PageMethods using ScriptManager Example articles for example.

Once you have the methods you can call them similar to the example from ClientDataSource - Integration with RadGrid.

Kind regards,
Attila Antal
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

answered on 18 Jun 2020, 02:47 PM

I use PageMethods and jquery ajax calls quite regularly in applications, but I cannot determine how to properly configure the client data source to accomplish the same thing.

For example:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="True">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" />

<div>

<telerik:RadGrid runat="server" ID="RadGrid1" ClientDataSourceID="RadClientDataSource1">

<MasterTableView>

<PagerStyle Mode="NextPrevNumericAndAdvanced"></PagerStyle>

<CommandItemSettings />

<Columns>

<telerik:GridBoundColumn DataField="ID" UniqueName="ID" />

<telerik:GridBoundColumn DataField="Name" UniqueName="Name" />

<telerik:GridBoundColumn DataField="Description" UniqueName="Description" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

<telerik:RadClientDataSource ID="RadClientDataSource1" runat="server">

<DataSource>

<WebServiceDataSourceSettings BaseUrl="Default.aspx/">

<Select Url="GetItems" DataType="JSON" />

</WebServiceDataSourceSettings>

</DataSource>

<Schema>

<Model ID="id">

<telerik:ClientDataSourceModelField FieldName="id" DataType="Number" />

<telerik:ClientDataSourceModelField FieldName="name" DataType="String" />

<telerik:ClientDataSourceModelField FieldName="description" DataType="String" />

</Model>

</Schema>

</telerik:RadClientDataSource>

</div>

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Web.Services;

using System.Web.Script.Services;

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

public class Item

{

public Int32 id { get; set; }

public String name { get; set; }

public String description { get; set; }

}

[WebMethod]

[ScriptMethod]

public static List<Item> GetItems()

{

List<Item> results = new List<Item>();

for (Int32 idx = 0; idx < 100; idx++)

{

results.Add(new Item() {id = idx, name = "Name " + idx, description = "Description " + idx});

}

return results;

}

does not work. The grid is rendered but the server-side GetItems method is never executed.

To complicate matters, I am not sure how you actually define the clientdatasource, since the results from a pagemethod are wrapped in a d element

I see in the comboBox example this seems to be addressed but there is no backup to support the example of what its calling.

If I try to add a "<Schema DataName="d.results">" definition in my code, I get a javascript error when I execute.

answered on 23 Jun 2020, 12:16 PM

Hi Michael,

Thank you for the code provided!

There are a few things that I have noticed as possible causes for the described behavior. I would suggest you try to apply the following changes to the code snippet from your message:

DataField of the GridBoundColumn should match the FieldName of a DataSource field. The names are case sensitive strings:

<telerik:GridBoundColumn DataField="id" UniqueName="ID" />
<telerik:GridBoundColumn DataField="name" UniqueName="Name" />
<telerik:GridBoundColumn DataField="description" UniqueName="Description" />

ContentType and RequestType properties should be set in the WebServiceDataSourceSettings

<Select Url="GetItems" DataType="JSON" ContentType="application/json; charset=utf-8" RequestType="Post" />

Set the Schema DataName to "d":
```
<Schema DataName="d">
```

Please try my suggestion and let me know how it goes!

Kind regards,
Doncho
Progress Telerik

answered on 24 Jun 2020, 07:16 AM

Thanks Doncho... #2 seemed to be the key to get the server-side function called. #3 got the data back correctly, and #1 got the grid to display.

For people who may be in a similar situation, here is a working example, which also uses a custom parameter to populate the grid.

I haven't played around with passing data for CRUD operations, but I imagine the process would be similar

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock_Default">

<script language="javascript" type="text/javascript">

function parameterMap(sender, args) {

if (args.get_type() == "read" && args.get_data()) {

var start = $find("<%= RadNumericTextBox1.ClientID %>").get_value();

var jsonData = { 'start': start };

args.set_parameterFormat(kendo.stringify(jsonData));

}

function RadNumericTextBox1_ValueChanged(sender, eventArgs) {

$find("<%= RadGrid1.ClientID %>").get_masterTableView().rebind();

}

</script>

</telerik:RadCodeBlock>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadNumericTextBox runat="server" ID="RadNumericTextBox1" Value="0" DisplayText="0">

<ClientEvents OnValueChanged="RadNumericTextBox1_ValueChanged"></ClientEvents>

</telerik:RadNumericTextBox>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="True">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" />

<div>

<telerik:RadGrid runat="server" ID="RadGrid1" ClientDataSourceID="RadClientDataSource1">

<MasterTableView AutoGenerateColumns="False">

<PagerStyle Mode="NextPrevNumericAndAdvanced"></PagerStyle>

<CommandItemSettings />

<Columns>

<telerik:GridBoundColumn DataField="id" UniqueName="ID" />

<telerik:GridBoundColumn DataField="name" UniqueName="Name" />

<telerik:GridBoundColumn DataField="description" UniqueName="Description" />

</Columns>

</MasterTableView>

<ClientSettings>

<ClientEvents></ClientEvents>

</ClientSettings>

</telerik:RadGrid>

<telerik:RadClientDataSource ID="RadClientDataSource1" runat="server">

<ClientEvents OnCustomParameter="parameterMap" />

<DataSource>

<WebServiceDataSourceSettings BaseUrl="Default.aspx/">

<Select Url="GetItems" DataType="JSON" ContentType="application/json; charset=utf-8" RequestType="Post"></Select>

</WebServiceDataSourceSettings>

</DataSource>

<Schema DataName="d">

<Model ID="id">

<telerik:ClientDataSourceModelField FieldName="id" DataType="Number" />

<telerik:ClientDataSourceModelField FieldName="name" DataType="String" />

<telerik:ClientDataSourceModelField FieldName="description" DataType="String" />

</Model>

</Schema>

</telerik:RadClientDataSource>

</div>

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Web.Services;

using System.Web.Script.Services;

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

public class Item

{

public Int32 id { get; set; }

public String name { get; set; }

public String description { get; set; }

}

[WebMethod]

[ScriptMethod]

public static List<Item> GetItems(Int32 start)

{

List<Item> results = new List<Item>();

for (Int32 idx = start; idx < start+100; idx++)

{

results.Add(new Item() {id = idx, name = "Name " + idx, description = "Description " + idx});

}

return results;

}