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

RumeVali...

SOLVED CLOSED ACTIVE ANSWERED
User: RumeValid
Posted: on Apr 25, 2019 03:09 AM
Forum: Data Controls
Replies: 4
Views: 7774
Sample Code: Download

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>

Andrea

0 1

Reply
User: Andrea
Replied: on Apr 25, 2019 03:09 AM
Report

Hi @RumeValid, Please try the following How to calculate number input by each row in gridview It might help you. Cheers Andrea.

pandeyis...

0 2

Reply
User: pandeyism
Replied: on Apr 25, 2019 03:26 AM
Report

Hi RumeValid,

I will get back soon.

pandeyis...

0 3

Reply
User: pandeyism
Replied: on Apr 25, 2019 08:31 AM
Report

I am working on it, I will get back tomorrow.

pandeyis...

0 4

Reply
User: pandeyism
Replied: on Apr 26, 2019 12:54 AM
Report

Hi RumeValid,

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

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

using System.Data;

VB.Net

Imports System.Data

Code

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

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

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

Company

Explore

Follow us

Contact Us