Extract the initial line in the grid

Question

Extract the initial line in the grid

I was wondering if there is a way to automatically copy the first value of a row in a grid to all the remaining rows. For example, if I have two columns A and B, and I input a value in column B at the first row, can that value be automatically populated in all other rows?

**Serial**   **CartNum**   Output **CartNum**
    1             1                    1
    2                                  1
    3                                  1
    4                                  1

Is this achievable? I am working with ASP.NET (VB) and JavaScript for this task.

Below is the code snippet for my grid:

<div class="Scrolls">
  <asp:DataGrid runat="server" ID="dgSerial" AutoGenerateColumns="false" ShowFooter="false" ShowHeader="false" GridLines="None" DataKeyField="BaseLineNum" AlternatingItemStyle-CssClass="AlternateGrid">
    <Columns>
      <asp:TemplateColumn>
        <ItemTemplate>
          <table border="0" style="border-bottom: 1px dotted; border-color: #FF0000">
            <tr>
              <td style="width: 20px;">
                <asp:CheckBox runat="server" ID="chkSelect"></asp:CheckBox>
              </td>
              <td style="width: 120px;">
                <asp:TextBox Width="120" ID="SerialNum" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "SerialNum")%>' />
              </td>
              <td style="width: 120px;">
                <asp:TextBox Width="120" ID="CartNum" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CartNum")%>' />
              </td>
            </tr>
          </table>
        </ItemTemplate>
      </asp:TemplateColumn>
    </Columns>
  </asp:DataGrid>
</div>

I appreciate any insights or guidance on how to achieve this functionality. Thank you!

javascript asp.net

Answer 1

Answer №1

To implement the necessary changes, you need to adjust your second row template as shown below:

<asp:TextBox Width="120" ID="CartNum" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CartNum")%>'
  onchange="javascript: copy();" CssClass="row2"/>

Next, incorporate the Javascript functionality:

<script type="text/javascript>
  function copy() {
    var cells = document.getElementsByClassName("row2");
    for(var i = 1; i < cells.length; i++)
      cells[i].value = cells[0].value;
  }
</script>

I haven't been able to test this yet, so there may be some tweaking required for optimal performance.

Keep in mind that the script retrieves values from the first cell of the column (cells[0]), aligning with the specifics of your query.

Answer 2

To implement the necessary changes, you need to adjust your second row template as shown below:

<asp:TextBox Width="120" ID="CartNum" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CartNum")%>'
  onchange="javascript: copy();" CssClass="row2"/>

Next, incorporate the Javascript functionality:

<script type="text/javascript>
  function copy() {
    var cells = document.getElementsByClassName("row2");
    for(var i = 1; i < cells.length; i++)
      cells[i].value = cells[0].value;
  }
</script>

I haven't been able to test this yet, so there may be some tweaking required for optimal performance.

Keep in mind that the script retrieves values from the first cell of the column (cells[0]), aligning with the specifics of your query.

Answer 3

Answer №2

Feel free to give this a try for assistance:

<script type="text/javascript">
function replicateName(){
    var inputCount = document.getElementById('tableId').getElementsByTagName('input').length;
    var name = document.getElementById('name').value;
    for(i=1;i<=inputCount;i++){
    document.getElementById('name_'+i).value = name;
    }
}
</script>
<table id="tableId">
<tr>
<td>
    <input type="text" id="name" onkeyup="replicateName();" name="name" />
    <input type="text" id="name_1" name="name_1" />
    <input type="text" id="name_2" name="name_2" />
    <input type="text" id="name_3" name="name_3" />
    <input type="text" id="name_4" name="name_4" />
</td>
</tr>
</table>

Answer 4

Feel free to give this a try for assistance:

<script type="text/javascript">
function replicateName(){
    var inputCount = document.getElementById('tableId').getElementsByTagName('input').length;
    var name = document.getElementById('name').value;
    for(i=1;i<=inputCount;i++){
    document.getElementById('name_'+i).value = name;
    }
}
</script>
<table id="tableId">
<tr>
<td>
    <input type="text" id="name" onkeyup="replicateName();" name="name" />
    <input type="text" id="name_1" name="name_1" />
    <input type="text" id="name_2" name="name_2" />
    <input type="text" id="name_3" name="name_3" />
    <input type="text" id="name_4" name="name_4" />
</td>
</tr>
</table>

Extract the initial line in the grid

Answer №1

Answer №2

Similar questions

Tips for transferring a variable to another .php file using ajax

Import the controller, factory, service, and directive files using Browserify

Using an external HTML file to import a template into Vue.js single file components

Using Javascript to group elements by JSON data

Creating an event within a class that is generated dynamically when hovering

Is there a straightforward method to retrieve all information from Vue.js?

Is utilizing React function components the most effective solution for this problem?

Troubleshooting issue with password validation not functioning correctly within the Joi schema in React

How can we avoid multiple taps on Ext.Button in Sencha Touch?

What could be causing the <img src= ' '/> tag to malfunction in Express?

How can I align Javascript output vertically in the middle?

Guide to importing Bootstrap 5 bundle js using npm

Troubleshooting issue in App component while utilizing React-Redux's 'connect' function

Create HTML content on the fly and ensure its validity

"Error encountered: Route class unable to reach local function in TypeScript Express application" #codingissues

Issues with javascript and php carousel functionality not performing correctly

Guide to linking an external URL with a lightbox image

Is it necessary for me to create distinct MongoDB models in individual files?

Guidelines for implementing a seamless translation effect with CSS3

Embedding Views in a <td> tag with DataTables and Ember.js