Solved

AngularJS and .NET MVC5 -- filling object with data (JSON) but ng-grid does not show the data.

Posted on 2014-09-12
6
1,378 Views
Last Modified: 2014-09-22
I am trying to fill a grid with data using angularJs:

ng-grid="gridOptionsAttachments"


<div class="gridStyle gridStyleNotesAttachments topSpacer-20 ng-scope ngGrid ng1410545079933 unselectable" ng-grid="gridOptionsAttachments"><div class="ngTopPanel ng-scope" ng-class="{'ui-widget-header':jqueryUITheme, 'ui-corner-top': jqueryUITheme}" ng-style="topPanelStyle()" style="width: 1040px; height: 30px;">
    <div class="ngGroupPanel ng-hide" ng-show="showGroupPanel()" ng-style="groupPanelStyle()" style="width: 1040px; height: 32px;">
        <div class="ngGroupPanelDescription ng-binding" ng-show="configGroups.length == 0">Drag a column header here and drop it to group by that column.</div>
        <ul ng-show="configGroups.length > 0" class="ngGroupList ng-hide">
            <!-- ngRepeat: group in configGroups -->
        </ul>
    </div>
    <div class="ngHeaderContainer" ng-style="headerStyle()" style="width: 1040px; height: 30px;">
        <div ng-header-row="" class="ngHeaderScroller" ng-style="headerScrollerStyle()" style="height: 30px;"><!-- ngRepeat: col in renderedColumns --><div ng-style="{ height: col.headerRowHeight }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell ng-scope col0 colt0" style="height: 30px;">
	<div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: col.headerRowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 30px;">&nbsp;</div>
	<div ng-header-cell=""><div class="ngHeaderSortColumn " ng-style="{'cursor': col.cursor}" ng-class="{ 'ngSorted': !col.noSortVisible() }" draggable="true" style="cursor: pointer;">
    <div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText ng-binding colt0">Date Attached</div>
    <div class="ngSortButtonDown ng-hide" ng-click="col.sort($event)" ng-show="col.showSortButtonDown()"></div>
    <div class="ngSortButtonUp ng-hide" ng-click="col.sort($event)" ng-show="col.showSortButtonUp()"></div>
    <div class="ngSortPriority ng-binding"></div>
    <div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable" class="ng-hide ngUnPinnedIcon"></div>
</div>
<div ng-show="col.resizable" class="ngHeaderGrip ng-scope" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div></div>
</div><!-- end ngRepeat: col in renderedColumns --><div ng-style="{ height: col.headerRowHeight }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell ng-scope col1 colt1" style="height: 30px;">
	<div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: col.headerRowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 30px;">&nbsp;</div>
	<div ng-header-cell=""><div class="ngHeaderSortColumn " ng-style="{'cursor': col.cursor}" ng-class="{ 'ngSorted': !col.noSortVisible() }" draggable="true" style="cursor: pointer;">
    <div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText ng-binding colt1">Description</div>
    <div class="ngSortButtonDown ng-hide" ng-click="col.sort($event)" ng-show="col.showSortButtonDown()"></div>
    <div class="ngSortButtonUp ng-hide" ng-click="col.sort($event)" ng-show="col.showSortButtonUp()"></div>
    <div class="ngSortPriority ng-binding"></div>
    <div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable" class="ng-hide ngUnPinnedIcon"></div>
</div>
<div ng-show="col.resizable" class="ngHeaderGrip ng-scope" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div></div>
</div><!-- end ngRepeat: col in renderedColumns --><div ng-style="{ height: col.headerRowHeight }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell ng-scope col2 colt2" style="height: 30px;">
	<div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: col.headerRowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 30px;">&nbsp;</div>
	<div ng-header-cell=""><div class="ngHeaderSortColumn " ng-style="{'cursor': col.cursor}" ng-class="{ 'ngSorted': !col.noSortVisible() }" draggable="true" style="cursor: pointer;">
    <div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText ng-binding colt2">File Name</div>
    <div class="ngSortButtonDown ng-hide" ng-click="col.sort($event)" ng-show="col.showSortButtonDown()"></div>
    <div class="ngSortButtonUp ng-hide" ng-click="col.sort($event)" ng-show="col.showSortButtonUp()"></div>
    <div class="ngSortPriority ng-binding"></div>
    <div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable" class="ng-hide ngUnPinnedIcon"></div>
</div>
<div ng-show="col.resizable" class="ngHeaderGrip ng-scope" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div></div>
</div><!-- end ngRepeat: col in renderedColumns --><div ng-style="{ height: col.headerRowHeight }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell ng-scope col3 colt3" style="height: 30px;">
	<div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: col.headerRowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 30px;">&nbsp;</div>
	<div ng-header-cell=""><div class="ngHeaderSortColumn " ng-style="{'cursor': col.cursor}" ng-class="{ 'ngSorted': !col.noSortVisible() }" draggable="true" style="cursor: pointer;">
    <div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText ng-binding colt3">Type</div>
    <div class="ngSortButtonDown ng-hide" ng-click="col.sort($event)" ng-show="col.showSortButtonDown()"></div>
    <div class="ngSortButtonUp ng-hide" ng-click="col.sort($event)" ng-show="col.showSortButtonUp()"></div>
    <div class="ngSortPriority ng-binding"></div>
    <div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable" class="ng-hide ngUnPinnedIcon"></div>
</div>
<div ng-show="col.resizable" class="ngHeaderGrip ng-scope" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div></div>
</div><!-- end ngRepeat: col in renderedColumns --><div ng-style="{ height: col.headerRowHeight }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell ng-scope col4 colt4" style="height: 30px;">
	<div class="ngVerticalBar" ng-style="{height: col.headerRowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 30px;">&nbsp;</div>
	<div ng-header-cell=""><div class="ngHeaderSortColumn " ng-style="{'cursor': col.cursor}" ng-class="{ 'ngSorted': !col.noSortVisible() }" draggable="true" style="cursor: pointer;">
    <div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText ng-binding colt4">Delete</div>
    <div class="ngSortButtonDown ng-hide" ng-click="col.sort($event)" ng-show="col.showSortButtonDown()"></div>
    <div class="ngSortButtonUp ng-hide" ng-click="col.sort($event)" ng-show="col.showSortButtonUp()"></div>
    <div class="ngSortPriority ng-binding"></div>
    <div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable" class="ng-hide ngUnPinnedIcon"></div>
</div>
<div ng-show="col.resizable" class="ngHeaderGrip ng-scope" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div></div>
</div><!-- end ngRepeat: col in renderedColumns --></div>
    </div>
    <div ng-grid-menu=""><div ng-show="showColumnMenu || showFilter" class="ngHeaderButton ng-scope" ng-click="toggleShowMenu()">
    <div class="ngHeaderButtonArrow"></div>
</div>
<div ng-show="showMenu" class="ngColMenu ng-scope ng-hide">
    <div ng-show="showFilter" class="">
        <input placeholder="Search..." type="text" ng-model="filterText" class="ng-pristine ng-valid">
    </div>
    <div ng-show="showColumnMenu" class="ng-hide">
        <span class="ngMenuText ng-binding">Choose Columns:</span>
        <ul class="ngColList">
            <!-- ngRepeat: col in columns | ngColumns --><li class="ngColListItem ng-scope" ng-repeat="col in columns | ngColumns">
                <label class="ng-binding"><input ng-disabled="col.pinned" type="checkbox" class="ngColListCheckbox ng-pristine ng-valid" ng-model="col.visible">Date Attached</label>
				<a title="Group By" ng-class="col.groupedByClass()" ng-show="col.groupable &amp;&amp; col.visible" ng-click="groupBy(col)" class="ngGroupIcon"></a>
				<span class="ngGroupingNumber ng-binding ng-hide" ng-show="col.groupIndex > 0">0</span>          
            </li><!-- end ngRepeat: col in columns | ngColumns --><li class="ngColListItem ng-scope" ng-repeat="col in columns | ngColumns">
                <label class="ng-binding"><input ng-disabled="col.pinned" type="checkbox" class="ngColListCheckbox ng-pristine ng-valid" ng-model="col.visible">Description</label>
				<a title="Group By" ng-class="col.groupedByClass()" ng-show="col.groupable &amp;&amp; col.visible" ng-click="groupBy(col)" class="ngGroupIcon"></a>
				<span class="ngGroupingNumber ng-binding ng-hide" ng-show="col.groupIndex > 0">0</span>          
            </li><!-- end ngRepeat: col in columns | ngColumns --><li class="ngColListItem ng-scope" ng-repeat="col in columns | ngColumns">
                <label class="ng-binding"><input ng-disabled="col.pinned" type="checkbox" class="ngColListCheckbox ng-pristine ng-valid" ng-model="col.visible">File Name</label>
				<a title="Group By" ng-class="col.groupedByClass()" ng-show="col.groupable &amp;&amp; col.visible" ng-click="groupBy(col)" class="ngGroupIcon"></a>
				<span class="ngGroupingNumber ng-binding ng-hide" ng-show="col.groupIndex > 0">0</span>          
            </li><!-- end ngRepeat: col in columns | ngColumns --><li class="ngColListItem ng-scope" ng-repeat="col in columns | ngColumns">
                <label class="ng-binding"><input ng-disabled="col.pinned" type="checkbox" class="ngColListCheckbox ng-pristine ng-valid" ng-model="col.visible">Type</label>
				<a title="Group By" ng-class="col.groupedByClass()" ng-show="col.groupable &amp;&amp; col.visible" ng-click="groupBy(col)" class="ngGroupIcon"></a>
				<span class="ngGroupingNumber ng-binding ng-hide" ng-show="col.groupIndex > 0">0</span>          
            </li><!-- end ngRepeat: col in columns | ngColumns --><li class="ngColListItem ng-scope" ng-repeat="col in columns | ngColumns">
                <label class="ng-binding"><input ng-disabled="col.pinned" type="checkbox" class="ngColListCheckbox ng-pristine ng-valid" ng-model="col.visible">Delete</label>
				<a title="Group By" ng-class="col.groupedByClass()" ng-show="col.groupable &amp;&amp; col.visible" ng-click="groupBy(col)" class="ngGroupIcon"></a>
				<span class="ngGroupingNumber ng-binding ng-hide" ng-show="col.groupIndex > 0">0</span>          
            </li><!-- end ngRepeat: col in columns | ngColumns -->
        </ul>
    </div>
</div></div>
</div>
<div class="ngViewport ng-scope" unselectable="on" ng-viewport="" ng-class="{'ui-widget-content': jqueryUITheme}" ng-style="viewportStyle()" tabindex="1" style="width: 1040px; height: 106px;">
    <div class="ngCanvas" ng-style="canvasStyle()" style="height: 0px;">
        <!-- ngRepeat: row in renderedRows -->
    </div>
</div>
<div ng-grid-footer="" class="ng-scope"><div ng-show="showFooter" class="ngFooterPanel ng-scope ng-hide" ng-class="{'ui-widget-content': jqueryUITheme, 'ui-corner-bottom': jqueryUITheme}" ng-style="footerStyle()" style="width: 1040px; height: 0px;">
    <div class="ngTotalSelectContainer">
        <div class="ngFooterTotalItems ngNoMultiSelect" ng-class="{'ngNoMultiSelect': !multiSelect}">
            <span class="ngLabel ng-binding">Total Items: 0</span><span ng-show="filterText.length > 0" class="ngLabel ng-binding ng-hide">(Showing Items: 0)</span>
        </div>
        <div class="ngFooterSelectedItems ng-hide" ng-show="multiSelect">
            <span class="ngLabel ng-binding">Selected Items: 0</span>
        </div>
    </div>
    <div class="ngPagerContainer ngNoMultiSelect ng-hide" style="float: right; margin-top: 10px;" ng-show="enablePaging" ng-class="{'ngNoMultiSelect': !multiSelect}">
        <div style="float:left; margin-right: 10px;" class="ngRowCountPicker">
            <span style="float: left; margin-top: 3px;" class="ngLabel ng-binding">Page Size:</span>
            <select style="float: left;height: 27px; width: 100px" ng-model="pagingOptions.pageSize" class="ng-pristine ng-valid">
                <!-- ngRepeat: size in pagingOptions.pageSizes --><option ng-repeat="size in pagingOptions.pageSizes" class="ng-binding ng-scope" value="250">250</option><!-- end ngRepeat: size in pagingOptions.pageSizes --><option ng-repeat="size in pagingOptions.pageSizes" class="ng-binding ng-scope" value="500">500</option><!-- end ngRepeat: size in pagingOptions.pageSizes --><option ng-repeat="size in pagingOptions.pageSizes" class="ng-binding ng-scope" value="1000">1000</option><!-- end ngRepeat: size in pagingOptions.pageSizes -->
            </select>
        </div>
        <div style="float:left; margin-right: 10px; line-height:25px;" class="ngPagerControl">
            <button type="button" class="ngPagerButton" ng-click="pageToFirst()" ng-disabled="cantPageBackward()" title="First Page" disabled="disabled"><div class="ngPagerFirstTriangle"><div class="ngPagerFirstBar"></div></div></button>
            <button type="button" class="ngPagerButton" ng-click="pageBackward()" ng-disabled="cantPageBackward()" title="Previous Page" disabled="disabled"><div class="ngPagerFirstTriangle ngPagerPrevTriangle"></div></button>
            <input class="ngPagerCurrent ng-pristine ng-valid ng-valid-number ng-valid-min" min="1" max="1" type="number" style="width:50px; height: 24px; margin-top: 1px; padding: 0 4px;" ng-model="pagingOptions.currentPage">
            <span class="ngGridMaxPagesNumber ng-binding" ng-show="maxPages() > 0">/ 1</span>
            <button type="button" class="ngPagerButton" ng-click="pageForward()" ng-disabled="cantPageForward()" title="Next Page" disabled="disabled"><div class="ngPagerLastTriangle ngPagerNextTriangle"></div></button>
            <button type="button" class="ngPagerButton" ng-click="pageToLast()" ng-disabled="cantPageToLast()" title="Last Page" disabled="disabled"><div class="ngPagerLastTriangle"><div class="ngPagerLastBar"></div></div></button>
        </div>
    </div>
</div></div></div>

Open in new window



I've been debugging in Chrome using the Developer Tools and at one point I was able to obtain the following:

att contr

Notice that I am stopped on the line just before initializing the "gridOptonsAttachments" object.


But ... on the web page --   the data is not being displayed.


I am having trouble with what to do next.   For example, is this part correct in the code?

        data: 'data',  ///////////////////////////////////// IS THIS CORRECT?


 $scope.gridOptionsAttachments = {
        data: 'data',  ///////////////////////////////////// IS THIS CORRECT?
        columnDefs: [
            { field: 'lastUpdate', displayName: 'Date Attached', width: 130, enableCellEdit: false, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'description', displayName: 'Description', enableCellEdit: true, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'filename', displayName: 'File Name', enableCellEdit: false, width: 150, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'attachmentType', displayName: 'Type', enableCellEdit: false, width: 60, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: '', displayName: 'Delete', enableCellEdit: false, width: 60, cellTemplate: '<div class="gridColImage"><img src="/Content/Images/Ex-Gray.png" width="12" ng-click="deleteAttachment(row.entity)" title="Delete attachment"></div>' }
        ],
        showFilter: true,
        enableColumnResize: true,
        enableColumnReordering: true,
        multiSelect: false,
        enableCellSelection: true,
        enableRowSelection: false,
        enableCellEditOnFocus: true
    };

Open in new window



Or is the problem that the function call is losing scope?

 
ticketServices.getAttachmentsList(window.name).then(function (data) 
{

 }, function () { });

Open in new window


////////// SCOPE LOST AND CANNOT GET TO   "data"    ?




NOTE:

Here is the .NET MVC method.   I have verified that it runs and that the "attachments" object is filled with valid data  (later found in the JSON object on the client side):

   public ActionResult AttachmentList(string ticketNumber)
        {
            IEnumerable<TicketDetailsAttachmentList> attachments = ticketService.GetAttachmentList(ticketNumber);

            return Json(attachments, JsonRequestBehavior.AllowGet);
        }

Open in new window

0
Comment
Question by:Tom Knowlton
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40319938
put the object inside :

ticketServices.getAttachmentsList(window.name).then(function (data) 
{
// PUT IT HERE
 }, function () { });

Open in new window


I mean :
ticketServices.getAttachmentsList(window.name).then(function (mydata) 
{
$scope.gridOptionsAttachments = {
        data: mydata
        columnDefs: [
            { field: 'lastUpdate', displayName: 'Date Attached', width: 130, enableCellEdit: false, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'description', displayName: 'Description', enableCellEdit: true, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'filename', displayName: 'File Name', enableCellEdit: false, width: 150, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'attachmentType', displayName: 'Type', enableCellEdit: false, width: 60, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: '', displayName: 'Delete', enableCellEdit: false, width: 60, cellTemplate: '<div class="gridColImage"><img src="/Content/Images/Ex-Gray.png" width="12" ng-click="deleteAttachment(row.entity)" title="Delete attachment"></div>' }
        ],
        showFilter: true,
        enableColumnResize: true,
        enableColumnReordering: true,
        multiSelect: false,
        enableCellSelection: true,
        enableRowSelection: false,
        enableCellEditOnFocus: true
    };
 }, function () { });

Open in new window


let angular do the thing using the binding, it should automatically call $scope.$apply (after runing a promise)
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 40320153
Seems to not recognize "ColumnDefs" ??

columns defs
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40320277
no, add a comma after mydata line 29
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 5

Author Comment

by:Tom Knowlton
ID: 40320292
I did that, but the data will still not display:


gridDim
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 40320333
I am heading home.

We can pick this up on Monday.

Thanks for your time and effort.  I am sure we'll get to the bottom of this!  : )

Tom
0
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 40336801
thx
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question