Read Method getting called twice

[Craig]

Hey gang - trying to figure out why my read method is getting called twice when a user hits the Search button specified in the template. It's calling this:

.Read(read => read.Action("GetOrders", "SalesOrder").Data("toolbarValue"))

2 times every time the Search is clicked. Any ideas?

Here's the full layout:

 @(Html.Kendo().Grid<SalesOrderSearchResultsViewModel>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(o => o.WarehouseOrderNumber).Title("SO Number").Width(150);
            columns.Command(command => command.Custom("Tracking").Click("getTracking")).Width(100).Title("Tracking");
            columns.Command(command => command.Custom("Serials").Click("getSerials")).Width(100).Title("Serials");
            columns.Bound(o => o.PONumber).Width(150);
            columns.Bound(o => o.EndUserPO).Width(150);
            columns.Bound(o => o.Status).Filterable(f => f.Extra(false).UI("statusFilter").Operators(o=>o.ForString(s=>s.Clear().Contains("Contains")))).Width(100);
            columns.Bound(o => o.DocTypeDesc).Width(150);
            columns.Bound(o => o.ShippingAddress.Name).Title("ShipTo Name").Width(150);
            columns.Bound(o => o.ShippingAddress.City).Width(150);
            columns.Bound(o => o.ShippingAddress.PostalCode).Width(130);
            columns.Bound(o => o.Total).Format("{0:c}").Width(100);
            columns.Bound(o => o.DateEntered).Title("Entered").Format("{0:MM/dd/yyyy}").Width(110);
            columns.Bound(o => o.LastChanged).Title("Changed").Format("{0:MM/dd/yyyy}").Width(110);
            columns.Command(command => command.Custom("Details").Click("getDetails")).Width(100);
        })
        .ToolBar(toolbar => toolbar.ClientTemplate("<text><div class='toolbar'><a role='button' class='k-button k-button-icontext k-grid-excel' href='test'><span class='k-icon k-i-file-excel'></span>Export to Excel</a><span class='core-lbl'>Search: </span><input type='text' name='search' class='k-textbox' id='toolBarInput'/><span class='core-lbl'>Type: </span><input id='searchType' style='width:200px' /><span class='core-lbl'>Start Date: </span> <input id='dpStartDate' title='Start Date' style='width: 130px' /> <span class='core-lbl'>End Date: </span><input id='dpEndDate' title='End Date' style='width: 130px;' />  <button class='k-button' onclick='search()'>Search</button></div></text>"))
        .Sortable()
        .Pageable(p => p.ButtonCount(5).PageSizes(new int[] { 20, 50, 100, 1000, 2000 }).Refresh(true))
        .Filterable()
        .Resizable(r => r.Columns(true))
        .ClientDetailTemplateId("template")
        .Scrollable(scr => scr.Height(800))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("GetOrders", "SalesOrder").Data("toolbarValue"))
            .Sort(sort => sort.Add("LastChanged").Descending())
            .Events(e => e.Error("onError")))
        .Excel(excel => excel
            .FileName("soexport.xlsx")
            //.ProxyURL(Url.Action("ExcelExport", "SalesOrder"))
            .AllPages(false))
        .Events(events => events
            .DataBound("onDataBound"))
    )

Thanks!

Craig

[Viktor Tachev]

Hi Craig,

I examined the code and noticed that the search operation is initiated from a button element. By default a button will have submit behavior. Thus, make sure that you prevent the default operation when re-reading the Grid data.

One approach is to explicitly set the type of the element to button:

<button class='k-button' type="button" onclick='search(event)'>Search</button>

Furthermore, you can call preventDefault in the click event handler:

function search(e) {
    e.preventDefault();

    // custom logic
}

Give the options a try and let me know how the behavior changes. In case the issue is still observed please send us a runnable sample where it is replicated. This will enable us to examine the behavior locally and look for its cause.


Regards,
Viktor Tachev
Progress Telerik