View containing the Grid configurations
@(Html.Kendo().Grid(Model.ProviderMapList)
.Name("ProviderMapListGrid")
.Pageable(page => page.Enabled(true))
.Sortable()
.Scrollable()
.Navigatable()
.Selectable()
.Groupable()
.HtmlAttributes(new { style = "height:100%;" })
.Pageable(
pager => pager.PageSizes(new int[] { 20, 50, 100 })
)
.Columns(columns =>
{
columns.Template(@<text></text>).HeaderTemplate("<a href='\\#' title=\"Expand All\"><img src='../Content/Images/icon-expand.jpg' onclick=\"javascript:ExpandProviderMapGroups();return false;\"\\>  </a><a href='\\#' title=\"Collapse All\"><img src='../Content/Images/icon-collapse.jpg' onclick=\"javascript:CollapseProviderMapGroups();return false;\" \\></a>").Width(50);
columns.Bound(p => p.Value).ClientGroupHeaderTemplate("Value: #=value#        Count:#=count#");
columns.Bound(p => p.SvcType).ClientGroupHeaderTemplate("SvcType: #=value#        Count:#=count#");
columns.Bound(p => p.FacilityProviderTypeId).EditorTemplateName("ProviderTypes").ClientTemplate("#=FacilityProviderType#").Title("Provider Type").ClientGroupHeaderTemplate("Provider Type: #=value#        Count:#=count#");
columns.Command(command => { command.Edit().HtmlAttributes(new { title = "Edit" }); }).Width(172);
columns.Command(command => { command.Destroy().HtmlAttributes(new { title = "Delete" }); }).Width(172);
})
.DataSource(dataSource => dataSource
.Ajax()
.Aggregates(aggregates => aggregates.Add(p => p.Value).Count())
.Aggregates(aggregates => aggregates.Add(p => p.SvcType).Count())
.Aggregates(aggregates => aggregates.Add(p => p.FacilityProviderTypeId).Count())
.ServerOperation(false)
.Model(model =>
{
model.Id(x => x.ProviderMapId);
model.Field(x => x.FacilityProviderTypeId);
})
.PageSize(20)
.Update(update => update.Action("UpdateProviderMap", "Remit835").Type(HttpVerbs.Post))
.Destroy(update => update.Action("DeleteProviderMap", "Remit835").Type(HttpVerbs.Post))
)
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.Events(events => events.Cancel("onCancel"))
)
Javascript function that is binding the data to the grid
function Remit835Call(facilityId) {
blockUI
var model = new Object();
model.FacilityId = facilityId;
var providerMapListGrid = $('#ProviderMapListGrid');
var payerTypeListGrid = $('#PayerTypeGrid');
var payerTypeMasterListGrid = $('#PayerTypeMasterGrid');
blockUI();
var successCallbackMethod = function (response) {
var providerMapGrid = providerMapListGrid.data("kendoGrid");
var providerMapDatasource = providerMapGrid.dataSource;
providerMapDatasource.data(response.reply.data.ProviderMapList);
unblockUI();
};
var errorCallbackMethod = function (reply) {
alert(reply);
unblockUI();
}
$.ajax({
type: 'GET',
url: Remit835Setup,
data: model,
cache: false,
dataType: 'json',
contentType: 'application/json',
success: successCallbackMethod,
error: errorCallbackMethod
});
}
Controller action that is sending data to the ajax call
public JsonResult Remit835FacilityFilter(Remit835Filter filter)
{
Remit835SearchModel remit835SearchModel = new Remit835SearchModel();
var remit835ProviderMapDto = _remit835FacilityService.PopulateProviderMapList(filter.FacilityId);
remit835SearchModel.ProviderMapList = (from o in remit835ProviderMapDto
select new Remit835ProviderMapViewModel()
{
ProviderMapId = o.ProviderMapId,
FacilityName = o.FacilityName,
FacilityProviderType = o.FacilityProviderType,
Value = o.Value,
SvcType = o.SvcType,
FacilityId = o.FacilityId,
FacilityProviderTypeId = o.FacilityProviderTypeId,
InsertUser = o.InsertUser,
ProviderTypeList = FillFacilityProviderTypes(),
}).ToList();
JsonResult jsonResult = Json(
new
{
reply = new
{
data = remit835SearchModel
}
}
, JsonRequestBehavior.AllowGet);
return jsonResult;
}