Kendo UI Grid, setting page to 1 without double postback

Question

I have the following code on a page.

The problem is that when the "MainSearchSubmit" button is clicked the method "RefreshGrid()" is resulting in 2 subsequent ajax calls to the server. I found this is because the call to "datasource.read()" and "datasource.page(1)" are both posting back to the server (they are both running the read() method of the dataSource).

I still need to set the grid page to 1 when the search button is clicked because otherwise someone can be on page 3, then click the search button, get the updated results, but still be on page 3. They need to be reset to page 1 when the click the search button.

Also I still need to run the read() because otherwise the updated parameters are not passed and the data is not refreshed.

I've found similar posts, some with people suggesting using the .query() method. I tried that (code commented out in "RefreshGrid()" method), but that was also resulting in 2 posts to the server.

Any ideas on how I can fix this?

Code:

    <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>

Answer 1

I was able to find the solution. If the page is already set to 1 and you run...

grid.dataSource.page(1);

This results in a read. Otherwise if the page is not yet set to 1 and you run the code above it doesn't result in a read. So the solution to the issue is below.

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

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

Found this solution here:

KendoUI: resetting grid data to first page after button click

Answer 2

In the past, when I had similar problems, it was almost always because the click handler was registered twice and even though the user clicked the button once, the handler executed twice.

Where do you call InitializeMainMapping()? Also, I am not sure if this is a copy and paste error, but the InitializeMainMapping() is missing a closing }. Are you getting any javascript errors when the user clicks on the button?

Just a few ideas to get you started.