QA@IT
«質問へ戻る

質問を投稿

ASP.NET GridViewコントロールの行列固定後、JavaScriptのgetElementById(GridView)でnullが返る

Grid.jsとGrid.cssを使用し、GridViewコントロールの行列固定を行いました。
その後、GridView内のTextBoxのonchangeイベントでJavaScriptの関数を実行しているのですが、その関数の中のgetElementById(GridView)でnullが返ってきてしまいます。
コードは以下の様になっています。

[.aspx]

<head runat="server">
    <title></title>
    <script src="Scripts/Grid.js" type="text/javascript"></script>
    <link href="Styles/Grid.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        //GridView行列固定関数
        window.onload = function () {
            var tableGridView = 
                document.getElementById("<%=GridView1.ClientID%>");
            var parentElement = tableGridView.parentNode;
            parentElement.setAttribute("id", "myGrid");
            parentElement.setAttribute("class", "style1");

            new Grid("myGrid", {
                srcType: "dom",
                srcData: "<%=GridView1.ClientID%>",
                allowGridResize: true,
                allowColumnResize: true,
                allowSelections: true,
                allowMultipleSelections: true,
                showSelectionColumn: false,
                fixedCols: 1
            });
        };
        //問題が起きている関数
        function aaa() {
            //gridにnullが返る
            var grid = document.getElementById("<%=GridView1.ClientID%>");
            ~略~
        }
   </script> 
    <style type="text/css">
        .style1
        {
            width: 400px;
            height: 360px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" EnableViewState="False" 
          OnRowCreated="GridView1_RowCreated" AutoGenerateColumns="False">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" onchange="aaa()"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server" onchange="aaa()"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </form>
</body>

最終的にaaa()でやりたいこととしては、GridView1内のTextBox1とTextBox2に入力した値を足しTextBox3に入力することです。
getElementById()でnullが返ってきてしまうとTextBoxの値が取得できなくて困っています。
解決策を教えていただけないでしょうか。
よろしくお願いいたします。

Grid.jsとGrid.cssを使用し、GridViewコントロールの行列固定を行いました。
その後、GridView内のTextBoxのonchangeイベントでJavaScriptの関数を実行しているのですが、その関数の中のgetElementById(GridView)でnullが返ってきてしまいます。
コードは以下の様になっています。

[.aspx]
```html
<head runat="server">
    <title></title>
    <script src="Scripts/Grid.js" type="text/javascript"></script>
    <link href="Styles/Grid.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        //GridView行列固定関数
        window.onload = function () {
            var tableGridView = 
                document.getElementById("<%=GridView1.ClientID%>");
            var parentElement = tableGridView.parentNode;
            parentElement.setAttribute("id", "myGrid");
            parentElement.setAttribute("class", "style1");
            
            new Grid("myGrid", {
                srcType: "dom",
                srcData: "<%=GridView1.ClientID%>",
                allowGridResize: true,
                allowColumnResize: true,
                allowSelections: true,
                allowMultipleSelections: true,
                showSelectionColumn: false,
                fixedCols: 1
            });
        };
        //問題が起きている関数
        function aaa() {
            //gridにnullが返る
            var grid = document.getElementById("<%=GridView1.ClientID%>");
            ~略~
        }
   </script> 
    <style type="text/css">
        .style1
        {
            width: 400px;
            height: 360px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" EnableViewState="False" 
          OnRowCreated="GridView1_RowCreated" AutoGenerateColumns="False">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" onchange="aaa()"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server" onchange="aaa()"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </form>
</body>
```
最終的にaaa()でやりたいこととしては、GridView1内のTextBox1とTextBox2に入力した値を足しTextBox3に入力することです。
getElementById()でnullが返ってきてしまうとTextBoxの値が取得できなくて困っています。
解決策を教えていただけないでしょうか。
よろしくお願いいたします。