How make kendo ui async in ASP.NET MVC

Question

I have an ASP.NET MVC project. The cshtml is as following:

<div class="container">
<div class="PublicInfo form-group">
    <div class="dividerBar">
        <div class="row">
            <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
                <span class="lableName">From:  </span>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-8 col-xs-8">

                @Html.TextBoxFor(m => m.StartTimeShamsi, new { @readonly = "readonly", @class = "pdate form-control input-sm", @id = "StartTimeShamsi", @style = "width: 85% !important" })
                @Html.HiddenFor(m => m.StartTime, new { @id = "StartTime" })
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
                <span class="lableName">To:  </span>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-8 col-xs-8">

                @Html.TextBoxFor(m => m.EndTimeShamsi, new { @readonly = "readonly", @class = "pdate form-control input-sm", id = "EndTimeShamsi", @style = "width: 85% !important" })
                @Html.HiddenFor(m => m.EndTime, new { @id = "EndTime" })
            </div>

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <button class="btn btn-primary btn-sm  pull-right" type="button" onclick="btn_Search();">Search</button>
            </div>
        </div>
    </div>
    <div class="k-rtl col-lg-12 col-md-12 col-sm-12 col-xs-12 " id="KendoGrid">
        @(Html.Kendo().Grid<SerialDestination>()
              .Name("GridSerialDestination")
              .Columns(columns =>
              {
                  columns.Bound(o => o.SerialNo).Width(130).Filterable(filterable => filterable
                            .Extra(true)
                            .Operators(ops =>
                                ops.ForString(str => str.Clear()
                                    .Contains("Contains")
                                    .StartsWith("StartsWith")
                                    .EndsWith("EndsWith")
                                    .IsEqualTo("IsEqualTo"))));
              })
              .Selectable(s => s.Mode(GridSelectionMode.Single))
              .Pageable()
              .Sortable()
              .Scrollable(builder => builder.Height("auto"))
              .AutoBind(false)
              .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
              .DataSource(dataSource => dataSource
              .Ajax()
              .Read(read => read.Action("GridSerialDestination_ReadAll", "SerialDestinationRpt").Data("GridSerialDestination_GetParam"))
              )
              .Resizable(resize => resize.Columns(true))
              )
    </div>
</div>

When I push search button in the cshtml then the function btn_Search in the jquery will be called. In the jquery it must first read "grid.dataSource.read()" and wait for it to fill the kendo grid in the cshtml then after that the ajax must be called but it does not happen because as soon as the "grid.dataSource.read()" was read the ajax will be called

function btn_Search() {
      var grid = $('#GridSerialDestination').data('kendoGrid');
      grid.dataSource.read();
      $.ajax({
          url: '/SerialDestinationRpt/GetProcessCount',
          data: { startDate: $("#StartTime").val(), endDate: $("#EndTime").val() },
          type: "POST",
          dataType: 'json',
          async: true,
          success: function (data) {
              $('#pendingprocess').attr('data-count', data.AllSales);
              $('#finishedprocess').attr('data-count', data.AllInstallation);
          },
          error: function (reponse) {
          },
      });
}

The backend function is as following:

    public ActionResult GridSerialDestination_ReadAll([DataSourceRequest] DataSourceRequest request, string beginDate, string endDate)
    {
        var dt = SerialDestinationRptBAL.Sp_SerialDestinationRpt_ByDate(beginDate, endDate);
        TempData["allSales"] = dt.Rows.Count;
        TempData["allInstallation"] = dt.Select("ReceptionDate IS NOT NULL ").Count();

        dt = PrepareData(dt);
        return Json(dt.ToDataSourceResult(request));
    }

    [HttpPost]
    public JsonResult GetProcessCount(string startDate, string endDate)
    {
        var allSales = TempData["allSales"]?.ToString();
        var allInstallation = TempData["allInstallation"]?.ToString();
        TempData["allSales"] = null;
        TempData["allInstallation"] = null;
        
        var model = new
        {
            AllSales = allSales,
            AllInstallation = allInstallation
        };
        return Json(model, JsonRequestBehavior.AllowGet);
    }

How can I solve the problem? Any help will be appriciated.