asp.net textbox clientside lost focus event in listview control

// Assuming you have a reference to the table element with ID "myTable" in your JavaScript code
var table = document.getElementById("myTable");

// Attach an event listener for the keydown event on the table
table.addEventListener("keydown", function (event) {
    // Check if the pressed key is the Tab key
    if (event.key === "Tab") {
        // Get the target element that triggered the event
        var target = event.target;
        
        // Check if the target element is an input field and has a class or ID to identify it as the Quantity input field
        if (target.tagName === "INPUT" && target.classList.contains("quantity-input")) {
            // Retrieve the row identifier from the closest parent row
            var row = target.closest("tr");
            var rowId = row.dataset.rowId; // Assuming you have a data attribute named "rowId"
            
            // Perform further processing based on the row identifier
            // For example, update the Total Tokens label for the corresponding row
            updateTotalTokens(rowId);
        }
    }
});

// Function to update the Total Tokens label for the specified row
function updateTotalTokens(rowId) {
    // Retrieve the Quantity and Tokens Required values from the input fields in the specified row
    var quantity = parseFloat(document.querySelector(`tr[data-row-id="${rowId}"] .quantity-input`).value);
    var tokensReq = parseFloat(document.querySelector(`tr[data-row-id="${rowId}"] .tokens-req-input`).value);
    
    // Calculate the Total Tokens
    var totalTokens = quantity * tokensReq;
    
    // Update the Total Tokens label for the corresponding row
    document.querySelector(`tr[data-row-id="${rowId}"] .total-tokens-label`).textContent = totalTokens;
}

assume that each row in your table has a unique identifier stored in a data attribute (e.g., data-row-id). Adjust the code according to your specific HTML structure and requirements.

To get a reference to the row when a user enters the Quantity and clicks on Tab, you can utilize event delegation. Event delegation allows you to attach an event listener to a parent element (like a table) and then handle events for its child elements (like rows or cells). This way, you can dynamically determine which row the event originated from.

To achieve this, you can use JavaScript to handle the onblur event of the second TextBox (txtQty) and calculate the total tokens required. Then, update the corresponding Label (lblTotalTokens) within the same row of the ListView. Here is a step-by-step solution:

1. Add onblur Event Handler to txtQty: Attach an onblur event to txtQty to trigger the calculation when the user leaves the textbox.
2. Get References to Controls in the Same Row: Use JavaScript to traverse the DOM and find the controls within the same row as txtQty.
3. Perform Calculation and Update lblTotalTokens: Multiply the values of txtTokensReq and txtQty, then update the lblTotalTokens with the result.

Here is the updated ASP.NET code with the JavaScript function:

Explanation:

1. Event Handler: The onblur event is added directly to txtQty using the onblur="calculateTotalTokens(this)" attribute.
2. JavaScript Function (calculateTotalTokens):
   • The calculateTotalTokens function receives the txtQty element that triggered the event.
   • It finds the parent row of this element using closest('.row').
   • Within this row, it locates the txtTokensReq and lblTotalTokens elements using querySelector.
   • It retrieves the values from txtTokensReq and txtQty, converts them to numbers, performs the multiplication, and updates lblTotalTokens with the result.

This solution ensures that the calculation is performed correctly and only once per user interaction. The use of closest and querySelector ensures that the JavaScript code is focused on the specific row where the event was triggered, thus avoiding any potential issues with duplicate control IDs.

Thank you Namish & Jayraj, but the main question here is how to get the reference to the row when a user enters the Quantity and click on Tab? 

To address the multiple firing of the onblur event in the second textbox, you can ensure that the event is attached only once. One way to achieve this is by using jQuery to bind the event.

$(document).ready(function () {
    $('#<%= txtQty.ClientID %>').on('blur', function () {
        var tokensReq = parseInt($('#<%= txtTokensReq.ClientID %>').val());
        var qty = parseInt($(this).val());
        var totalTokens = tokensReq * qty;
        $('#<%= lblTotalTokens.ClientID %>').text(totalTokens);
    });
});

By binding the blur event using jQuery in this manner, you can ensure that the event is attached only once, preventing multiple firing issues. This approach should help you calculate the total tokens and display the result accurately in the lblTotalTokens label on the client-side.

Certainly! To achieve the desired behavior of calculating txtTokensReq * txtQty and displaying the result in lblTotalTokens when the user inputs a value in the second textbox and loses focus, you can follow these steps:

1. Client-Side Event Handling:

   • You mentioned that you want to handle this on the client side. We can use JavaScript to achieve this.
   • Instead of using the onblur event directly on the second textbox, we’ll attach an event listener to it.

2. JavaScript Implementation:

   • First, ensure that you have a reference to the second textbox (with ID txtQty) in your JavaScript code.
   • Next, add an event listener to the txtQty textbox for the blur event.
   • In the event handler, calculate the product of txtTokensReq and txtQty, and update the lblTotalTokens accordingly.

Here’s an example of how you can achieve this:

1. Additional Considerations:
   • Make sure that the IDs (txtTokensReq, txtQty, and lblTotalTokens) match the actual IDs in your markup.
   • Ensure that the values entered by the user are valid numeric values (you can add validation if needed).

Remember to adjust the code according to your specific scenario and any additional requirements you might have. If you encounter any issues or need further assistance, feel free to ask! ??

References:

1. Stack Overflow: ASP.NET Textbox Clientside Lost Focus Event in ListView Control
2. Handling Side Lost Focus Event in ASP.NET ListViewControl with Two Textboxes1
3. Stack Overflow: Lost Focus Method for ASP.NET Textbox2

Thanks