如何在JavaScript中获取Inline Grid的kendoComboBox值并传至后端

Got it, let's get your combo box's input value sent to your backend controller so you can return matching usernames. Here's what you need to do:

The Issue Right Now #

Your userNameEditor has serverFiltering: true, but you're not passing the typed input value to your SearchUser endpoint. Kendo's DataSource needs a clear way to send that text to your backend for filtering.

Solution: Pass the Input Value via Transport Configuration #

You can modify your combo box's DataSource transport to include the input text as a query parameter. There are two clean, straightforward ways to do this:

1. Use data Function in Read Configuration

This lets you directly attach the input value to the read request with minimal code:

function userNameEditor(container, options) { 
    const input = $('<input required data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoComboBox({ 
            dataTextField: "UserName", 
            dataValueField: "UserId", 
            filter: "contains", 
            minLength: 3, 
            dataSource: new kendo.data.DataSource({ 
                transport: { 
                    contentType: "application/json; charset=utf-8", 
                    serverFiltering: true, 
                    read: { 
                        url: "../Warehouse/SearchUser",
                        // Add this data function to send the input text
                        data: function() {
                            // Get the combo box instance from the input element
                            const combo = input.data("kendoComboBox");
                            // Return the typed text as a query parameter
                            return { searchText: combo.text() };
                        }
                    }
                } 
            }) 
        }).data("kendoComboBox");
}

2. Use parameterMap for More Control

If you need to handle multiple parameters or format data before sending, parameterMap gives you greater flexibility:

function userNameEditor(container, options) { 
    const input = $('<input required data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoComboBox({ 
            dataTextField: "UserName", 
            dataValueField: "UserId", 
            filter: "contains", 
            minLength: 3, 
            dataSource: new kendo.data.DataSource({ 
                transport: { 
                    contentType: "application/json; charset=utf-8", 
                    serverFiltering: true, 
                    read: { 
                        url: "../Warehouse/SearchUser"
                    },
                    parameterMap: function(data, type) {
                        if (type === "read") {
                            const combo = input.data("kendoComboBox");
                            // Send custom parameters (or use Kendo's built-in filter if needed)
                            return { 
                                searchText: combo.text(),
                                // Optional: Pass Kendo's auto-generated filter object if your backend uses it
                                // filter: JSON.stringify(data.filter)
                            };
                        }
                        return JSON.stringify(data);
                    }
                } 
            }) 
        }).data("kendoComboBox");
}

Backend Controller Setup #

Now update your SearchUser action to receive the searchText parameter and return matching users. For example, in C#:

public ActionResult SearchUser(string searchText)
{
    // Query your database for users where UserName contains the searchText
    var matchingUsers = _userRepository.GetUsers(u => u.UserName.Contains(searchText));
    
    // Return as JSON for the combo box to render
    return Json(matchingUsers, JsonRequestBehavior.AllowGet);
}

Key Notes #

• The minLength: 3 ensures the request only triggers after the user types 3 characters, reducing unnecessary backend calls.
• Using combo.text() gets the exact text the user typed (not the selected value), which is perfect for your "contains" filter logic.
• If you prefer to use Kendo's native filter format, you can pass data.filter (stringified) instead of searchText—just make sure your backend parses that filter object correctly.

内容的提问来源于stack exchange，提问作者merve şahinoglu