Client Side Edit Form Template Help

[Michael O'Flaherty]

Hi!

We are trying to validate controls in a form template. The javascript code shown below fires, but how do I reference the controls in the template in code behind? We want to make sure the text box and combo box has a value.

Thanks for your help!

<editformsettings editformtype="Template">
    <FormTemplate>

        <telerik:RadTextBox ID="inputBoxIdentifier" runat="server" CssClass="inputBox" Style="top: 0px; left: 0px" Skin="Windows7" SelectionOnFocus="SelectAll" EnableViewState="true">
        <InvalidStyle CssClass="inputBoxInvalid" />

        <telerik:RadComboBox ID="comboBoxIdentifier" runat="server" CssClass="radComboBox" OnDataBound="radComboBox_DataBound"
        OnSelectedIndexChanged="radComboBox_SelectedIndexChanged" Filter="Contains" Skin="Windows7"
        EnableLoadOnDemand="true" EnableViewState="true" />

        <telerik:RadButton ID="radButtonInsertUpdate" runat="server" OnClientClicking="performInsertOrUpdate"
            Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>' CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' CssClass="esbutton" />
        <telerik:RadButton ID="radButtonCancelInsertUpdate" runat="server" OnClientClicking="cancelInsertOrUpdate"
            Text="Cancel" CausesValidation="false" CommandName="Cancel" CssClass="esbutton" />

    </FormTemplate>
</editformsettings>




function performInsertOrUpdate(sender, args) {
            var error = 0;

            var controlRef = $find("<%= radGridClientIdentifiers.ClientID %>").get_masterTableView();

            // any items being inserted?
            var insertedItem = controlRef.get_insertItem();
            if (insertedItem != null) {

            }

            var editedItemsArray = controlRef.get_editItems();
            if (editedItemsArray.length > 0) {

            }

            if (error == 1)
                return false;

            return true;
        }

[Shinu]

Hello Michael,

Try the following code to add a validator.
C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
  if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
  {
    GridEditFormItem item = (GridEditFormItem)e.Item;
    RadTextBox txt = (RadTextBox)item.FindControl("txt");
    RequiredFieldValidator validator = new RequiredFieldValidator();
    RequiredFieldValidator val = new RequiredFieldValidator();
    val.ID = "validator1";
    val.ControlToValidate =txt.ID;
    val.ErrorMessage = "*";
    txt.Controls.Add(val);
  }
}

Thanks,
Shinu.

[Michael O'Flaherty]

Thanks for your reply. Is there a way to get a reference to the controls via JavaScript? The JS code I show does give me access to the insert/edits, but I want to reference the controls in the custom template and validate it there. Is that possible? We actually do all other validation client-side and this is the last issue we have. Thanks again!

[Shinu]

Hello Michael,

Try the following code to access controls from client side.
C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
 if ((e.Item is GridEditFormItem && e.Item.IsInEditMode))
 {
  GridEditFormItem editFormItem = (GridEditFormItem)e.Item;
  RadTextBox txt = (RadTextBox)editFormItem.FindControl("inputBoxIentifier");
  RadComboBox combo = (RadComboBox)editFormItem.FindControl("comboBoxIdentifier");
  RadGrid1.Controls.Add(new LiteralControl("<script type='text/javascript'>window['txt1'] = '" + txt.ClientID + "';</script>"));
  RadGrid1.Controls.Add(new LiteralControl("<script type='text/javascript'>window['Combo'] = '" + combo.ClientID + "';</script>"));
 }
}

JS:

<script type="text/javascript">
function GetValue()
{
var txt= $find(window['txt1']);
 var combo= $find(window['combo']);
}
</script>

Thanks,
Shinu.

[Michael O'Flaherty]

Hi! We are finally getting around to looking at this and we are still missing something. Our RAD controls are wrapped into ASCX controls, but we expose a reference to them and we have implemented the radGridClientIdentifiers_ItemCreated like this:

protected void radGridClientIdentifiers_ItemCreated(object sender, GridItemEventArgs e)
        {

            if ((e.Item is GridEditFormItem) && (e.Item.IsInEditMode))
            {
                GridEditFormItem editFormItem = (GridEditFormItem)e.Item;

                CMIS.InputBox textParent = (CMIS.InputBox)editFormItem.FindControl("inputBoxIdentifier");
                CMIS.ComboBox comboParent = (CMIS.ComboBox)editFormItem.FindControl("comboBoxIdentifier");

                RadTextBox txt = textParent.TextBoxControlReference;
                RadComboBox combo = comboParent.ComboBoxControlReference;

                radGridClientIdentifiers.Controls.Add(new LiteralControl("<script type='text/javascript'>window['txt1'] = '" + txt.ClientID + "';</script>"));
                radGridClientIdentifiers.Controls.Add(new LiteralControl("<script type='text/javascript'>window['combo'] = '" + combo.ClientID + "';</script>"));
            }
        }

This appears to work fine. However, when we reference them in javascript, the references are null:

function performInsertOrUpdate(sender, args) {
            var error = 0;

            var controlRef = $find("<%= radGridClientIdentifiers.ClientID %>").get_masterTableView();

            // any items being inserted?
            var insertedItem = controlRef.get_insertItem();
            if (insertedItem != null) {

                var txt = $find(window['txt1']);    // this returns NULL
                var combo = $find(window['combo']); // this returns NULL
            }
            var editedItemsArray = controlRef.get_editItems();
            if (editedItemsArray.length > 0) {
                // TODO
            }

            if (error == 1)
                return false;

            isPerformingGridOperation = false;
            insertGridItemButtonPressed = true;

            return true;
        }

Any idea what we are missing here?

[Shinu]

Hello Michael,

Here is the sample code that I tried to access a TextBox control in usercontrol from client side.
C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
 if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
 {
   GridEditFormItem item = (GridEditFormItem)e.Item;
   UserControl userControl = (UserControl)e.Item.FindControl(GridEditFormItem.EditFormUserControlID);
   TextBox txt1 = (TextBox)userControl.FindControl("TextBox2");
   RadGrid1.Controls.Add(new LiteralControl("<script type='text/javascript'>window['txt'] = '" + txt1.ClientID + "';</script>"));
 }
}

JS:

function GetValue()
{
 var txt= document.getElementById(window['txt']);
}

Thanks,
Shinu.

[Michael O'Flaherty]

I am definately missing something. That returns NULL too. Should I be able to view source on the page and see either 'txt' or the client ID of the control on the page? The reason I ask is because I can inspect insertedItem from var insertedItem = controlRef.get_insertItem(); and the innerhtml property shows me the template makeup. However, I don't see any of the code on the actual page. Maybe if I understood what RadGrid1.Controls.Add(newLiteralControl("<script type='text/javascript'>window['txt'] = '"+ txt1.ClientID + "';</script>")); actually does. What are we doing here?

Thanks for your help!

[Tsvetina]

Hello Michael,

Have you tried debugging the client script that accesses the textbox to confirm that window["txt"] returns a value at the time you try to use it? Also, you could inspect the rendered HTML to check whether the actual ID of the textbox is the same as the one that is passed in the function.

Kind regards,
Tsvetina
the Telerik team

[Michael O'Flaherty]

Hi! I created a video to show what is going on. What do you want me to try? http://screencast.com/t/RmIyADVLV6

[Tsvetina]

Hi Michael,

I was asking if, when you select window['txt'] and open the Quick Watch dialog, there is a value returned that corresponds to the ClientID of the searched control.

Kind regards,
Tsvetina
the Telerik team

[Michael O'Flaherty]

Sure. I attached the results...

[Tsvetina]

Hi Michael,

It looks like the script that needs to populate the window['txt'] value does not run or runs too late. I would advise you to use one of the ScriptManagers methods for registering client script for execution, instead of rendering a literal.
If you register the script during AJAX request, follow this link:
http://www.telerik.com/help/aspnet-ajax/ajax-execute-custom-javascript.html

If there is no async postback, use the RegisterClientScriptBlock method:
http://msdn.microsoft.com/en-us/library/btf44dc9.aspx

Let me know if this helps.

All the best,
Tsvetina
the Telerik team