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

Client Side Edit Form Template Help

11 Answers 140 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael O'Flaherty
Top achievements
Rank 2
Michael O'Flaherty asked on 27 Apr 2012, 08:18 PM
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;
        }


11 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 30 Apr 2012, 06:04 AM
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.
0
Michael O'Flaherty
Top achievements
Rank 2
answered on 30 Apr 2012, 08:23 PM
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!
0
Shinu
Top achievements
Rank 1
answered on 02 May 2012, 06:10 AM
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.
0
Michael O'Flaherty
Top achievements
Rank 2
answered on 14 May 2012, 03:37 PM
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?
0
Shinu
Top achievements
Rank 1
answered on 15 May 2012, 10:04 AM
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.
0
Michael O'Flaherty
Top achievements
Rank 2
answered on 15 May 2012, 09:51 PM
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!
0
Tsvetina
Telerik team
answered on 19 May 2012, 08:03 AM
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
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.
0
Michael O'Flaherty
Top achievements
Rank 2
answered on 23 May 2012, 07:49 PM
Hi! I created a video to show what is going on. What do you want me to try? http://screencast.com/t/RmIyADVLV6
0
Tsvetina
Telerik team
answered on 28 May 2012, 12:38 PM
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
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.
0
Michael O'Flaherty
Top achievements
Rank 2
answered on 29 May 2012, 09:27 PM
Sure. I attached the results...
0
Tsvetina
Telerik team
answered on 01 Jun 2012, 01:15 PM
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
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
Michael O'Flaherty
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 1
Michael O'Flaherty
Top achievements
Rank 2
Tsvetina
Telerik team
Share this question
or