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,339 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
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: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
Scale it in WD Gold

With up to ten times the workload capacity of desktop drives, WD Gold hard drives employ advanced technology to deliver among the best in reliability, capacity, power efficiency and performance.

 
LVL 5

Author Comment

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


gridDim
0
 
LVL 5

Author Comment

by: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:knowlton
ID: 40336801
thx
0

Featured Post

New! My Passport Wireless Pro Wi-Fi Mobile Storage

Portable wireless storage to offload, edit, and stream anywhere.

High-capacity, wireless mobile storage designed to accompany professional photographers and videographers in the field to easily offload, edit and stream captured photos and high-definition videos.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Javascript create file issue 4 48
Angular - break the dataset in chunks? 7 39
javascript date picker in php while loop 5 27
how can i select 4 7
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
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)
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…

920 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

16 Experts available now in Live!

Get 1:1 Help Now