Kendo Ui Grid not rebinding after search button click - entity-framework

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);
}