Null values checking in DataGrid rows using jQuery in ASP.Net

Hi Amitabha,

You are looping all the rows. So the chk is null for first row. So there is error. Since the error code breaks. So you need to check with null condition or start the loop from 1.

Refer below sample.

HTML

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('[id*=BtnSbmt]').click(function () {
                //if ($('[id*=ddlCrpo]').val() == "") {
                //    toastr.error('Please Select a Corporate !');
                //    return false;
                //}
                //if ($('[id*=ddlRegCode]').val() == "") {
                //    toastr.error('Please Select a Region !');
                //    return false;
                //}
                //if ($('[id*=ddlCntrCode]').val() == "") {
                //    toastr.error('Please Select a Controlling !');
                //    return false;
                //}
                //if ($('[id*=ddlBranch]').val() == "") {
                //    toastr.error('Please Select a Branch !');
                //    $('[id*=ddlBranch]').css('border', '1px solid #a94442');
                //    return false;
                //}
                //else {
                GridCheck();
                //}
            });

            function GridCheck() {
                try {
                    var grid = document.getElementById("ContentPlaceHolder1_gridMSR");
                    var flg = 1;
                    for (var i = 0; i < grid.rows.length - 1; i++) {
                        var chk = document.getElementById("ContentPlaceHolder1_gridMSR_ChkMsrBx_" + (i - 1));
                        if (chk != null) {
                            if (chk.checked) {
                                flg = 1;
                                var DlyCat = document.getElementById("ContentPlaceHolder1_gridMSR_ddlDlyCat_" + (i - 1));
                                var Destn = document.getElementById("ContentPlaceHolder1_gridMSR_ddlDestination_" + (i - 1));
                                var MSRAmnt = document.getElementById("ContentPlaceHolder1_gridMSR_txtMSRAmount_" + (i - 1));
                                if (DlyCat.value == '') {
                                    alert('Please Select SOP Details in Sr No ' + i);
                                    DlyCat.focus();
                                    return false;
                                }
                                if (Destn.value == '') {
                                    alert('Please Select Supplier Name in Sr No ' + i);
                                    Destn.focus();
                                    return false;
                                }
                                if (MSRAmnt.value == '') {
                                    alert('Please Enter Delivery Destination in Sr No ' + i);
                                    txtdly.focus();
                                    return false;
                                }
                            }
                        }
                    }

                    if (flg == 1) {
                        alert('Please Enter atleast 1 Record in Details Datagrid')
                    }
                    else {
                        $('[id*=ConfirmModal]').modal('show');
                    }
                }
                catch (objj) {
                    alert(objj);
                    return (false);
                }
            }
        });
    </script>
    <div class="container">
        <asp:DataGrid ID="gridMSR" runat="server" ShowFooter="True" AutoGenerateColumns="false"
            class="table table-striped table-bordered" Width="50%">
            <Columns>
                <asp:TemplateColumn HeaderText="Sr No">
                    <ItemTemplate>
                        <asp:CheckBox ID="ChkMsrBx" runat="server" CssClass="checkbox-inline"></asp:CheckBox>
                    </ItemTemplate>
                    <FooterTemplate>
                        <button type="button" runat="server" id="BtnAdd" class="btn btn-group-sm btn-sm btn-success">
                            <i class="fa fa-plus-circle"></i>
                        </button>
                    </FooterTemplate>
                </asp:TemplateColumn>
                <asp:TemplateColumn HeaderText="Delivery Type">
                    <ItemTemplate>
                        <asp:DropDownList ID="ddlDlyCat" runat="server" AutoPostBack="true" CssClass="form-control dropdown" Width="150px">
                            <asp:ListItem Text="Select" Value=""></asp:ListItem>
                            <asp:ListItem Text="Cat 1" Value="1"></asp:ListItem>
                            <asp:ListItem Text="Cat 2" Value="2"></asp:ListItem>
                        </asp:DropDownList>
                        <input id="txtDlyCat" runat="server"
                            type="hidden" value='<%# DataBinder.Eval(Container.DataItem,"DLY_TYPE")%>' />
                    </ItemTemplate>
                </asp:TemplateColumn>
                <asp:TemplateColumn HeaderText="Destination">
                    <ItemTemplate>
                        <asp:DropDownList ID="ddlDestination" runat="server" CssClass="dropdown form-control user" Width="250px">
                            <asp:ListItem Text="Select" Value=""></asp:ListItem>
                            <asp:ListItem Text="Dest 1" Value="1"></asp:ListItem>
                            <asp:ListItem Text="Dest 2" Value="2"></asp:ListItem>
                        </asp:DropDownList>
                        <input id="txtDestination" runat="server"
                            type="hidden" value='<%# DataBinder.Eval(Container.DataItem,"DLY_DEST")%>' />
                    </ItemTemplate>
                </asp:TemplateColumn>
                <asp:TemplateColumn HeaderText="MSR Basic Freight">
                    <ItemTemplate>
                        <asp:TextBox ID="txtMSRAmount" runat="server" CssClass="form-control"
                            Text='<%# DataBinder.Eval(Container.DataItem,"MSR_AMOUNT")%>'> </asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateColumn>
            </Columns>
        </asp:DataGrid>
        <asp:Button ID="BtnSbmt" runat="server" Text="Submit" />
    </div>
</asp:Content>

Code

protected void Page_Load(object sender, EventArgs e)
{

    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] {
            new DataColumn("DLY_TYPE"),
            new DataColumn("DLY_DEST"),
            new DataColumn("MSR_AMOUNT") });
        dt.Rows.Add("Type 1", "Desc 1", 30);
        dt.Rows.Add("Type 2", "Desc 2", 60);
        dt.Rows.Add("Type 3", "Desc 3", 50);
        dt.Rows.Add("Type 4", "Desc 4", 20);
        gridMSR.DataSource = dt;
        gridMSR.DataBind();
    }
}

Screenshot