ClientDataSource with ASP.NET WebForms

5 posts, 0 answers
  1. ToltingColtAcres
    ToltingColtAcres avatar
    113 posts
    Member since:
    Nov 2010

    Posted 14 Jun 2020 Link to this post

    Could someone provide an example of how to use ClientDataSource in an ASP.NET WebForms environment?

    e.g. with PageMethods which pass data back to the client for usage in, say, a combobox?

     

    All the examples I see online deal with MVC or Web Service configurations and do not provide adequate documentation on how to use in a legacy webforms environment.

     

     

  2. Attila Antal
    Admin
    Attila Antal avatar
    591 posts

    Posted 17 Jun 2020 Link to this post

    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.
  3. ToltingColtAcres
    ToltingColtAcres avatar
    113 posts
    Member since:
    Nov 2010

    Posted 18 Jun 2020 in reply to Attila Antal Link to this post

    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" %>
     
    <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.

  4. Doncho
    Admin
    Doncho avatar
    96 posts

    Posted 23 Jun 2020 Link to this post

    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:

    1. 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" />
    2. ContentType and RequestType properties should be set in the WebServiceDataSourceSettings
      <Select Url="GetItems" DataType="JSON" ContentType="application/json; charset=utf-8" RequestType="Post" />
    3. 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

    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.
  5. ToltingColtAcres
    ToltingColtAcres avatar
    113 posts
    Member since:
    Nov 2010

    Posted 24 Jun 2020 in reply to Doncho Link to this post

    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" %>
     
    <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;
     }
    }

     

Back to Top