Cleint side validation before Insert/Update in Radgrid

9 posts, 0 answers
  1. sushma lochab
    sushma lochab avatar
    11 posts
    Member since:
    Dec 2009

    Posted 02 Feb 2010 Link to this post

    Hi,

    Is there any way to validate cell values of inserted/updated row of Radgrid on client side?

    Is there any event like onBeforeAdd/OnBeforeUpdate where we can get inserted/edited row and validate entered column values?

     

    Thanks in advance.

    Sushma

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

    Posted 03 Feb 2010 Link to this post

    Hello Sushma,

    Try out the following code to achieve client side validation:
    c#:
    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e) 
        { 
            if ((e.Item is GridEditableItem) && (e.Item.IsInEditMode)) 
            { 
                GridEditableItem editForm = (GridEditableItem)e.Item; 
                LinkButton update = (LinkButton)editForm.FindControl("UpdateButton"); 
                LinkButton insert = (LinkButton)editForm.FindControl("PerformInsertButton"); 
                TextBox txtbx = (TextBox)editForm["BoundColumnUniqueName"].Controls[0]; 
                if (update != null
                { 
                    update.Attributes.Add("onclick""return Validate('" + txtbx.ClientID + "')"); 
                } 
                if (insert != null
                { 
                    insert.Attributes.Add("onclick""return Validate('" + txtbx.ClientID + "')"); 
                } 
            }   
        } 

    js:
    function Validate(txt) 
       { 
         var txtbx = document.getElementById(txt); 
         if(txtbx.value == ""
         { 
           alert("Please enter a value!"); 
           return false
         }      
       }  

    Thanks
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nahid
    Nahid avatar
    31 posts
    Member since:
    Aug 2010

    Posted 13 Oct 2010 Link to this post

    Hi Shinu,
    Its working fine when using Link button but Its not working when I use image button.

    Thanks
    Md Nasir Uddin
  5. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 18 Oct 2010 Link to this post

    Hello Nahid,

    Please cast the buttons to ImageButton when using image buttons:
    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if ((e.Item is GridEditableItem) && (e.Item.IsInEditMode))
        {
            GridEditableItem editForm = (GridEditableItem)e.Item;
            ImageButton update = (ImageButton)editForm.FindControl("UpdateButton");
            ImageButton insert = (ImageButton)editForm.FindControl("PerformInsertButton");
            TextBox txtbx = (TextBox)editForm["BoundColumnUniqueName"].Controls[0];
            if (update != null)
            {
                update.Attributes.Add("onclick", "return Validate('" + txtbx.ClientID + "')");
            }
     
            if (insert != null)
            {
                insert.Attributes.Add("onclick", "return Validate('" + txtbx.ClientID + "')");
            }
        }
    }

    I hope this helps.

    Kind regards,
    Mira
    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
  6. Nahid
    Nahid avatar
    31 posts
    Member since:
    Aug 2010

    Posted 28 Oct 2010 Link to this post

    Hello Mira,
    Thanks for you reply. When I am using multiple field validation then Its works fine in first time but in second time its found null object. whats my problem? How  can I validate multiple field in a javascript function.

    Javascript function is bellow:
    function ValidateWebAddress(txt, combo) {
      
             var comboValue = $find(combo); // Its a combobox 
            var txtbx2 = document.getElementById(txt); //Its a textbox
             var alertStr;
               
             if ((comboValue.get_value() == "") && (txtbx2.value == "")) {
                 alertStr = "Please Select Web Address Type And Enter Address!";
                 radalert(alertStr);
                 return false;
             } else if (comboValue.get_value() == "") {
      
             alertStr = "Please Select Web Address Type!";
                 radalert(alertStr);
                 return false;
             } else if (txtbx2.value == "") {
      
             alertStr = "Please Enter Address!";
                 radalert(alertStr);
                 return false;
             }
      
      
         }


    Thanks
    Nahid
  7. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 02 Nov 2010 Link to this post

    Hello Nahid,

    I tried to replicate the issue which you described, but to no avail.
    Attached to this message, you will find the code which I used for testing.

    Please, take a look at it and let me know if there are any differences at your end, which I may be leaving out.

    Greetings,
    Mira
    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
  8. Sagar
    Sagar avatar
    3 posts
    Member since:
    Jun 2013

    Posted 29 Jun 2013 Link to this post

    @Shinu !!!Thank you For Suggestion!!!! Its working now!!!
  9. Jon
    Jon avatar
    35 posts
    Member since:
    Sep 2013

    Posted 24 Mar 2014 in reply to Mira Link to this post

    Hello Mira,

    I implemented the solution you and Shinu recommended and it was working great.  However, it has stopped working.  For some reason the onclick I add is concatenated to the radgrid's onclick and rendered as shown below (if my function was called "Validate").

    onclick="if(!$find('ctl00_ContentPlaceHolder1_rgPours_ctl00').updateItem('0')) return false;
    return Validate('txtboxClientID');"

    Since my code is added after the update code, my validation code never gets called.

    As a work around, I did find that that the ClientEvents OnCommand fires before the button's onclick event.

    So, on the server side, instead of adding the onclick attribute, I put the client id of the control(s) to be validated in a hidden input at the same place:
    hdControlId.Value = txtbx.ClientID;


    Then I added the following inside the root node of the RadGrid:
    <ClientSettings>
        <ClientEvents OnCommand="RadGrid1_OnCommand"/>
    </ClientSettings>

    Then in the RadGrid1_OnCommand:
    function rgPours_OnCommand(sender, eventArgs)
    {
        var commandName = eventArgs.get_commandName();
     
        var controlId = $("#<%=hdControlId.ClientID %>").val();
         
        if (commandName == "Update" || commandName == "PerformInsert")
            eventArgs.set_cancel(!Validate(controlId));
    }
  10. Jon
    Jon avatar
    35 posts
    Member since:
    Sep 2013

    Posted 25 Mar 2014 in reply to Jon Link to this post

    Update: I found out why my validation code quit working.  If you "subscribe" to the RadGrid ClientEvents like below:
    <ClientSettings>
        <ClientEvents OnCommand="RadGrid1_OnCommand"/>
    </ClientSettings>

    it will add an onclick javascript function to every button like below (this example is for the update button):
    onclick="if(!$find('ctl00_ContentPlaceHolder1_rgPours_ctl00').updateItem('0')) return false;"

    If you've tried to add an onclick attribute like originally posted by Shinu, it will put your javascript after this and therefore it will not run.  In my case I had developed my custom validation, then later subscribed to the OnCommand events.  That's why my validation quit working.

    It's unfortunate and was certainly confusing to me, but at least now I know what happened.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017