Client validation gridview in ASP.NET

No.of Views2007
Bookmarked0 times
Downloads 
Votes0
By  malav.rajendra   On  30 Sep 2010 10:09:02
Tag : ASP.NET , Grid Controls
I am going to explain the GridView Control Client Side (Javascript) Validation instead of server side validation controls.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

introduction

I have a asp.net gridview which have three textboxes and two dropdownlist fields.Following screen shot showing that. 

Image Loading

I am checking product code exists or not in database on onblur event

protected void grdBookinStock_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            TextBox txtProductCode = (TextBox)e.Row.FindControl("txtProductCode");
            txtProductCode.Attributes.Add("Onblur", "IsProductCodeExist(this.value);");
        }

Javascript method IsProductCodeExist:

function IsProductCodeExist(txtProductCode) {if (txtProductCode != "") {var IsExistsValue = (AjaxFunctions.IsProductCodeExists(txtProductCode)).value;if (IsExistsValue == false)
                    alert('Product Code does not exists');
            }
        }

Html code for gridview:

<asp:GridView ID="grdBookinStock" BackColor="LightGoldenrodYellow" BorderColor="Tan"
                                BorderWidth="1px" CellPadding="2" ForeColor="Black" AutoGenerateColumns="False"
                                ShowFooter="True" runat="server" OnRowDataBound="grdBookinStock_RowDataBound">
                                <Columns>
                                    <asp:TemplateField HeaderText="Product Code">
                                        <ItemTemplate>
                                            <asp:TextBox ID="txtProductCode" runat="server" MaxLength="6"></asp:TextBox>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Owner">
                                        <ItemTemplate>
                                            <asp:DropDownList ID="ddlOwner" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlOwner_SelectedIndexChanged">
                                            </asp:DropDownList>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Warehouse">
                                        <ItemTemplate>
                                            <asp:DropDownList ID="ddlWarehouse" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlWarehouse_SelectedIndexChanged">
                                            </asp:DropDownList>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Bin">
                                        <ItemTemplate>
                                            <asp:TextBox ID="txtBin" runat="server" MaxLength="12" Enabled="False" 
                                             autocomplete="off" AutoCompleteType="Disabled"></asp:TextBox>
                                            <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="GetCompletionList"
                                                UseContextKey="True" MinimumPrefixLength="1" CompletionInterval="500" EnableCaching="false"
                                                CompletionSetCount="12" TargetControlID="txtBin">
                                            </cc1:AutoCompleteExtender>
                                            <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" FilterType="Custom" ValidChars="1234567890-"
                                                TargetControlID="txtBin" runat="server">
                                            </cc1:FilteredTextBoxExtender>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Quantity">
                                        <ItemTemplate>
                                            <asp:TextBox ID="txtQuantity" runat="server" MaxLength="8" Enabled="False"></asp:TextBox>
                                            <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" FilterType="Numbers" TargetControlID="txtQuantity"
                                                runat="server">
                                            </cc1:FilteredTextBoxExtender>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                                <FooterStyle BackColor="Tan" />
                                <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
                                <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
                                <HeaderStyle BackColor="Tan" Font-Bold="True" />
                                <AlternatingRowStyle BackColor="PaleGoldenrod" />
                            </asp:GridView>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;
                            </td>
                        <td>
                            &nbsp;
                            <asp:Button ID="btnSave" runat="server" CssClass="control" 
                                OnClick="btnSave_Click" OnClientClick="return ValidateData();" Text="Save" />
                            <asp:Button ID="btnCancel" runat="server" CssClass="control" 
                                OnClick="btnCancel_Click" Text="Refresh" />
                        </td>
                    </tr> 
</Table>

Now I am validate data on save button,Client side Javascript method ValidateData():

function ValidateData() {var grid = document.getElementById("<%= grdBookinStock.ClientID %>");var cellProductCode;var cellOwner;var cellWarehouse;var cellBin;var cellQuantity;var cellProductCodeValue;var cellOwnerValue;var cellWarehouseValue;var cellBinValue;var cellQuantityValue;if (grid.rows.length > 0) {//loop starts from 1. rows[0] points to the header.for (i = 1; i < grid.rows.length; i++) {

                    cellProductCode = grid.rows[i].cells[0];
                    cellOwner = grid.rows[i].cells[1];
                    cellWarehouse = grid.rows[i].cells[2];
                    cellBin = grid.rows[i].cells[3];
                    cellQuantity = grid.rows[i].cells[4];for (j = 0; j < cellProductCode.childNodes.length; j++) {//if childNode type is CheckBoxif (cellProductCode.childNodes[j].type == "text") {
                            cellProductCodeValue = cellProductCode.childNodes[j].value;//alert(cellProductCodeValue);}
                    }for (j = 0; j < cellOwner.childNodes.length; j++) {//if childNode type is CheckBoxif (cellOwner.childNodes[j].tagName == "SELECT") {
                            cellOwnerValue = cellOwner.childNodes[j].value;// alert(cellOwnerValue);}
                    }for (j = 0; j < cellWarehouse.childNodes.length; j++) {if (cellWarehouse.childNodes[j].tagName == "SELECT") {
                            cellWarehouseValue = cellWarehouse.childNodes[j].value;//alert(cellWarehouseValue);}
                    }for (j = 0; j < cellBin.childNodes.length; j++) {if (cellBin.childNodes[j].type == "text") {
                            cellBinValue = cellBin.childNodes[j].value;//alert(cellBinValue);}
                    }for (j = 0; j < cellQuantity.childNodes.length; j++) {if (cellQuantity.childNodes[j].type == "text") {
                            cellQuantityValue = cellQuantity.childNodes[j].value;// alert(cellQuantityValue);}
                    }if (cellProductCodeValue != "" || cellOwnerValue != "0" || cellWarehouseValue != "" || cellBinValue != "" || cellQuantityValue != "") {if (cellProductCodeValue == "")
                        { alert('Enter product code');return false; }if (cellOwnerValue == "0") {
                            alert('Select owner.'); return false;
                        }if (cellWarehouseValue == "0") {
                            alert('Select warehouse.'); return false;
                        }if (cellBinValue == "") {
                            alert('Enter bin.'); return false;
                        }if (cellQuantityValue == "") {
                            alert('Enter quantity.'); return false;
                        }


                    }function SetWarehouseIdtoHdnField() {var hdn =document.getElementById('ctl00_ContentPlaceHolder1_hdnWarehouseId')

                       AjaxFunctions.SetValueWarehouse(hdn.value);



                    }


                }
                
            }//return true;if (confirm("Are you sure, you want to save the data?")) {return true;
            }else {return false;
            }

        } 

 Output

Image Loading

 Enjoy with happy coding.thank you for reading.

 
Sign Up to vote for this article
 
About Author
 
malav.rajendra
Occupation-Not Provided
Company-Not Provided
Member Type-Fresh
Location-Not Provided
Joined date-01 Feb 2010
Home Page-Not Provided
Blog Page-Not Provided
 
 
Other popularSectionarticles
Comments
By:Bhupendar SinghDate Of Posted:1/5/2012 8:35:00 AM
GridView Decoration in ASP.Net
Very informative post. It's really helpful for me and helped me lot to complete my task. Thanks for sharing with us. I had found another nice post over the internet which was also explained very well about GridView Decoration in ASP.Net, for more details of this post check out this link... http://mindstick.com/Articles/0efe2da6-407e-4442-a675-475bd6f8a2d7/?GridView%20Decoration%20in%20ASP.Net Thanks
By:bindhyaDate Of Posted:4/4/2011 6:35:03 AM
Hi
Thanks..It helps me a lot.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top