[Solved] JavaScript className property not working with ASP.Net GridView

makumbi
 
on Jun 30, 2022 08:39 AM
238 Views

I try editing a remarks column it is not detected as a class name but when i use score in updating it is detected

please help

<script type="text/javascript">
function GetSelectedRow(UserLink) {
    var row = UserLink.parentNode.parentNode;
    var rowIndex = row.rowIndex - 1;
    var userId = row.cells[0].innerHTML;
    var lable = row.getElementsByTagName("input")[5].value;
    if (lable == null || lable == "") {
    //if (lable == 100){
        // row.getElementsByTagName("input")[8].value = "d";
      
        return true;
    }
    if (lable >= 0 && lable <= 100) {
        return true;
    }
    else {
        alert("Must be between 1 and 100");
        return false;
    }
}
</script>
    
<script type="text/javascript">
    function enter(obj) {
        var tr = obj.parentNode.parentNode;
        var cellIndex = obj.parentNode.cellIndex;
        var rowIndex = obj.parentNode.parentNode.rowIndex;
        if (event.keyCode == 37) //Left
        {
            if (cellIndex > 0)
                tr.parentNode.rows[rowIndex].cells[cellIndex - 1].getElementsByTagName('INPUT')[0].focus();
            GetSelectedRow(obj)
            // return;
        }
        if (event.keyCode == 38) //Up
        {
            if (rowIndex > 1)
                tr.parentNode.rows[rowIndex - 1].cells[cellIndex].getElementsByTagName('INPUT')[0].focus();
            GetSelectedRow(obj)
           // return;
        }
        if (event.keyCode == 39) //Right
        {
            if (cellIndex < tr.cells.length - 1)
                tr.parentNode.rows[rowIndex].cells[cellIndex + 1].getElementsByTagName('INPUT')[0].focus();
            GetSelectedRow(obj)
            //return;
        }
        if (event.keyCode == 40) //Down
        {
            if (rowIndex < tr.parentNode.rows.length - 1)
                tr.parentNode.rows[rowIndex + 1].cells[cellIndex].getElementsByTagName('INPUT')[0].focus();
            GetSelectedRow(obj)
         //return;
        }
    };
   
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                var rowIndex = parseInt(document.getElementById("hfRowIndex").value);
                var row = document.getElementById("StudentGridMarks").rows[rowIndex + 2];
                    if (typeof (row) != "undefined") {
                        var controls = row.getElementsByTagName("INPUT");
                    for (var i = 0; i < controls.length; i++) {
                        switch (controls[i].className) {                            
                            case "Remarks":
                                controls[i].focus();
                                break;
                                return;
                            case "Score":
                                controls[i].focus();
                                return;
                                break;
                            default:
                        }
                    }
                }
            }        
        });
    }
</script>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 01, 2022 11:18 PM

Hi makumbi,

You need to reference the particular cell in the row where you can find the TextBox.

For that you need to set the cellIndex on TextChanged event.

Refer the updated code.

HTML

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:GridView ID="StudentGridMarks" runat="server" AllowPaging="True" AutoGenerateColumns="False" PageSize="45">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:CheckBox ID="chkAll" runat="server" AutoPostBack="true" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" Enabled="False" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Admno">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox3" runat="server" Text='<%# Eval("admno") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label3" runat="server" Text='<%# Bind("admno") %>' Visible="False"></asp:Label>
                        <asp:TextBox ID="admno" runat="server" Text='<%# Eval("admno") %>' Height="16px" Width="93px" ReadOnly="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Name">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("Name") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:TextBox ID="Name" runat="server" Text='<%# Eval("Name") %>' Height="16px" Width="186px" ReadOnly="True"></asp:TextBox>
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("Name") %>' Visible="False"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Class">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server" Text='<%# Eval("Class") %>' Height="16px" Width="58px"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" Text='<%# Bind("Class") %>' Visible="False"></asp:Label>
                        <asp:TextBox ID="Class" runat="server" Text='<%# Eval("Class") %>' Height="16px" Width="32px" ReadOnly="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Stream">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox4" runat="server" Height="16px" Text='<%# Bind("Stream") %>' Width="42px"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label4" runat="server" Text='<%# Bind("Stream") %>' Visible="False"></asp:Label>
                        <asp:TextBox ID="Stream" runat="server" Height="16px" Text='<%# Eval("Stream") %>' Width="41px" ReadOnly="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Score">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("Score") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label5" runat="server" Text='<%# Bind("Score") %>' Visible="False"></asp:Label>
                        <asp:TextBox ID="Score" runat="server" Text='<%#Eval("score") %>' CssClass="Score" onkeyup="enter(this)"
                            AutoPostBack="true" OnTextChanged="Score_TextChanged" Height="16px" Width="31px"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Agg">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox6" runat="server" Text='<%# Bind("Grade") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label6" runat="server" Text='<%# Bind("Grade") %>' Visible="False"></asp:Label>
                        <asp:TextBox ID="Agg" runat="server" Height="16px" ReadOnly="True" Text='<%# Eval("Grade") %>' Width="29px"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Remarks">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox7" runat="server" Text='<%# Bind("Remark") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label7" runat="server" Text='<%# Bind("Remark") %>' Visible="False"></asp:Label>
                        <asp:TextBox ID="Remarks" runat="server" Text='<%# Eval("Remark") %>' CssClass="Remarks"
                            AutoPostBack="True" OnTextChanged="Remarks_TextChanged" Height="18px" onkeyup="enter(this)" Width="431px"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="UserName">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label8" runat="server" Visible="false"></asp:Label>
                        <asp:TextBox ID="UserName" runat="server" Text='<%# Eval("Username") %>' Height="16px" Width="106px"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="DateTime">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox9" runat="server"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label9" runat="server" Visible="False"></asp:Label>
                        <asp:TextBox ID="DateTime" runat="server" Height="16px" Text='<%# Eval("time") %>' Width="151px" ReadOnly="True"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:HiddenField ID="hfRowIndex" runat="server" />
        <asp:HiddenField ID="hfCellIndex" runat="server" />
        <asp:Label ID="lblTotal" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
    function GetSelectedRow(UserLink) {
        var row = UserLink.parentNode.parentNode;
        var rowIndex = row.rowIndex - 1;
        var userId = row.cells[0].innerHTML;
        var lable = row.getElementsByTagName("INPUT")[5].value;
        if (lable == null || lable == "") {
            return true;
        }
        if (lable >= 0 && lable <= 100) {
            return true;
        }
        else {
            alert("Must be between 1 and 100");
            return false;
        }
    };

    function enter(obj) {
        var tr = obj.parentNode.parentNode;
        var cellIndex = obj.parentNode.cellIndex;
        var rowIndex = obj.parentNode.parentNode.rowIndex;
        if (event.keyCode == 37) //Left
        {
            if (cellIndex > 0)
                tr.parentNode.rows[rowIndex].cells[cellIndex - 1].getElementsByTagName('INPUT')[0].focus();
            GetSelectedRow(obj)
            //return;
        }
        if (event.keyCode == 38) //Up
        {
            if (rowIndex > 1)
                tr.parentNode.rows[rowIndex - 1].cells[cellIndex].getElementsByTagName('INPUT')[0].focus();
            GetSelectedRow(obj)
            //return;
        }
        if (event.keyCode == 39) //Right
        {
            if (cellIndex < tr.cells.length - 1)
                tr.parentNode.rows[rowIndex].cells[cellIndex + 1].getElementsByTagName('INPUT')[0].focus();
            GetSelectedRow(obj)
            //return;
        }
        if (event.keyCode == 40) //Down
        {
            if (rowIndex < tr.parentNode.rows.length - 1)
                tr.parentNode.rows[rowIndex + 1].cells[cellIndex].getElementsByTagName('INPUT')[0].focus();
            GetSelectedRow(obj)
            //return;
        }
    };

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                var rowIndex = parseInt(document.getElementById("hfRowIndex").value);
                var row = document.getElementById("StudentGridMarks").rows[rowIndex + 2];
                if (typeof (row) != "undefined") {
                    var celIndex = parseInt(document.getElementById("hfCellIndex").value);
                    var controls = row.cells[celIndex].getElementsByTagName("INPUT");
                    for (var i = 0; i < controls.length; i++) {
                        switch (controls[i].className) {
                            case "Remarks":
                                controls[i].focus();
                                return;
                                break;
                            case "Score":
                                controls[i].focus();
                                return;
                                break;
                            default:
                        }
                    }
                }
            }
        });
    }
</script>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if(!this.IsPostBack)
    {
        this.BindGrid();
    }
}

private void BindGrid()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[9] {
                        new DataColumn("admno"),
                        new DataColumn("Name"),
                        new DataColumn("Class"),
                        new DataColumn("Stream"),
                        new DataColumn("Score"),
                        new DataColumn("Grade"),
                        new DataColumn("Remark"),
                        new DataColumn("Username"),
                        new DataColumn("time"),
    });
    dt.Rows.Add(1,"Admin", "FYJC", "Science", 200, "A", "Good", "Admin", "12:00:00" );
    dt.Rows.Add(2, "Admin", "FYJC", "Science", 200, "A", "Good", "Admin", "12:00:00");
    StudentGridMarks.DataSource = dt;
    StudentGridMarks.DataBind();
}

protected void Score_TextChanged(object sender, EventArgs e)
{
    GridViewRow row = (sender as TextBox).NamingContainer as GridViewRow;
    hfRowIndex.Value = row.RowIndex.ToString();
    hfCellIndex.Value = "5";
}

protected void Remarks_TextChanged(object sender, EventArgs e)
{
    GridViewRow row = (sender as TextBox).NamingContainer as GridViewRow;
    hfRowIndex.Value = row.RowIndex.ToString();
    hfCellIndex.Value = "7";
}

Screenshot