Client Side Edit Form Template Help

12 posts, 0 answers
  1. Michael O'Flaherty
    Michael O'Flaherty avatar
    67 posts
    Member since:
    Jun 2010

    Posted 27 Apr 2012 Link to this post

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


  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 Apr 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael O'Flaherty
    Michael O'Flaherty avatar
    67 posts
    Member since:
    Jun 2010

    Posted 30 Apr 2012 Link to this post

    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!
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 02 May 2012 Link to this post

    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.
  6. Michael O'Flaherty
    Michael O'Flaherty avatar
    67 posts
    Member since:
    Jun 2010

    Posted 14 May 2012 Link to this post

    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?
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 15 May 2012 Link to this post

    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.
  8. Michael O'Flaherty
    Michael O'Flaherty avatar
    67 posts
    Member since:
    Jun 2010

    Posted 15 May 2012 Link to this post

    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!
  9. Tsvetina
    Admin
    Tsvetina avatar
    1875 posts

    Posted 19 May 2012 Link to this post

    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.
  10. Michael O'Flaherty
    Michael O'Flaherty avatar
    67 posts
    Member since:
    Jun 2010

    Posted 23 May 2012 Link to this post

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

    Posted 28 May 2012 Link to this post

    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.
  12. Michael O'Flaherty
    Michael O'Flaherty avatar
    67 posts
    Member since:
    Jun 2010

    Posted 29 May 2012 Link to this post

    Sure. I attached the results...
  13. Tsvetina
    Admin
    Tsvetina avatar
    1875 posts

    Posted 01 Jun 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017