Kendo Grid внешняя фильтрация

Question

Я применил внешнюю фильтрацию к моей сетке кендо, которая отлично работает с одним текстовым полем и кнопкой. Но теперь мне нужно добавить еще одно текстовое поле и кнопку над сеткой и на основе нажатой кнопки вызвать соответствующий метод.

    //add 2 text boxes and 2 buttons  
    <div style="margin-bottom: 5px;">
    @Html.TextBox("compSearch", (string)TempData["searchString"], new { id = "txtCompanySearch", style = "width: 400px;" })
    <button id="searchButton" class="button" type="button" style="text-align:center;" onclick="searchAccounts()">
        <span>Search</span>
        <img src="~/Content/images/magnifier.png" />
    </button>
    <input type="hidden" id="hdnSrchString" value="@ViewBag.searchString" />

    @Html.TextBox("compSearchByMasterRateSheetId", (string)TempData["searchStringMRS"], new { id = "txtCompanySearchByMasterRateSheetId", style = "width: 400px;" })
    <button id="searchByMasterRateSheetIdButton" class="button" type="button" style="text-align:center;" onclick="searchAccountsMRS()">
        <span>Search By Master Rate Sheet ID</span>
        <img src="~/Content/images/magnifier.png" />
    </button>
    <input type="hidden" id="hdnSrchStringMRS" value="@ViewBag.searchStringMRS" />

</div>

<div class="k-content">



  @(Html.Kendo().Grid<Customer>()
                .Name("accountsGrid")
            .Columns(col =>
            {
                col.Bound(c => c.CustomerName).Title("Account").Width("30%");
                col.Bound(c => c.SourceSystemId).Title("B ID").Width("20%");
                col.Bound(c => c.AccountManager).Title("Account Manager").Width("30%");
                col.Bound(c => c.IsExternalQuotingEnabled).Title("External Quoting Enabled?").Width("20%");
            })
            .SetLevel3Defaults(Model)
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("GetCompanyInfo", "Home").Data("additionalData"))
                .PageSize(20)                  
            )
)

GetCompanyInfo вызывает сохраненный процесс, а AdditionalData считывает текст в первом текстовом поле.

function additionalData() {
        return {
            searchString: $("#txtCompanySearch").val()
        }
    }

Все это работает для 1-го текстового поля и нажатия кнопки. Мне нужно прочитать 2-й блок, когда нажата 2-я кнопка, и вызвать соответствующий сохраненный процесс, чтобы обновить сохраненный процесс. Пожалуйста, порекомендуйте.

Answer 1

Для этого сценария вы можете использовать глобальную переменную, которая устанавливается любым из обработчиков щелчков, а затем используется AdditionalData().

Случай 1: оба поля используют один и тот же дополнительный элемент данных

var searchTerm;
function handler1 () { searchTerm = $("#box1").val(); }
function handler2 () { searchTerm = $("#box2").val(); }
function additionalData() { return { searchString: searchTerm } }

Случай 2: каждый блок требует отдельного элемента данных

var searchData;
function handler1 () { searchData = { searchString:    $("#box1").val()}; }
function handler2 () { searchData = { searchStringMRS: $("#box2").val()}; }
function additionalData() { return searchData; }

Вам нужно будет установить начальный searchTerm или searchData в соответствии с начальной загрузкой страницы.