Check for duplicate Column value before adding new row to ASP.Net GridView using jQuery

Last Reply 26 days ago By pandeyism

Posted 27 days ago

I have a gridview which contains some textboxes, a dropdown and a checkbox. One of the textboxes which contains for number should be unique in the sense that when I add new row, I don’t want the same phone number as entered in the previous row, it should throw up an alert saying that phone number has been entered. 

                <asp:GridView ID="grdnok" ClientIDMode="Static" runat="server" AutoGenerateColumns="False" EmptyDataText="No Records"
                    ShowFooter="True" Style="clear: both;" OnRowDataBound="grdnok_RowDataBound">
                    <Columns>
                        <asp:TemplateField HeaderText="S/n" ItemStyle-Width="10px">
                            <ItemTemplate>
                                <span id="indxid" class="indxno"><%# Container.DataItemIndex+1 %></span>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Name*" ItemStyle-Width="150px">
                            <ItemTemplate>
                                <asp:TextBox ID="txtkinname" Width="150" runat="server" Text='<%# Eval("kinname")  %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Address" ItemStyle-Width="250px">
                            <ItemTemplate>
                                <asp:TextBox ID="txtkinaddr" runat="server" Width="250" Text='<%# Eval("kinaddr")  %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Phone" ItemStyle-Width="150px">
                            <ItemTemplate>
                                <asp:TextBox ID="txtkinphone" Width="150" runat="server" Text='<%# Eval("kinphone")  %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Relationship" ItemStyle-Width="100px">
                            <ItemTemplate>
                                <asp:DropDownList ClientIDMode="Static" Width="250" CssClass="txtkinrelate" ID="txtkinrelate" runat="server" Style="margin: 5px;">
                                    <asp:ListItem Text="-Select-" Value=""></asp:ListItem>
                                </asp:DropDownList>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="% Alloc." ItemStyle-Width="80px">
                            <ItemTemplate>
                                <asp:TextBox ID="txtkinpercent" CssClass="txtkinpercent" Width="80" runat="server" Text='<%# Eval("Kinpercent")  %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Benef." ItemStyle-Width="30px">
                            <ItemTemplate>
                                <asp:CheckBox ID="chkbenfac" ClientIDMode="Static" runat="server" Checked='<%# Eval("Benfac")%>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Pix" ItemStyle-Width="50px">
                            <ItemTemplate>
                                <asp:Image ID="imgkin" class="imgkin" runat="server" ImageUrl='<%# Eval("Picimg")  %>' Height="50" Width="50" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Upload">
                            <ItemTemplate>
                                <asp:Label ID="imgkinerr" CssClass="imgkinerr" Style="font-size: 10px; color: red; display: none" runat="server">
                                </asp:Label><br />
                                <asp:FileUpload ClientIDMode="Static" ID="fplImgKinpic" CssClass="fplImgKinpic" runat="server" />
                                <asp:HiddenField ID="hdfpicimg" runat="server" ClientIDMode="Static" Value='<%#Eval("picimg")%>' />
                                <asp:HiddenField ID="hdfFileName" runat="server" ClientIDMode="Static" Value='<%#Eval("Kinpic")%>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <HeaderStyle BackColor="#465C71" ForeColor="White" />
                </asp:GridView>

You are viewing reply posted by: pandeyism 26 days ago.
Posted 26 days ago

Hi  RumeValid,

Refer below link to validate your fields according to checked checkbox, And refer below sample.

Enable Disable TextBox controls in GridView Row when CheckBox Checked Unchecked using JavaScript and jQuery in ASP.Net

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var gridView = $("[id*=grdnok]");
        var row = gridView.find("tr").eq(1).clone();
        $("[id*=grdnok]").find("[id*=btnAddRow_kin]").click(function () {
            var index = $(this).closest("tr")[0].rowIndex - 2;
            if (index == 0) {
                addRows(gridView, row);
            }
            else {
                var tr = gridView.find("tr");
                var currentVal = gridView.find("tr:last").prev().find("#txtkinphone").val()
                var isvalid = true;
                for (var i = 1; i < tr.length - 2; i++) {
                    var input = $(tr[i]).find('#txtkinphone');
                    if (currentVal == $(input).val()) {
                        isvalid = false;
                        alert("Contact Number Should be Unique.");
                        break;
                    }
                }
                if (isvalid) {
                    addRows(gridView, row);
                }
            }
            return false;
        });
    });
    function addRows(gridView, row) {
        var preindex = $(this).parent().parent().prev().find("td").eq(0).html();
        $("<tr>" + row.html() + "</tr>").insertBefore(gridView.find("tr:last"));
        $(this).parent().parent().prev().find("td").eq(0).html((parseInt(preindex) + 1))
    }
</script>
<div>
    <asp:GridView ID="grdnok" ClientIDMode="Static" runat="server" AutoGenerateColumns="False"
        EmptyDataText="No Records" ShowFooter="True" Style="clear: both;">
        <Columns>
            <asp:TemplateField HeaderText="S/n" ItemStyle-Width="10px">
                <ItemTemplate>
                    <span id="indxid" class="indxno">
                        <%# Container.DataItemIndex+ 1 %></span>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Name*" ItemStyle-Width="150px">
                <ItemTemplate>
                    <asp:TextBox ID="txtkinname" Width="150" runat="server" Text='<%# Eval("kinname")  %>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Address" ItemStyle-Width="250px">
                <ItemTemplate>
                    <asp:TextBox ID="txtkinaddr" runat="server" Width="250" Text='<%# Eval("kinaddr")  %>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Phone" ItemStyle-Width="150px">
                <ItemTemplate>
                    <asp:TextBox ID="txtkinphone" Width="150" runat="server" Text='<%# Eval("kinphone")  %>' />
                </ItemTemplate>
                <FooterStyle HorizontalAlign="Right" />
                <FooterTemplate>
                    <asp:Button ID="btnAddRow_kin" runat="server" Text="Add New Row" />
                </FooterTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { new DataColumn("kinname", typeof(string)),
                                            new DataColumn("kinaddr", typeof(string)),
                                            new DataColumn("kinphone", typeof(int))});
    dt.Rows.Add();
    this.grdnok.DataSource = dt;
    this.grdnok.DataBind();
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {New DataColumn("kinname", GetType(String)), New DataColumn("kinaddr", GetType(String)), New DataColumn("kinphone", GetType(Integer))})
    dt.Rows.Add()
    Me.grdnok.DataSource = dt
    Me.grdnok.DataBind()
End Sub

Screenshot