Hi,
I have created one angular js application to display the data in the devextreme gridview.
But i am getting data binding error in js on binding data to dxdatagrid.
What I have tried:
My Index.cshtml
!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Configuring dxDataGrid - Angular Approach</title>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-sanitize.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.2.4/css/dx.light.css" />
<script src="~/Scripts/dx.all.js"></script>
@*<script type="text/javascript" src="http://cdn3.devexpress.com/jslib/15.2.4/js/dx.webappjs.js"></script>*@
<link href="~/Content/Site.css" rel="stylesheet" />
<script src="~/Scripts/data.js"></script>
<link href="~/Content/dx.light.css" rel="stylesheet" />
<link href="~/Content/dx.common.css" rel="stylesheet" />
<script type="text/javascript">
var myApp = angular.module('myApp', ['dx']);
myApp.controller("defaultCtrl", function ($scope) {
var orders = new DevExpress.data.CustomStore({
load: function () {
var def = $.Deferred();
$.getJSON('/Home/Get_AllData')
.success(function (resolvedScreenshots) {
def.resolve(resolvedScreenshots);
})
.error(function () {
def.reject("Data Loading Error");
});
return def.promise();
}
});
$scope.gridSettings = {
dataSource: {
store: orders
},
columns: [
"MP", "MPOrigin","POE", "MPValidity", "Status", "Comments", "TAG", "Actions", "Closed", "ReqSelection", "ReqIPT", "ReqGroup", "TRSForecast", "CurrentForecast",
"CreatedForecast", "ToBeCreatedForecast"
],
remoteOperations: {
sorting: true,
paging: true
},
paging: {
pageSize: 25
},
columnAutoWidth: true,
pager: {
showPageSizeSelector: true,
allowedPageSizes: [25, 50, 100],
showInfo: true
},
headerFilter: { visible: true },
height: 700,
width: 1000,
loadPanel: {
enabled: true
},
scrolling: {
mode: "virtual"
},
filterRow: {
visible: true
},
groupPanel: {
visible: true,
},
}
});
</script>
</head>
<body ng-controller="defaultCtrl">
<div dx-data-grid="gridSettings"></div>
</body>
</html>
My Controller.cs
public JsonResult Get_AllData()
{
var prod = new List<Object>();
using (KPICenterEntities db = new KPICenterEntities())
{
var product = db.vw_100_QUERY_FOR_XLS_WEEK_IN_PROGRESS_016_Forecast_Follow_Current_Data.Take(100).ToList();
foreach (var p in product)
{
var thing = new
{
MP = p.txt_MP,
MPOrigin = p.txt_MP_Origin,
POE = p.txt_POE,
MPValidity = p.txt_MPValidity,
Status = p.txt_Delta,
Comments = p.txt_Comments,
TAG = p.txt_TAG,
Actions = p.txt_Actions,
Closed = p.bit_Closed,
ReqSelection = p.txt_Req_Section,
ReqIPT = p.txt_Req_IPT,
ReqGroup = p.txt_Req_Group,
TRSForecast = p.int_TRS_Forecast,
CurrentForecast = p.int_Current_Forecast,
CreatedForecast = p.int_Created_Forecast,
ToBeCreatedForecast = p.int_ToBeCreated_Forecast,
};
prod.Add(thing);
}
}
return Json(prod, JsonRequestBehavior.AllowGet);
}