Call client event onRowDataBound using JQuery

[Nagendra Thumuluru]

Hi Gurus,

I have a requirement that ensures i bind the grid @ the client side. So I did that using webservice. I have a bunch of images & hyperlinks in the grid. So when I use the onRowDataBound event & display all the images & the hyperlinks (the hyperlink & image tag are put in the itemtemplate), it initially displays the grid in the attached manner. It then takes a 3-4 secs to load the images. Building the image url & the hyperlink url is done in the  onRowDataBound in JS. I know this is obviously slow. 

So i wanted to call the onRowDataBound using the JQuery in the document.ready & populate build all the URLs using JQuery which I think could be faster than the regular JS. I started doing this in the following way:

<script language="javascript" type="text/javascript">

            $telerik.$(document).ready(function() {
                alert("Document is ready");
                $('.rgMU').onRowDataBound(function rgMU_RowDataBound1());
            });

            function rgMU_RowDataBound1(e) {
                debugger;
                var row = e.row;
                var dataItem = e.dataItem;
                alert("IN the event");
            }
</script>

BUt for some reason, the event never fires up. So once the event fired up, how do I populate the URLs (the URL for each row is coming from the DB). So it should be part of "args.get_item().findElement("Img1URL");" but how do I bind this with the JQuery.

Can someone gimme an example?

Thanks
Bobbie

[Jayesh Goyani]

Hello,

Please check below code snippet.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
       <script type="text/javascript">
           $(document).ready(function () {

               jQuery.ajax({
                   type: 'POST',
                   contentType: 'application/json; charset=utf-8',
                   data: '',
                   dataType: 'JSON',
                   url: 'Default.aspx/BindGrid',
                   success: function (result) {
                       var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                       tableView.set_dataSource(result.d);
                       tableView.dataBind();
                   },
                   error: function () {

                   }
               });
           });

           function gridRowBound(sender, args) {

// You can also set here image also
               args.get_item().findElement("lblName").innerHTML = args.get_item()._dataItem.Name + " From Client";

           }


       </script>

   </telerik:RadCodeBlock>

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

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"},
                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.



Thanks,
Jayesh Goyani

[Nagendra Thumuluru]

HI JAyesh,

THanks for the response. But then, in the soln you mentioned too, we are calling the onrowdatabound in the client settings & Binding the grid is done in JQuery. My idea is that I bind the grid @ the client side using Webservice or WCF which I Have already done. I was looking for the onrowdatabound @ the client side (using JQuery). Can you plz let  me know if this is feasible?

Thanks
Bobbie

[Jayesh Goyani]

Hello Bobbie,

Sorry but ItemDataBound was fired when we execute/triggered the event DataBind() (Bind the data to Grid), so as per my idea it was not possible.

Thanks,
Jayesh Goyani

[Jayesh Goyani]

Hello Bobbie,

you want access row's control on client side then it is possible.
please check below link for this
http://www.telerik.com/community/code-library/aspnet-ajax/grid/accessing-and-validating-controls-client-side-inside-a-hierarchical-radgrid.aspx


let me know if any concern.

Thanks,
Jayesh Goyani

[Nagendra Thumuluru]

Thanks Jayesh,

I did look @ the example you provided. Can you plz help me with a sample on how to call rowdatabound in document.ready?

Thanks
Nagendra

[Jayesh Goyani]

Hello,

sorry but its not possible or feasible.

Then also you can try with below code

-- call this function in document.ready function.
-- because this event automatically called databind event.
-- and databind event call the itemdatabound event.

function RefreshGrid() {
    var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
    masterTable.rebind();
}

I hope this will work.

Thanks,
Jayesh Goyani