Kendo Ui Grid not rebinding after search button click

Question

I having difficulty where the Kendo Ui grid would not rebind with new result after the Search button click.Please let me know how i could achieve this. Thank you

Currently the GetList will return data correctly however the KendoUi grid would not rebind with the new result.

.cshtml

<div id="search">

        <div>
            <div class="searchOption">
                @Html.LabelFor(model => model.HRN)
                @Html.EditorFor(model => model.HRN)
            </div>

        </div>

        <div>

            <div class="smallBox">
                 <input type="button" id="btnSearch" style="height:32px; font-size:14px; background-color:#3399FF" class="k-button" title="Search" value="Search" />

            </div>

        </div>
        <div>
            <div class="searchOption">
                @Html.LabelFor(model => model.FamilyName)
                @Html.EditorFor(model => model.FamilyName)
            </div>

        </div>

        <div>
            <div class="searchOption">
                @Html.LabelFor(model => model.GivenName)
                @Html.EditorFor(model => model.GivenName)

            </div>

        </div>
        <div>
             <div class="searchOption">
                @Html.LabelFor(model => model.Priority)
                @Html.EditorFor(model => model.Priority)
            </div>

        </div>

</div>

@(Html.Kendo().Grid<PWeb_App.ViewModels.ResultModel>()

        .Name("Result")
        .HtmlAttributes(new { @Style = "align:center; font-size:10px; width:985px" })
        .Events(ev => ev.Change("onChange"))
        .Columns(columns =>
        {
            columns.Bound(p => p.GivenName).Width(90);
            columns.Bound(p => p.FamilyName).Width(90);
            columns.Bound(p => p.Community).Width(130);

        })
        .ToolBar(toolbar => toolbar.Save())
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Sortable()

        .Pageable(paging => paging
            .Input(false)
            .Numeric(true)

            .PreviousNext(true)
            .PageSizes(new int[] { 5, 10, 25, 50 })
            .Refresh(false)

        )

        .Selectable()
        .Scrollable()
        .ColumnMenu(c => c.Columns(false))
        .DataSource(dataSource => dataSource

            .Ajax()//bind with Ajax instead server bind
            .PageSize(10)
            .ServerOperation(true)
                .Model(model =>
                {
                    model.Id(p => p.Pid);
                    model.Field(p => p.FamilyName).Editable(false);
                    model.Field(p => p.GivenName).Editable(false);



                })


                        .Read(read => read.Action("GetData", "Details").Type(HttpVerbs.Get))
                        .Update("Edit", "Details")

            )

    )


<script type="text/javascript">
$(document).ready(function () {

$('#btnConsumerSearch').click(function (e){

            var community = $("#Community").val();
            var familyName = $("#FamilyName").val();
            var givenName = $("#GivenName").val();


                $.ajax({
                type: 'POST',
                complete: function(e) {
                        $("#Result").data("kendoGrid").dataSource.read(); 
                },

                url: "@(Url.Content("~/Details/GetData/"))",
                data: {

                        "Community":community,
                        "FamilyName":familyName,
                        "GivenName":givenName


                },

                success: function () {
                    $("#btnSearch").removeAttr('disabled');

                }

                });
                $("#btnSearch").attr('disabled','disabled');


      });

});
</script>

controller:

//The following code will return data new result as expected however the kendo grid does not refresh with the result of the following code:

public ActionResult GetData([DataSourceRequest] DataSourceRequest request, SearchCriteria model)
        {
            DataTable result = GetList(model);
            Response.Cache.SetCacheability(HttpCacheability.NoCache);
            return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }


        /// <summary>
        /// Get all available List from Client table and return using datatable
        /// </summary>
        /// <returns></returns>
        private DataTable GetList(SearchCriteria model, string ReferralListID)
        {
            using (PEntities context = new PEntities())
            {


                string ConnectionString = (context.Connection as EntityConnection).StoreConnection.ConnectionString;
                SqlConnectionStringBuilder builder = new SqlConnectionStringBuilder(ConnectionString);
                builder.ConnectTimeout = 2500;
                using (SqlConnection con = new SqlConnection(builder.ConnectionString))
                {
                    using (SqlDataAdapter adapter = new SqlDataAdapter())
                    {
                        using (SqlCommand cmd = new SqlCommand("spListResults", con))
                        {

                            cmd.CommandType = CommandType.StoredProcedure;

                            cmd.Parameters.Add("paramCommunity", SqlDbType.VarChar, 100).Value = !String.IsNullOrEmpty(model.Community) ? (object)model.Community : DBNull.Value;
                            cmd.Parameters.Add("paramGivenName", SqlDbType.VarChar, 100).Value = !String.IsNullOrEmpty(model.GivenName) ? (object)model.GivenName : DBNull.Value;
                            cmd.Parameters.Add("paramFamilyName", SqlDbType.VarChar, 100).Value = !String.IsNullOrEmpty(model.FamilyName) ? (object)model.FamilyName : DBNull.Value;
                            cmd.Parameters.Add("paramPriority", SqlDbType.VarChar, 10).Value = !String.IsNullOrEmpty(model.Priority) ? (object)model.Priority : DBNull.Value;

                            adapter.SelectCommand = cmd;
                            cmd.CommandTimeout = 0;
                            DataTable dt = new DataTable();
                            adapter.Fill(dt);
                            return dt;
                        }
                    }
                }




            }

        }

Answer 1

Try like this,

In your grid read method in view like this

  .Read(read => read.Action("GetData", "Details").Data("GetData"))

You button should be Submit Type

  <input type="Submit" id="btnSearch" style="height:32px; font-size:14px; background-color:#3399FF" class="k-button" title="Search" value="Search" />

Script

 function GetData() {
    return {
HRN: $('#HRN').val(),
FamilyName: $('#FamilyName').val(),
GivenName: $('#GivenName').val(),
Priority: $('#Priority').val()

    };
}



$(document).ready(function () {
  $("#btnSearch").click(function (e) {
            $("#Result").data("kendoGrid").dataSource.read();
            $("#Result").data("kendoGrid").refresh();
            e.preventDefault();
        });
});

Controller

public ActionResult GetData([DataSourceRequest] DataSourceRequest request,  string HRN, string FamilyName, string GivenName, string Priority)
        {
            DataTable result = GetList(HRN,FamilyName,GivenName,Priority);
            Response.Cache.SetCacheability(HttpCacheability.NoCache);
            return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }