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

Radgrid Client side Binding On Event

1 Answer 237 Views

Grid

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

1 Answer, 1 is accepted

answered on 16 Nov 2011, 06:48 AM

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

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

<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 gridRowBound(sender, args) {

args.get_item().findElement("lblName").innerHTML = args.get_item()._dataItem.Name + " From Client";

}

function OnbuttonClient() {

jQuery.ajax({

type: 'POST',

contentType: 'application/json; charset=utf-8',

data: '',

dataType: 'JSON',

url: 'Default.aspx/BindGrid',

success: function (result) {

divGridContainer

var divGridContainer = document.getElementById('divGridContainer');

divGridContainer.style.display = "";

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

tableView.set_dataSource(result.d);

tableView.dataBind();

},

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>

<Columns>

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

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Name">

<ItemTemplate>

<asp:Label ID="lblName" runat="server"></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowDataBound="gridRowBound" />

</ClientSettings>

</telerik:RadGrid>

</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;

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

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

dynamic data = new[] {

new { ID = "1", Name ="Name11"},

new { ID = "1", Name ="Name11"}

};

RadGrid1.DataSource = data;

RadGrid1.DataBind();

}

[WebMethod]

public static List<Employee> BindGrid()

{

List<Employee> list = new List<Employee>(); ;

Employee obj = new Employee();

obj.ID = "1";

obj.Name = "Name1";

list.Add(obj);

obj = new Employee();

obj.ID = "2";

obj.Name = "Name2";

list.Add(obj);

return list;

}

public class Employee

{

public string ID { get; set; }

public string Name { get; set; }

}

Let me know if any concern.
Note : please add Jquery in your project and give reference to this page.

Thanks,
Jayesh Goyani