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

Client-Side Databinding - ItemDatabound Firing Before Grid is Bound

4 Answers 548 Views

Grid

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

William asked on 29 Jul 2010, 10:31 PM

I am enhancing a search feature on our site and am using jQuery in conjunction with the client-side api for the RadGrid. My problem is that itemdatabound, as well as any methods that are invoked from gridtemplatecolumns in the grid are all fired BEFORE the grid is databound, which obviously causes problems. I could almost live with it if when i finally invoke databind() the methods are called again, but they are not.

I put together a quick example of what I am talking about... please make sure if you try and recreate this problem that you reference the newest version of jquery in the head of the doc.
ASPX Page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxExample.aspx.cs" Inherits="WolperWeb.company.AjaxExample" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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 type="text/javascript" language="javascript" src="../scripts/jquery-1.4.1.js"></script>

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

<script type="text/javascript">

$(function () {

////////////////////////////////////////////////////////////////////////////////////////////////////////

/// TEST CODE /////////////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////////////////////////////////

/// REQURIED PARAMETERS : int WebID, int AccountID, string SearchTerm, int CurrentPage, int PageSize

/////////////////////////////////////////////////////////////////////////////////////////////////////

$.ajax({

type: "POST",

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

dataType: "json",

url: "ajaxexample.aspx/GetData",

data: "{ }",

success: function (result) {

var publications = (typeof result.d) == 'string' ? eval('(' + result.d + ')') : result.d;

for (var key in publications) {

if (key == "book") {

tableView.set_dataSource(publications[key]);

tableView.dataBind();

}

},

error: function (xhr, ajaxOptions) {

alert("error: " + xhr.responseText);

}

});

var tableView;

function pageLoad(sender, args) {

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

}

function rgPublicationResults_Command(sender, args) { }

</script>

</telerik:RadCodeBlock>

</head>

<body>

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

<telerik:RadGrid ID="rgPublicationResults" runat="server" Skin="Simple" OnItemDataBound="rgPublicationResults_ItemDataBound">

<ClientSettings AllowColumnsReorder="true">

<ClientEvents OnCommand="rgPublicationResults_Command" />

</ClientSettings>

<MasterTableView GridLines="None" AutoGenerateColumns="false">

<Columns>

<telerik:GridBoundColumn DataField="BookName" HeaderText="Title" UniqueName="BookName" />

<telerik:GridBoundColumn DataField="Term" HeaderText="Term" UniqueName="Author" />

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

<telerik:GridTemplateColumn HeaderText="Price" UniqueName="Price">

<ItemTemplate>

<%# GetPrice(Eval("Price")) %>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="TestField" UniqueName="TestField">

<ItemTemplate>

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

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<AlternatingItemStyle VerticalAlign="Top" />

<ItemStyle VerticalAlign="Top" />

</MasterTableView>

</telerik:RadGrid>

</form>

</body>

</html>

Codebehind:

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 Telerik.Web.UI;

namespace WolperWeb.company

{

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

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected string GetPrice(object Price)

{

try

{

return String.Format("Order Total: {0:C}", Price);

}

catch { return "failed"; }

}

protected void rgPublicationResults_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item.ItemType == GridItemType.AlternatingItem || e.Item.ItemType == GridItemType.Item)

{

Label lblTest = (Label)e.Item.FindControl("lblTest");

lblTest.Text = "test";

}

[WebMethod]

public static Dictionary<string, object> GetData()

{

Dictionary<string, object> result = new Dictionary<string, object>();

List<BookData> lBooks = new List<BookData>();

BookData oBook = new BookData();

oBook.Author = "John Smith";

oBook.BookID = "bk101";

oBook.BookName = "Book Number 1";

oBook.Price = 10;

lBooks.Add(oBook);

oBook = new BookData();

oBook.Author = "Bill Smith";

oBook.BookID = "bk102";

oBook.BookName = "Book Number 2";

oBook.Price = 15;

lBooks.Add(oBook);

oBook = new BookData();

oBook.Author = "Rob Smith";

oBook.BookID = "bk103";

oBook.BookName = "Book Number 3";

oBook.Price = 20;

lBooks.Add(oBook);

oBook = new BookData();

oBook.Author = "Jane Smith";

oBook.BookID = "bk104";

oBook.BookName = "Book Number 4";

oBook.Price = 25;

lBooks.Add(oBook);

result.Add("book", lBooks);

return result;

}

public struct BookData

{

public string BookName { get; set; }

public string BookID { get; set; }

public string Author { get; set; }

public decimal Price { get; set; }

}

Also, I think it's worth mentioning that this line of code kept returning null until i defined an empty client side oncommand event, as you will see in the code. If that is a known issue, it should be better documented as I also spent a good amount of time trying to figure out why I couldn't grab a reference to the grid:

var tableView;

function pageLoad(sender, args) {

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

}

4 Answers, 1 is accepted

answered on 03 Aug 2010, 04:07 PM

Hi William,

Let me make sure I get you right. You are using client-side binding and bind the grid in the jquery ready event using AJAX post to your web method. At the same time, you are expecting the server-side ItemDataBound event of the grid to fire after each item is databound. I believe this would be a contradiction. Client-side binding means the grid does not postback to the server and creates its items entirely on the client. RadGrid's server-side ItemDataBound event fires after the grid is bound server-side. In your case, the grid binds to a set of empty data items on initial load on the server, so that it creates its items structure. Therefore, you get ItemDataBound on initial load. After that, when the grid loads on the client, all databinding takes place in the browser and the server is not involved. Hence, no server events can be fired with client-side databinding.

As for the MasterTableView client object, the object is not initialized if the grid is not bound on the server (no columns are initialized) and no client-side databinding is indicated. As described in the following help article (on the section in programmatic client-side binding), the grid sets up client-side binding when you define an OnCommand event handler. It tells the grid that client-side binding may follow and causes it to explicitly create its table structure.

Regards,
Veli
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items