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,319 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:knowlton
  • 4
  • 2
6 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
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:knowlton
Comment Utility
Seems to not recognize "ColumnDefs" ??

columns defs
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
no, add a comma after mydata line 29
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 5

Author Comment

by:knowlton
Comment Utility
I did that, but the data will still not display:


gridDim
0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
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:knowlton
Comment Utility
thx
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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 invoke it on a web page. 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.: (CODE)

743 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now