Develop Reference

UI Grid Cannot Read Property Data of Undefined

Having Issues with getting the data for my ui grid? Not sure what I'm doing wrong here, but I console.log the data so I know i'm getting it back.
My data is coming back as a object and i'm trying to reach the team members array in the object to reference.
function loadProjectDetails(){
return MrktRsrchPrjtDataService.getProjectSubsection(MrktRsrchPrjtDataService.getCurrentReportId(), "ProjectSummary")
.then(function (data){
vm.project = data;
console.log(data);
vm.teamGridOptions = {
enableGridMenu: false,
enableSorting: true,
enableHorizontalScrollbar: 0, /*always hide horizontal scroll bar*/
enableVerticalScrollbar: 1, /*always show vertical scroll bar*/
rowHeight: 46,
columnDefs: [
{
enableHiding: false,
enableColumnMenu: false,
displayName: 'First Name',
field: 'memberId',
cellClass: 'ui-grid-cell-contents',
cellTemplate: '<span>{{row.entity.teamMembers.memberId}}</span>'
},
],
data: vm.project
};
});
}
//HTML
<div ui-grid="vm.teamGridOptions" ui-grid-auto-resize class=""></div>

In the html you call vm.teamGridOptions. What is the name of your controllor? AngularJS convention is to name the controller "ctrl", so this would mean you should be calling ctrl.teamGridOptions.

Show breakline in uigrid

I'm using uigrid like below:
columnDefs: [
{ name: 'CA', field: 'CA', displayName: 'CA', enableCellEdit: false }
]
the CA column has data like below :
<div> name : Jon ><br /> Job : Barber </div>
even that i have <br /> i got a result as it is , without a break line.
Any solution ? to show the result like :
name : Jon
Job : Barber

I believe this might be close to what you want, user2848242.
JavaScript/AngularJS Controller:
var app = angular.module('app', ['ui.grid', 'ngSanitize']);
app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
$scope.gridOptions = {
rowHeight: 40,
enableRowHeaderSelection: false,
columnDefs: [{
name: 'CA1',
field: 'CA',
displayName: 'Original CA',
enableCellEdit: false,
cellTemplate: '<span ng-bind-html="row.entity[col.field]"></span>'
}, {
name: 'CA2',
field: 'Name',
displayName: 'Alternative CA',
enableCellEdit: false,
cellTemplate: '<div>Name: {{row.entity[col.field]}}<br />Job: {{row.entity["Job"]}}</div>'
}]
}
$http.get('data.json')
.then(function(response) {
$scope.gridOptions.data = response.data;
});
}]);
The basic idea is, add a cellTemplate to your columnDefs. The tricky part is, since HTML is in your data you need to use ngSanitize to "trust" the HTML so it'll appear as HTML. Since it's best to separate HTML from data, for many reasons, I provided an alternative - hence Original CA and Alternative CA columns.
Here's a working Plunker, http://plnkr.co/edit/pkoARFr11Q7TmbBIegIT?p=preview.
Hope that helps, let me know if you have any other questions.

AngularJS ui-grid enableCellEdit NOT editing

I am trying to learn AngularJS.
The grid displays properly. It loads page properly.
It does NOT go into edit mode.
Double click does not go into edit mode.
F2 does not go into edit mode.
ProductTitle (the second column below) is the example I am using.
I recieve no errors in Chrome. No missing libraries.
I have spent hours researching this (and learned so much) but
I can't get it to go into edit mode.
Does anyone know what I am doing wrong?
module:
app = angular.module('UIGrid_App', [
'ngAnimate', // support for CSS-based animations
'ngTouch', //for touch-enabled devices
'ui.grid', //data grid for AngularJS
'ui.grid.pagination', //data grid Pagination
'ui.grid.resizeColumns', //data grid Resize column
'ui.grid.moveColumns', //data grid Move column
'ui.grid.pinning', //data grid Pin column Left/Right
'ui.grid.selection', //data grid Select Rows
'ui.grid.autoResize', //data grid Enabled auto column Size
'ui.grid.exporter', //data grid Export Data
'ui.grid.edit'
]);
})();
controller:
app.controller('ProductsCtrl', ['$scope', 'CRUDService', 'uiGridConstants',
function ($scope, CRUDService, uiGridConstants) {
$scope.gridOptions = [];
//ui-Grid Call
$scope.GetProducts = function () {
$scope.gridOptions = {
enableCellSelection: true, // jenny changed to editable
enableCellEdit: false, // jenny changed to editable - to be set below ( setting to true doesnt work)
enableCellEditOnFocus: true, // jenny changed to editable
useExternalPagination: true,
useExternalSorting: true,
enableFiltering: true,
enableSorting: true,
enableRowSelection: true,
enableSelectAll: true,
enableGridMenu: true,
columnDefs: [
{
name: "ProductID",
displayName: "Product ID",
width: '10%',
headerCellClass: $scope.highlightFilteredHeader
},
{
name: "ProductTitle",
title: "Product Title",
width: '40%',
enableCellEdit: true, // jenny change to editable
headerCellClass: $scope.highlightFilteredHeader
},
more columns

As per the documentation we need module, flags and attribute.
The ui.grid.edit feature allows inline editing of grid data. To enable, you must include the 'ui.grid.edit' module and you must include the ui-grid-edit directive on your grid element.
For individual cells to enable/disable use something like below in the column definition if you don;t want to enable all columns editable:
{ name: 'address.city', enableCellEdit: true, }

You need to add grid edit on your html (ui-grid-edit ui-grid-row-edit)
<div id="grid-create-profile" ui-grid="$ctrl.gridOptions" ui-grid-pagination ui-grid-cellNav ui-grid-edit ui-grid-row-edit ui-grid-resize-columns ui-grid-selection class="grid"></div>

How to remotely sort an Ext grid column that renders a nested object?

Simple question here, and I'm really surprised I cannot find an answer to it anywhere.
I have the following product model:
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'manufacturer', type: 'auto'}, // i.e. nested object literal
],
});
As can be seen, a product has a nested object inside it that contains details about a manufacturer (id, name, description, etc.).
I display products in an Ext.grid.Panel, like so:
Ext.create('Ext.grid.Panel', {
title: 'Products',
...
remoteSort: true,
columns: [
{text: 'Id', dataIndex: 'id', sortable: true},
{text: 'Name', dataIndex: 'name', sortable: true},
{text: 'Manufacturer', dataIndex: 'manufacturer', sortable: true, renderer: function(manufacturer) {
return manufacturer.name; // render manufacturer name
}
},
],
});
As you can see, all three columns are configured to be sortable, and I am using remote sorting. This works for the first two columns, but the third column (manufacturer) is giving me trouble.
For instance, when a user sorts the grid by product name, Ext sends the following JSON to the server:
{ sort: [{ property: 'name', direction: 'ASC' }] }
This is fine, because the server knows to simply sort by each product's name property.
But when a user sorts the grid by manufacturer, the JSON sent is:
{ sort: [{ property: 'manufacturer', direction: 'ASC' }] }
Since the manufacturer is an object, this does not give the server any idea which property of the manufacturer it should sort by! Is it the manufacturer's id? Or is it the manufacturer's name? Or something else?
For my grid, since I render the manufacturer's name, I'd like to sort it by name. But I see no way to tell the server this. And I certainly don't want to make my server just sort by the manufacturer's name all the time.
If the JSON was sent like this it would be ideal:
{ sort: [{ property: 'manufacturer.name', direction: 'ASC' }] }
Sadly, Ext does not seem to do that (?). So, what's the solution?

Okay, I asked on the Sencha Forums and got a response. It appears you can override getSortParam() in the column config. Example:
columns: [
...
{
header: 'Manufacturer',
dataIndex: 'manufacturer',
sortable: true,
renderer: function(manufacturer) {
return manufacturer.name; // render manufacturer name
},
getSortParam: function() {
return 'manufacturer.name';
},
}
...
]
This will send the ideal JSON I described in my OP. Now I just need to make my server parse this properly! :)

Unable to load store data in EXTJS Simplestore using JavaScript

I am trying to re-load data into the Store which is further used by a GridPanel. My code goes like:
Ext.onReady(function(){
myData = [
['document','listsk','123','','','rat'],
['hiiiii','himself','rest','','','lap']
];
// create the data store
store = new Ext.data.SimpleStore({
fields: [
{name: 'cat'},
{name: 'desc'},
{name: 'edcsId'},
{name: 'transformedEDCSUrl'},
{name: 'transformedFormatsUrl'},
{name: 'lineNotes'}
]
});
store.loadData(myData);
// create the Grid
grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "<b>Category</b>", sortable: true, dataIndex: 'cat'},
{header: "<b>Description or Document Title</b>", sortable: true, dataIndex: 'desc'},
{header: "<b>EDCS ID #</b>", sortable: true, renderer: renderEDCSUrl, dataIndex: 'edcsId'}
{header: "<b>URLs to Formats</b>", renderer: renderFormatsUrl},
{id: 'lineNotes', header: "<b>Line Notes</b>", sortable: true, dataIndex: 'lineNotes'}
],
viewConfig: {
forceFit: true
},
autoExpandColumn: 'lineNotes',
stripeRows: true,
collapsible: true
})
reload = function refreshGrid(data){
store.loadData(data);
}
})
The mydata variable as seen by Firebug is:
[
['document','listsk','123','','','rat'],
['hiiiii','himself','rest','','','lap']
]
And the data variable in the javascript function refreshGrid is also same:
[
['document','listsk','123','','','rat'],
['hiiiii','himself','rest','','','lap']
]
I am invoking the function refreshGrid as follow:
function load(response) {
reload(response.substring(response.indexOf('myData') + 9,
response.indexOf('function renderABC') - 2));
}
To me it looks like a JSON parsing issue as data is coming fine from backend. Which is the best way to parse JSON string coming from backend. The behaviour with javascript invcation of store.loadData is that each character in the data variable is treated as separate row in the Grid as shown below:

Looks like you are providing an array of strings to the store instead of array of arrays as it expects.
As a result, store treats each value of an array(string actually) as an array. As soon as strings support referencing by index(at least in non-IE browsers), you get the behavior described.

For all who face this problem, a quick wayout is eval function and otherwise use some library for JSON.