Getting data binding error while binding entity data to dx data grid

Question

0.00/5 (No votes)

See more:

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");
                       });
                    //timeout: 5000
                    return def.promise();
                }
            });
            $scope.gridSettings = {
                dataSource: {
                    store: orders
                },
                //dataSource: new DevExpress.data.DataSource({
                //    load: function () {
                //        var def = $.Deferred();
                //        $http({
                //            method: 'GET',
                //            url: '/Home/Get_AllData'
                //        }).success(function (data) {
                //            def.resolve(data);
                //        });
                //        return def.promise();
                //    }
                //}),
                //dataSource: employees,           
                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
                },
                //onContentReady: function(e) {
                //    $("#gridContainer .dx-scrollable").dxScrollable({ showScrollbar: 'always' });
                //},
                groupPanel: {
                    visible: true,
                },
                //editing: {
                //    editMode: 'row',
                //    editEnabled: true,
                //    removeEnabled: true,
                //    insertEnabled: 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);
          //using (KPICenterEntities Obj = new KPICenterEntities())
          //{
          //    List<tb_dat_IP_KPICenter_Forecast> Emp = Obj.tb_dat_IP_KPICenter_Forecast.ToList();
          //    return Json(Emp, JsonRequestBehavior.AllowGet);
          //}
      }

Posted 5-Sep-17 1:05am

TarunKumarSusarapu

Updated 7-Sep-17 0:57am

v2

Add a Solution

Comments

Graeme_Grant 7-Sep-17 7:06am

This is a DevExpress control, you would be better off asking them.

TarunKumarSusarapu 7-Sep-17 7:15am

NO its completely normal angualar js.Please suggest me how to display 11k rows in grid using paging.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Answer 1 · 2017-09-05T18:55:00

Solution 1

Your controller name is defined as defaultCtrl in the body where as in the javascript it is passed as HomeCtrl
make it uniform across.

Posted 5-Sep-17 18:55pm

Karthik_Mahalingam

Comments

TarunKumarSusarapu 6-Sep-17 1:12am

I changed it but still throwing the same error

Karthik_Mahalingam 6-Sep-17 1:41am

can you post the complete code or host it in a fiddle or plunker

TarunKumarSusarapu 6-Sep-17 4:27am

I tried with same code with sample data and it is working fine.
But here i am getting error.

Karthik_Mahalingam 6-Sep-17 7:50am

then there might be some error with the actual data