Kendo UI Grid, настройка страницы на 1 без двойной обратной передачи

У меня есть следующий код на странице.

Проблема в том, что при нажатии кнопки «MainSearchSubmit» метод «RefreshGrid()» приводит к двум последующим вызовам ajax на сервер. Я обнаружил, что это связано с тем, что вызовы «datasource.read()» и «datasource.page(1)» отправляются обратно на сервер (они оба запускают метод read() источника данных).

Мне все еще нужно установить страницу сетки на 1 при нажатии кнопки поиска, потому что в противном случае кто-то может быть на странице 3, затем нажать кнопку поиска, получить обновленные результаты, но все еще быть на странице 3. Их нужно сбросить на страницу 1 при нажатии кнопки поиска.

Также мне все еще нужно запустить read(), потому что в противном случае обновленные параметры не передаются и данные не обновляются.

Я нашел похожие сообщения, в некоторых из которых люди предлагали использовать метод .query(). Я попробовал это (код закомментирован в методе «RefreshGrid()»), но это также привело к 2 сообщениям на сервер.

Любые идеи о том, как я могу это исправить?

Код:

    <script>
         $(document).ready(InitializeNDCMapping);

         function InitializeMainMapping() {
             $("#MainSearchSubmit").click(function (e) {
             RefreshGrid();
             e.preventDefault();
         });
      }

        function RefreshGrid() {
             $("#MainListGrid").data("kendoGrid").dataSource.read();
             $("#MainListGrid").data("kendoGrid").dataSource.page(1);

             //Defunct code
             //var dataSource1 = $("#NDCListGrid").data("kendoGrid").dataSource;

             //dataSource.query({
             //   read: dataSource1.read(),
             //   page: dataSource1.Page(1),
             //   pagesize: dataSource1.PageSize(25)
             //});
         }
    </script>

    <div class="search-buttons">
         <input type="submit" value="Search" id="MainSearchSubmit" />
         <input type="button" value="Reset" onclick="ResetMainSearch()" />
    </div>
    <div>
        @(Html.Kendo().Grid<BackOffice.ViewModels.NDCItem>()
                .Name("MainListGrid")
                .Filterable()
                .Pageable(p => p.PageSizes(new int[] { 25, 50, 100 }).Input(true)
                                .Messages(m=>m.Empty("No Main-Ingredient found")).Numeric(false))
                .Sortable()
                .Navigatable()
                .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
                .Columns(columns =>
                {
                    columns.Bound(l => l.NDCCode).Title("NDC Code").Width("5%")
                        .ClientTemplate(@Html.DialogFormLink("#=NDCCode#", Url.Action("NDCMappingEdit", new { NDCCode = "#=NDCCode#", mainMultumDrugCode = "#=MainMultumDrugCode#", drugId = "#=DrugId#", isMapped = "#=IsMapped#" }), "NDC Mapping", "", "", "NDCDialogLink", "1100", "600", "").ToHtmlString());
                    columns.Bound(l => l.Name).Title("Generic Name").Width("15%");
                    columns.Bound(l => l.MainCode).Hidden();
                    columns.Bound(l => l.MainId).Hidden();
                    columns.Bound(l => l.MainDescription).Title("Main Description").Width("15%");
                    columns.Bound(l => l.MainIngredientCode).Hidden();
                    columns.Bound(l => l.MainIngredient).Title("Main Ingredient").Width("15%");
                    columns.Bound(l => l.MainNumAmount).Title("Main Qty").Width("5%");
                    columns.Bound(l => l.MainNum).Title("Main Unit").Width("5%");
                    columns.Bound(l => l.MainDenomAmount).Title("Main Denom").Width("5%");
                    columns.Bound(l => l.MainDenom).Title("Main Denom Unit").Width("5%");
                    columns.Bound(l => l.IsMapped).Title("Mapped").Width("5%").Filterable(false).Sortable(false)
                        .ClientTemplate("<input type='checkbox' name='selected_#=MainCode#' class='chkbx select'" + "#= IsMapped ? 'checked' : ''#" + " />")
                        .HtmlAttributes(new { @class = "center", @onclick = "return false" })
                        .HeaderHtmlAttributes(new { @class = "center" });                                
                })
                .AutoBind(false)
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .ServerOperation(false)
                    .Read(read => read.Action("MainList_Read", "Drug").Data("getRouteParams"))
                    .Model(model =>
                    {
                        model.Field(f => f.MainCode).Editable(false);
                        model.Field(f => f.MainName).Editable(false);
                        model.Field(f => f.MainDCCode).Editable(false);
                        model.Field(f => f.MainId).Editable(false);
                        model.Field(f => f.MainDescription).Editable(false);
                        model.Field(f => f.MainIngredientCode).Editable(false);
                        model.Field(f => f.MainIngredient).Editable(false);
                        model.Field(f => f.MainNumAmount).Editable(false);
                        model.Field(f => f.MainNum).Editable(false);
                        model.Field(f => f.MainDenomAmount).Editable(false);
                        model.Field(f => f.MainDenom).Editable(false);
                        model.Field(f => f.IsMapped).Editable(false);
                    })
                    .PageSize(25)
                    .Events(events => events.Error("MainRead_Error"))

                )
            )
    </div>

person mgmedick    schedule 13.11.2015    source источник


Ответы (2)


В прошлом, когда у меня возникали подобные проблемы, это почти всегда было из-за того, что обработчик щелчка был зарегистрирован дважды, и даже если пользователь щелкнул кнопку один раз, обработчик выполнился дважды.

Где вы вызываете InitializeMainMapping()? Кроме того, я не уверен, что это ошибка копирования и вставки, но в InitializeMainMapping() отсутствует закрывающий }. Получаете ли вы какие-либо ошибки javascript, когда пользователь нажимает кнопку?

Всего несколько идей для начала.

person dpdragnev    schedule 13.11.2015
comment
Спасибо, что вернулись ко мне. Отсутствующая скобка в InitializeMainMapping() была ошибкой копирования и вставки, я исправил ее. Когда я просто делаю $(#MainListGrid).data(kendoGrid).dataSource.read(), на сервер делается только один вызов ajax. Когда дополнительный $(#MainListGrid).data(kendoGrid).dataSource.page(1) выполнен, он делает второй вызов ajax. Но мне все еще нужно установить эту страницу. - person mgmedick; 15.11.2015
comment
Я рад, что вы смогли найти решение. :) - person dpdragnev; 16.11.2015

Я смог найти решение. Если страница уже установлена ​​на 1 и вы запускаете...

grid.dataSource.page(1);

Это приводит к чтению. В противном случае, если страница еще не установлена ​​в 1, и вы запускаете приведенный выше код, это не приводит к чтению. Итак, решение проблемы ниже.

if (grid.dataSource.page() != 1) {
    grid.dataSource.page(1);
}

grid.dataSource.read( {parameter: "value"} );

Нашел это решение здесь:

KendoUI: сброс данных сетки на первую страницу после нажатия кнопки< /а>

person mgmedick    schedule 14.11.2015