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

Client-Side Databinding - ItemDatabound Firing Before Grid is Bound

4 Answers 475 Views
Grid
This is a migrated thread and some comments may be shown as answers.
William
Top achievements
Rank 1
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">
<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

Sort by
0
Veli
Telerik team
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
0
AMS
Top achievements
Rank 1
answered on 21 Sep 2010, 12:27 PM
I am having issues while using Telerik Grid at client-side along with asp.net MVC 1.0. Please check my issue and explain to me what should i do to resolve that

Regards

the url is:
http://www.telerik.com/community/forums/aspnet-ajax/grid/client-side-problem-in-radgrid.aspx#1352076
0
Doug
Top achievements
Rank 1
answered on 04 Dec 2012, 07:55 PM
Veli,
So how does one handle the ItemDataBound event on the client? The link you provides does not make this clear to me. Would you please provide a simple outline of the hook and arguments involved?
0
Antonio Stoilkov
Telerik team
answered on 07 Dec 2012, 08:13 AM
Hello Doug,

You could take a look at the help article below where the event is described in detail. Note that RowDataBound event is the corresponding event to the server-side ItemDataBound.

Regards,
Antonio Stoilkov
the Telerik team
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.
Tags
Grid
Asked by
William
Top achievements
Rank 1
Answers by
Veli
Telerik team
AMS
Top achievements
Rank 1
Doug
Top achievements
Rank 1
Antonio Stoilkov
Telerik team
Share this question
or