How to Access GridViews child control in JavaScript??

[Vikram Vyas]

I have used Telerik RadGrid. I have binded my gridviews with 100+ records. I have perform client side operation using javascript function. I am able to call call the javascript function but facing problem while accessing controls values in javascript function.

Please reply soon.

Thanks in advance.

-
Vikram

[Maria Ilieva]

Hello,

Could you please elaborate on what you mean by accessing controls values in javascript function? Please be more specific on what controls you are trying to access and how they are added in the RadGrid. More information on your specific scenario will help us provide more to-the-point solution.

Regards,
Maria Ilieva
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.

[Vikram Vyas]

Hi Maria,

Thanks for your prompt reply.

We have taken a textbox in RadGrid (Under ItemTemplate Tag), we are calling a javascript function on "onchange" client side event of TextBox where we have to read all the values of radgrid's child control(in my case it is textboxes). I can find the ClientSideID by passing this.Id while calling javascript function, But my question is How to find total number of rows in radgrid and then how to access the value of individual cells from it using JavaScript and how to loop through radgrid and how to read the values from all the textboxes this is where i am facing the problem.

Waiting for your response.

Regards,
Vikram

[Princy]

Hello,

I guess you want to access the controla placed in same row in the onchange event handler. If so take a look at the example shown below.

aspx:

    <telerik:GridTemplateColumn HeaderText="TextBox11" UniqueName="myTemplateColumn">
        <ItemTemplate>
            <asp:TextBox ID="TextBox11" runat="server">
            </asp:TextBox>
        </ItemTemplate>
    </telerik:GridTemplateColumn>
    <telerik:GridTemplateColumn HeaderText="TextBox1" UniqueName="myTemplateColumn">
        <ItemTemplate>
            <asp:TextBox ID="TextBox1" runat="server" onchange="OnchangeHandler(this);">
            </asp:TextBox>
        </ItemTemplate>
    </telerik:GridTemplateColumn>
    <telerik:GridTemplateColumn UniqueName="myTemplateColumn">
        <ItemTemplate>
            <telerik:RadTextBox ID="RadTextBox2" Text="RadTextBox2" runat="server">
            </telerik:RadTextBox>
        </ItemTemplate>
    </telerik:GridTemplateColumn>

client code:

function OnchangeHandler(txtid) {
    var index = txtid.parentNode.parentNode.sectionRowIndex; // Get the corresponding index
    var grid = $find("<%=radGrid.ClientID %>");
    var MasterTable = grid.get_masterTableView();
    var textbox = MasterTable.get_dataItems()[index].findElement("TextBox11"); //accessing standard asp.net server controls
    alert(textbox.value);
    var radTextbox = MasterTable.get_dataItems()[index].findControl("RadTextBox2"); //accessing RadControls
    alert(radTextbox.get_value());
}

Hope the code will help you to get started. Feel free to share the comments.

Thanks,
Princy.

[Mukesh]

Hi Princy,

This code is working fine for grid's existing rows.
But when we Add New Row and try to update its control then, its not working. (I am using radgrid inline editing).

Please help..


Thanks
Mukesh

[Princy]

Hello Mukesh,

If you want to update the control in insert form add these controls(TextBox and RadTextBox) in EditItemTemplate of GridTemplateColumn. And then in ItemCreated event attach an 'onchange' event to the TextBox and pass the Client ID of RadTextBox to the client side function. In that client function you can access the RadTextBox using this Client ID.

A similar approach is explined in this forum.

Thanks,
princy.