Cleint side validation before Insert/Update in Radgrid

[sushma lochab]

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

[Shinu]

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.

[John]

Heh, this is still relevant today and working nicely, thanks Shinu

[Nahid]

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

Thanks
Md Nasir Uddin

[Mira]

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

[Nahid]

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

[Mira]

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

[Sagar]

@Shinu !!!Thank you For Suggestion!!!! Its working now!!!

[Gaurab]

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

}


[Gaurab]

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.