Kendo Grid not showing data with Index action - asp.net-mvc

Question

I am using Kendo Grid for MVC.
Following is my controller and actions.
public class ComplainController : Controller
{
private MSMContext db = new MSMContext();
public ActionResult Index([DataSourceRequest]DataSourceRequest request)
{
var cOMPLAINs = db.COMPLAINs.Include(c => c.MASTER_FAULT);
var model = cOMPLAINs.Select(o => new
{
JOBSHEET_NO = o.JOBSHEET_NO,
CUSTOMER_NAME = o.CUSTOMER_NAME,
CUSTOMER_MOBILE = o.CUSTOMER_MOBILE,
COMPANY_NAME = o.COMPANY_NAME,
MODEL_NAME = o.MODEL_NAME
});
return Json(model.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
public ActionResult GetData([DataSourceRequest]DataSourceRequest request)
{
var model = db.COMPLAINs.Select(o => new
{
JOBSHEET_NO = o.JOBSHEET_NO,
CUSTOMER_NAME = o.CUSTOMER_NAME,
CUSTOMER_MOBILE = o.CUSTOMER_MOBILE,
COMPANY_NAME = o.COMPANY_NAME,
MODEL_NAME = o.MODEL_NAME
});
return Json(model.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
}
Now Following is my Kendo Grid Code I am using in a view.
#(Html.Kendo().Grid<WebMSM.Models.COMPLAIN>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.JOBSHEET_NO).Width(150);
columns.Bound(p => p.CUSTOMER_NAME).Width(400);
columns.Bound(p => p.CUSTOMER_MOBILE).Width(200);
columns.Bound(p => p.COMPANY_NAME).Width(200);
columns.Bound(p => p.MODEL_NAME).Width(150);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("GetData", "Complain"))
)
)
If I use GetData action, Kendo Grid is working fine with all data shown.
But if I use Index action, Kendo Grid displays but without data.
While using Index action, following json data is displayed without any page layout and HTML.
{"Data":[{"JOBSHEET_NO":1018,"CUSTOMER_NAME":"HEMAL RATHOD","CUSTOMER_MOBILE":"9825369987","COMPANY_NAME":"SAMSUNG","MODEL_NAME":"NOTE 3"},{"JOBSHEET_NO":1019,"CUSTOMER_NAME":"MUKESH CHAUHAN","CUSTOMER_MOBILE":"9825305305","COMPANY_NAME":"APPLE","MODEL_NAME":"IPHONE 6"}],"Total":2,"AggregateResults":null,"Errors":null}
What am I missing?

Answer 1

.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("GetData", "Complain"))
)
)
needs to be changed to
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Index", "Complain"))
)
)
if you want to get it working with "Index". If your datasource never calls "Index" action method, then your grid will always be empty.