如何解决ASP.NET DataGrid中JQuery追加行下拉框复制原行的问题？

Hey there! I’ve run into this exact issue before with load-on-demand GridControls—when you append a new row, the dropdowns just copy the original row’s values instead of being properly initialized. Let’s fix this with client-side JavaScript, no backend changes needed.

Step 1: Hook Into the Grid’s Post-Callback Event #

First, we need to detect when a new row has finished being added. Most ASP.NET GridControls fire an EndCallback event after any server-side action (like adding a row) completes on the client. We’ll attach our handler here:

// Replace "yourGridControlClientID" with your GridControl's actual client ID
const grid = ASPxClientControl.GetControlCollection().GetByName("yourGridControlClientID");
grid.EndCallback.AddHandler(onGridRowAdded);

Step 2: Re-Initialize the New Row’s Dropdown #

In the handler, we’ll target the newly added row, clear any copied dropdown values, and re-set up the dropdown properly. Adjust the selectors and logic to match your dropdown type (ASPx client control or plain HTML select):

function onGridRowAdded(s, e) {
    // Get the last visible row (this is the newly appended row)
    const visibleRows = s.GetVisibleRowsOnPage();
    const lastRowIndex = visibleRows[visibleRows.length - 1];
    const rowElement = s.GetRowElement(lastRowIndex);

    // Case 1: If you're using ASPxClientDropDownEdit or similar ASPx dropdown controls
    const aspxDropdown = $(rowElement).find(".your-aspx-dropdown-class");
    if (aspxDropdown.length) {
        const dropdownControl = ASPxClientControl.GetControlCollection().GetByElement(aspxDropdown[0]);
        if (dropdownControl) {
            // Trigger the load-on-demand callback for the dropdown to fetch fresh data
            dropdownControl.PerformCallback();
            // If using local data, re-bind it instead:
            // dropdownControl.SetDataSource(yourLocalDataSourceArray);
            // dropdownControl.DataBind();
        }
    }

    // Case 2: If you're using a plain HTML <select> element
    const htmlSelect = $(rowElement).find(".your-html-select-class");
    if (htmlSelect.length) {
        // Clear copied options first
        htmlSelect.empty();
        // Add your fresh options (replace with your actual data source)
        htmlSelect.append('<option value="">Select an option...</option>');
        htmlSelect.append('<option value="opt1">Option 1</option>');
        htmlSelect.append('<option value="opt2">Option 2</option>');
    }
}

Step 3: Reuse Your Existing Dropdown Initialization Logic #

If you already have a function that initializes dropdowns for your grid rows (e.g., for load-on-demand binding), just call that function on the new row’s dropdown element instead of writing new logic. For example:

// Your existing dropdown init function
function initGridDropdown(dropdownElement) {
    // Your existing logic here—e.g., binding Select2, setting up AJAX load, etc.
    $(dropdownElement).select2({
        ajax: {
            url: "/your-load-on-demand-url",
            dataType: "json"
        }
    });
}

// Call it in the EndCallback handler
function onGridRowAdded(s, e) {
    // ... get rowElement as before
    const dropdown = $(rowElement).find(".your-dropdown-class");
    if (dropdown.length) {
        initGridDropdown(dropdown[0]);
    }
}

Key Notes: #

• Replace all placeholder values (like yourGridControlClientID, your-aspx-dropdown-class) with your actual control IDs and class names.
• If your load-on-demand dropdown uses a specific client-side API (like PerformCallback() for ASPx controls), make sure to use that to refresh the data instead of hardcoding options.

内容的提问来源于stack exchange，提问作者Robert Koernke