Read Method getting called twice

2 posts, 0 answers
  1. Craig
    Craig avatar
    11 posts
    Member since:
    Sep 2017

    Posted 26 Jan 2018 Link to this post

    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:

            .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>"))
            .Pageable(p => p.ButtonCount(5).PageSizes(new int[] { 20, 50, 100, 1000, 2000 }).Refresh(true))
            .Resizable(r => r.Columns(true))
            .Scrollable(scr => scr.Height(800))
            .DataSource(dataSource => dataSource
                .Read(read => read.Action("GetOrders", "SalesOrder").Data("toolbarValue"))
                .Sort(sort => sort.Add("LastChanged").Descending())
                .Events(e => e.Error("onError")))
            .Excel(excel => excel
                //.ProxyURL(Url.Action("ExcelExport", "SalesOrder"))
            .Events(events => events



  2. Viktor Tachev
    Viktor Tachev avatar
    2491 posts

    Posted 30 Jan 2018 Link to this post

    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) {
        // 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.

    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top