Client Side Event when EditForm is expanded

[Shira]

I have a RadGrid with an EditForm (MasterTableView EditMode="EditForms"), whose layout is defined in a FormTemplate under the EditFormSettings tag.  I would like to do some client side processing of data for one of the fields in that FormTemplate, and am trying to figure out how to access the EditForm's data most easily.

Specifically, I have a TextBox that I may append tokenized values to  - so inside the EditForm, there's MyTextField (which is bound to the underlying DataSource for the RadGrid), plus AddToken button and Token dropdown, which are not databound.  User picks a value from the Token dropdown, clicks AddToken, and the text of the selected item in the dropdown is appended to the value in MyTextField.  

I'm trying to figure out what my button and javascript function should look like - I'm figuring it would be easiest to get access to the EditForm's data if there's a client-side RadGrid event I could hook into.  If none is available on click of my custom "Add Token", then maybe at least there's an event available when Edit is clicked to expand my EditForm, so I can get ahold at that time of the item being edited?... Any thoughts?

Thanks!

[Princy]

Hello Shira,

Please refer the following code library  which provides an example of how to retrieve editor values on client:
Retrieving grid editor value client side

Thanks,
Princy.

[Shawn Taylor]

Thanks for the input.  Unfortunately, I still can't get it working.  I've tried setting javascript with the clientids for my two textbox server controls in the ItemCreated event, and changing my button to a client-side input button, as this demo suggests, but the javascript that I set in the ItemCreated event does not seem to make it onto my page, even though the code executes successfully - I don't see it when I ViewSource, and the javascript function that executes when my button is clicked throws the error message programmed in for when the document.getElementByID call returns null.  Here's my ItemCreated event, (trying in two different ways to get the Javascript onto the page):

         protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
        {
           if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
            {
                GridEditFormItem editFormItem = e.Item as GridEditFormItem;
                TextBox subject = editFormItem.FindControl("tbSubject") as TextBox;
                RadGrid1.Controls.Add(new LiteralControl("<script type='text/javascript'>window['SubjectId'] = '" + subject.ClientID + "';</script>"));


                DropDownList token = editFormItem.FindControl("ddlSubjectToken") as DropDownList;
                RadGrid1.Controls.Add(new LiteralControl("<script type='text/javascript'>window['SubjectTokenId'] = '" + token.ClientID + "';</script>"));

                System.Web.UI.HtmlControls.HtmlGenericControl divTag = e.Item.FindControl("EditFormIds") as System.Web.UI.HtmlControls.HtmlGenericControl;
                divTag.InnerHtml = "<script type='text/javascript'> " +
                                    "window['SubjectId'] = '" + subject.ClientID + "';" +
                                    "window['SubjectTokenId'] = '" + token.ClientID + "';" +
                                    "</script>";

            }
}

Here is my javascript, which throws the "no item in edit/insert mode available" error when I click the add token button (I also tried running a javascript: alert(document.getElementById(window['EditFormIds'] command in the browser url window, which also returned null, confirming that neither of my ways of trying to get the javascript on the page worked):

function AddTokenToSubject()
{
    var subjectField = document.getElementById(window['SubjectId']);
    if (!subjectField) {
        alert("no item in edit/insert mode available");
        return;
    }
    else {
        alert("Subject edited value is: " + subjectField.value);
    }
    var subjectTokenField = document.getElementById(window['SubjectTokenId']);
    if (!subjectTokenField) {
        alert("no item in edit/insert mode available");
        return;
    }
    else {
        alert("Subject Token edited value is: " + subjectTokenField.value);
    }
}

And here is the relevant part of my FormTemplate:

<FormTemplate>
    <div id="EditFormIds" runat="server" />
    <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;
        border-collapse: collapse;">
        <%# (Container is GridEditFormInsertItem) ? "<tr><td> </td></tr>" : ""%>
        <tr>
            <td class="label">
                <asp:Label ID="lblSubject" runat="server" Text="SubjHardcodedText"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="tbSubject" runat="server" Text='<%# Bind("Subject") %>' />
            </td>
            <td>
                <div id="TokenDiv" runat="server" />
                <asp:DropDownList ID="ddlSubjectToken" runat="server" />
            </td>
        </tr>

Any ideas?

Thanks!

Shira

[Shira]

I have found a workaround.

I am now using a RadComboBox and a RadTextBox and storing the client id in a javascript global variable on the client side load method for each edit form control so it will be available later when I click on my input button, per the example here: http://stackoverflow.com/questions/3493777/getting-clientid-of-control-in-radgrid-edit-form

Thanks again!