Bind RadGrid Client Side to a JSON array

12 posts, 0 answers
  1. Taraman
    Taraman avatar
    17 posts
    Member since:
    Aug 2010

    Posted 28 Jan 2012 Link to this post

    hello,
    I have created a page for searching, it contains a "search criteria Section" which include textboxes and combos for search plus a search button, by clicking the but I am calling a web method and passing the data in search criteria section, it returns the data correctly in JSON format as array

    the question, How can I bind the returned data to the grid (client-side of course)?

    thanks,
    Taraman
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 28 Jan 2012 Link to this post

    Hello,

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_1734880_Default" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
      
                function OnbuttonClient() {
      
                    var GridData;
      
                    jQuery.ajax({
                        type: 'POST',
                        contentType: 'application/json; charset=utf-8',
                        data: '',
                        dataType: 'JSON',
                        url: 'Default.aspx/BindGrid',
                        success: function (result) {
      
                            GridData = result.d;
                            if (GridData.length > 0) {
      
                                var divGridContainer = document.getElementById('divGridContainer');
                                divGridContainer.style.display = "";
                                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                                tableView.set_dataSource(GridData);
                                tableView.dataBind();
                            }
                            else {
                                var divGridContainer = document.getElementById('divGridContainer');
                                divGridContainer.style.display = "none";
                            }
                        },
                        error: function () {
                            alert('Error on binding the data');
                        }
                    });
      
                    return false;
                }
            
            </script>
        </telerik:RadCodeBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" EnablePageMethods="true" runat="server">
            </telerik:RadScriptManager>
            <asp:Button ID="Button1" Text="Bind Grid" runat="server" OnClientClick="return OnbuttonClient();" />
            <div id="divGridContainer" style="display: none;">
                <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false">
                    <MasterTableView HierarchyLoadMode="Client" DataKeyNames="ID,ParentID" ClientDataKeyNames="ID,ParentID">
                        <Columns>
                            <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </div>
        </div>
        </form>
    </body>
    </html>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.Services;
    using System.Runtime.Serialization.Json;
    using System.IO;
    using System.Text;
      
    public partial class _1734880_Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
      
            if (!IsPostBack)
            {
                     // Add Dummy data to generate MatertableView
                dynamic data = new[] {
                    new { ID = "1", Name ="Name11",ParentID = "0"},
                    new { ID = "2", Name ="Name11",ParentID = "0"},
                    new { ID = "3", Name ="Name11",ParentID = "0"},
                    new { ID = "4", Name ="Name11",ParentID = "0"}
                };
                RadGrid1.MasterTableView.DataSource = data;
                RadGrid1.DataBind();
      
      
            }
        }
      
        [WebMethod]
        public static List<Employee> BindGrid()
        {
            List<Employee> list = new List<Employee>(); ;
      
            Employee obj = new Employee();
            obj.ID = "1";
            obj.ParentID = "0";
            obj.Name = "Name1";
            list.Add(obj);
      
            obj = new Employee();
            obj.ID = "2";
            obj.ParentID = "0";
            obj.Name = "Name2";
            list.Add(obj);
      
            obj = new Employee();
            obj.ID = "4";
            obj.ParentID = "1";
            obj.Name = "Name2";
            list.Add(obj);
      
            obj = new Employee();
            obj.ID = "5";
            obj.ParentID = "1";
            obj.Name = "Name2";
            list.Add(obj);
              
            obj = new Employee();
            obj.ID = "6";
            obj.ParentID = "2";
            obj.Name = "Name2";
            list.Add(obj);
      
            
      
            obj = new Employee();
            obj.ID = "11";
            obj.ParentID = "2";
            obj.Name = "Name2";
            list.Add(obj);
      
            obj = new Employee();
            obj.ID = "12";
            obj.ParentID = "2";
            obj.Name = "Name2";
            list.Add(obj);
      
            obj = new Employee();
            obj.ID = "7";
            obj.ParentID = "2";
            obj.Name = "Name2";
            list.Add(obj);
      
            obj = new Employee();
            obj.ID = "13";
            obj.ParentID = "2";
            obj.Name = "Name2";
            list.Add(obj);
      
            obj = new Employee();
            obj.ID = "9";
            obj.ParentID = "0";
            obj.Name = "Name2";
            list.Add(obj);
      
            obj = new Employee();
            obj.ID = "3";
            obj.ParentID = "1";
            obj.Name = "Name2";
            list.Add(obj);
      
      
            obj = new Employee();
            obj.ID = "8";
            obj.ParentID = "0";
            obj.Name = "Name2";
            list.Add(obj);
      
            return list;
        }
      
      
    }
      
    public class Employee
    {
        public string ID { get; set; }
        public string Name { get; set; }
        public string ParentID { get; set; }
    }


    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. zenit1
    zenit1 avatar
    12 posts
    Member since:
    Jun 2008

    Posted 07 Feb 2012 Link to this post

    Hi , Jayesh  

    Thanks for interesting example. 

    I have a question about: if in this case paging allowed or possible to implementation?

    Best regards

    Serge Bruno
  5. Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 10 Feb 2012 Link to this post

    Hello Serge,

    You can see how a grid bound using Page Methods can be paged, sorted and filtered in this online demo:
    Grid / Programmatic Binding

    Greetings,
    Tsvetina
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Nikil
    Nikil avatar
    2 posts
    Member since:
    May 2013

    Posted 22 May 2013 Link to this post

    Hello Tsvetina I went through your example. But what I need to achieve is a way to use Jquery Ajax where I can manually mention the page URL Of where my page method exist. Similar to the code example provided by jayesh. Where he states this following code jQuery.ajax({ type: 'POST', contentType: 'application/json; charset=utf-8', data: '', dataType: 'JSON', url: 'Default.aspx/BindGrid', success: function (result) { How do I achieve sorting , paging using this method ?
  7. Nikil
    Nikil avatar
    2 posts
    Member since:
    May 2013

    Posted 23 May 2013 Link to this post

    Or is there a generic way to have all Telerik contorls ajax traffic route to a specific page method of your choice ?
    I need to figure this out, since Im building a Single Page Application, where the html content of multiple pages are downloaded on to say a Default.aspx.
    Hence any interaction with my Telerik controls need to hit the appropriate Code behind page like Form1.aspx , from the base page Default.aspx.

    Generally I can do this with jQuery's Ajax by specifying manually in the URL part the page path of the web method as shown below.

     

     $.ajax({
            type: "POST",
            url: MyWebMethodPagePath + "/" + webMethodName,
            contentType: "application/json; charset=utf-8",
            data: paramList,
            dataType: "json",
            success: successFn,
            error: errorFn
        });

    Let me know if there's a generic technique I can use for my Telerik Controls aswell.
     If not atleast specific to Telerik Grids where I can Sort and provide paging.

  8. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 27 May 2013 Link to this post

    Hello Nikil,

    In order to achieve your scenario you could subscribe to RadGrid OnCommand client-side event and route your request from there. Note that there is no build in mechanism in RadGrid or any other Telerik control for routing ajax traffic.
    <ClientSettings>
        <ClientEvents OnCommand="GridCommand" />
    </ClientSettings>
    function GridCommand(sender, args)
    {
        if (args.get_commandName() === "Sort")
        {
            // your routing logic here
        }
    }


    Regards,
    Antonio Stoilkov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Subodh
    Subodh avatar
    9 posts
    Member since:
    Jun 2013

    Posted 07 Jun 2013 Link to this post

    Hi,

                  I have radgrid, and i want to bind that grid using JSON, my JSON returns dataset, how can i bind that dataset to radgrid??

    Regards,
    Subodh....
  10. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 12 Jun 2013 Link to this post

    Hi Subodh,

    You could achieve the desired functionality by following the approach shown in the demo below.

    The idea is to use the updateGrid function which accepts an JavaScript Array which will bind to the RadGrid.
    function updateGrid(result)
        {
            var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
            tableView.set_dataSource(result);
            tableView.dataBind();
        }

    Regards,
    Antonio Stoilkov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  11. J2K
    J2K avatar
    33 posts
    Member since:
    Sep 2005

    Posted 25 Dec 2014 in reply to Jayesh Goyani Link to this post

    Great example, thanks Jayesh.  
  12. Calixto
    Calixto avatar
    1 posts
    Member since:
    Feb 2015

    Posted 27 Feb 2015 in reply to Jayesh Goyani Link to this post

    how if inside BindGrid() method will have dll or having sqlconnection script.

    Thanks !!
  13. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 28 Feb 2015 in reply to Calixto Link to this post

    Hello,

    Could you please provide some more detail?

    Thanks,
    Jayesh Goyani
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017