Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1475
  • Last Modified:

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

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
Tom Knowlton
Asked:
Tom Knowlton
  • 4
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
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
 
Tom KnowltonWeb developerAuthor Commented:
Seems to not recognize "ColumnDefs" ??

columns defs
0
 
leakim971PluritechnicianCommented:
no, add a comma after mydata line 29
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Tom KnowltonWeb developerAuthor Commented:
I did that, but the data will still not display:


gridDim
0
 
Tom KnowltonWeb developerAuthor Commented:
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
 
Tom KnowltonWeb developerAuthor Commented:
thx
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now