Rally Custom HTML - Filter on Milestones

Rally Custom HTML - Filter on Milestones - javascript

I'm creating a "Rally Custom HTML" board using this grouped grid example.
https://help.rallydev.com/apps/2.1/doc/#!/example/groupable-grid
I'm having trouble adding a filter for a specific Milestone. I can get the code below to return user stories without a problem. It has a generic filter on name.
<!DOCTYPE html>
<html>
<head>
<title>Grouped Grid Example</title>
<script type="text/javascript" src="/apps/2.0/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
this.add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Milestones'
],
context: this.getContext(),
features: [{
ftype: 'groupingsummary',
groupHeaderTpl: '{name} ({rows.length})'
}],
storeConfig: {
model: 'UserStory',
groupField: 'Project',
groupDir: 'ASC',
filters : [
{
property : 'Name',
operator : 'contains',
value : ' '
}
],
fetch: ['Project'],
getGroupString: function(record) {
var Project = record.get('Project');
return (Project && Project._refObjectName) || 'No Project';
}
}
});
}
});
Rally.launchApp('CustomGrid', {
name: 'Custom Grid'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
When I try to change the filter to use "Milestones" it doesn't return any results. I'm able to access the Milestones property display it as a column.
<!DOCTYPE html>
<html>
<head>
<title>Grouped Grid Example</title>
<script type="text/javascript" src="/apps/2.0/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
this.add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Milestones'
],
context: this.getContext(),
features: [{
ftype: 'groupingsummary',
groupHeaderTpl: '{name} ({rows.length})'
}],
storeConfig: {
model: 'UserStory',
groupField: 'Project',
groupDir: 'ASC',
filters : [
{
property : 'Milestones',
operator : 'contains',
value : ' '
}
],
fetch: ['Project'],
getGroupString: function(record) {
var Project = record.get('Project');
return (Project && Project._refObjectName) || 'No Project';
}
}
});
}
});
Rally.launchApp('CustomGrid', {
name: 'Custom Grid'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>

If you know the ObjectId of the milestone you're trying to filter by you can make a filter like this:
{
property : 'Milestones',
operator : 'contains',
value : '/milestone/12345'
}
Or, you can search by name as well:
{
property : 'Milestones.Name',
operator : 'contains',
value : 'A Milestone'
}
You can also just paste the url into your browser to test until you get the query right:
https://rally1.rallydev.com/slm/webservice/v2.0/hierarchicalrequirement?query=(Milestones contains /milestone/12345)

Related

ExtJS throwing Invalid domNode reference or an id of an existing domNode: null when trying to bind one element to the config of another

For this code with the bind part not commented I get the error message which I post below the code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="UTF-8" src="./ext-all-debug.js"></script>
<script type="text/javascript">
var resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'Results',
width: 600,
height: 400,
border: true,
layout: {
type: 'vbox', // Arrange child items vertically
align: 'stretch', // Each takes up full width
padding: 5
},
items: [{ // Results grid specified as a config object with an xtype of 'grid'
xtype: 'button',
text: 'button1',
pressed: false,
reference: 'button1',
listeners : {
click: { fn: function(){ alert("heheh");}}
}
},
{
xtype: 'button',
text: 'button2',
bind: {
hidden: '{!button1.pressed}',
}
}
]
});
Ext.onReady(function () {
resultsPanel.render(Ext.getBody());
}, this, {delay: 1000});
</script>
</head>
<body>
</body>
</html>
following error message:
[E] Ext.dom.Element.constructor(): Invalid domNode reference or an id of an existing domNode: null ext-all-debug.js:10375:31
extPanel.html:34
When I remove the bind part from the code then everything works fine.

In button1 you must add:
enableToggle: true,
pressed is only available for toggle buttons.

How to load grid data with json data on ajax sucess

In my ajax sucess i am calling this funcction and there from response I am extracting the data which I need to load.
success: function(response){
StoreloadData(this,response);
},
In StoreloadData function i am trying to load data in my grid like this but not getting data.
StoreloadData(me,response){
var myGrid = Ext.getCmp('#myGrid');
var myGridStore = myGrid.getStore();
var gridData = response.myData.data;
var total = gridData[0].recordsCount;
myGridStore.load(gridData); // Not loading
myGridStore.loadData(gridData); // Not loading
myGrid.refresh(); // Error.
}
Here I have myJSon data in this line var gridData = response.myData.data; this is a simple json object like this.
[{dataIndex1: "Value1",dataIndex2: "Value2"},
{dataIndex1: "Value1",dataIndex2: "Value2"},
{dataIndex1: "Value1",dataIndex2: "Value2"}]
Can anyone please suggest me how to overcome from this.

I suggest you this solution. Just define the empty store with fields definitions, then load data using Ext.JSON.decode() and store.loadData().
Working example:
File grid_json_load.json:
{
"data": [
{
"dataIndex1": "Value1",
"dataIndex2": "Value2"
},
{
"dataIndex1": "Value1",
"dataIndex2": "Value2"
}
],
"success": true
}
File grid_json_load.html:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.define('Test.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.store = Ext.create('Ext.data.ArrayStore', {
data: [],
fields: [
{name: "dataIndex1", type: "string"},
{name: "dataIndex2", type: "string"}
]
});
me.grid = Ext.create('Ext.grid.Panel', {
autoScroll: true,
stripeRows: true,
width: 420,
height: 200,
store: me.store,
columnLines: false,
columns : [
{header : 'Data Index 1', width: 100, dataIndex : 'dataIndex1'},
{header : 'Data Index 2', width: 100, dataIndex : 'dataIndex2'}
]
});
me.add(me.grid);
}
});
Ext.onReady(function(){
var win = Ext.create('Test.TestWindow', {
});
Ext.Ajax.request({
url: 'grid_json_load.json',
method: 'POST',
timeout: 1200000,
params: {
},
success: function (response, opts) {
var win = new Test.TestWindow({
});
var r = Ext.JSON.decode(response.responseText);
if (r.success == true) {
win.show();
win.store.loadData(r.data);
} else {
Ext.Msg.alert('Attention', 'Error');
};
}
});
});
</script>
<title>Test</title>
</head>
<body>
</body>
</html>
Notes:
Tested with ExtJS 4.2 and ExtJS 6.6.

Dgrid - Display label for number (i.e. 02 = Cat) I want to display Cat - not the number

In my Dgrid I have a column that displays the code (in number format) for an event.
enter image description here
I want to display the label not the number in the dgrid. So if 1 = Cat. In the database it shows as a 1 - but I want to display 'Cat' in dgrid. Can't find anything on how to do this.
Help or a lead in a direction would be helpful. Thanks!!
UPDATED: 6.16.15
Here is the code. I'm limited in what I can show.
These are some of the codes. 02 = XXXXX, 03 = XXXXX1, and so on and so on. Right now, the dgrid displays the numbers. It's kind of like a key. I need it to display what the number represents in the dgrid, not the number. So 02 should display 'Traffic Stop'. Not sure how to do a jsfiddle yet, and don't have a whole lot of extra time at the moment. I'm limited in what info I can give out, so I'd have to recreate a dummy version.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>XXXXXXXX Events</title>
<link rel="stylesheet" href="/static/web_ui/dgrid/css/skins/slate.css">
<h1>XXXXXXXX Events</h1>
<form id="queryForm">
<label for="XXXXXField">XXXXX Type contains:</label>
<input id="XXXXXField" name="event_type">
<button type="submit">Filter</button>
<button type="reset">Reset</button>
</form>
<script src="/static/web_ui/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/_base/declare',
'dojo/dom',
'dojo/on',
'dstore/Rest',
'dstore/Request',
'dgrid/extensions/ColumnResizer',
'dgrid/extensions/ColumnReorder',
'dgrid/CellSelection',
'dgrid/extensions/DijitRegistry',
// 'dstore/Memory',
// 'dstore/Trackable',
// 'dstore/Cache',
'dgrid/OnDemandGrid'
// 'dojo/domReady!'
], function (declare, dom, on, Rest, Request, ColumnResizer, ColumnReorder, CellSelection, DijitRegistry, OnDemandGrid) {
var store = new Rest({target:'/api/XXXXXXEvents/?format=json',
sortParam: 'ordering', ascendingPrefix:'', descendingPrefix:'-'
});
// var cacheStore = Cache.create(store, {
// cachedStore: new (Memory.createSubclass(Trackable)) ()
// });
var grid = window.grid = new (declare([OnDemandGrid, ColumnResizer, ColumnReorder, CellSelection, DijitRegistry])) ({
collection: store,
selectionMode: 'single',
sort: 'id',
// idProperty: 'id',
columns: [
{field: 'id', label:'ID', resizeable: false},
{field: 'XXXXX_type', label:'XXXXX Type', resizeable: false},
{field: 'XXXXX_at', label:'XXXXX Time', resizeable: false},
{field:'XXXXX', label:'XXXXX Count', resizeable: false},
{field:'XXXXX', label:'XXXXX', resizeable: false},
{field:'XXXXX_info', label:'XXXXX Info', resizeable: false},
{field:'hidden', label:'Hidden', resizeable: false},
{field:'XXXXX', label:'XXXXX', resizeable: false},
{field:'XXXXX', label:'XXXXX', resizeable: false}
]
}, 'grid');
grid.startup();
on(dom.byId('queryForm'), 'submit', function(event) {
event.preventDefault();
grid.set('collection', store.filter({
// Pass a RegExp to Memory's filter method
// Note: this code does not go out of its way to escape
// characters that have special meaning in RegExps
last: new RegExp("^\d+$")
}));
});
on(dom.byId('queryForm'), 'reset', function() {
// Reset the query when the form is reset
grid.set('collection', store);
});
});
</script>
</head>
<body class="slate">
<div id="grid"></div>
</body>
</html>

You need to use the column formatter function for rendering data.
check the jsfiddle over here.
Check the examples over here
I have taken this example and modified as per your needs.
require([
'dgrid/Grid',
'dojo/domReady!'
], function(Grid) {
var data = [
{ id: 1, number: 7 },
{ id: 2, number: 8 },
{ id: 3, number: 9 }
];
function testFormatter(item){
//console.log(item,typeof(item));
var newItem;
if ( item == 7 )
newItem = 'Dog'
else if ( item == 8 )
newItem = 'Cat'
else if ( item == 9 )
newItem = 'Bird'
return newItem;
}
var columnsFormatter = [
{
label: "Number",
field: "number",
formatter: testFormatter
}
];
var grid = new Grid({
columns: columnsFormatter
}, "gridcontainer");;
grid.renderArray(data);
});

Creating grid using gridx of dojo

I have tried following example for creating grid using gridx of dojo by including all the src from online.
But it shows Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience and multipleDefine error
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dojo.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dom.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/store/Memory.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dijit/form/Button.js"></script>
<script
src="http://cdn.rawgit.com/oria/gridx/1.3/core/model/cache/Sync.js"></script>
<script src="http://cdn.rawgit.com/oria/gridx/1.3/Grid.js"></script>
<script src="http://cdn.rawgit.com/oria/gridx/1.3/modules/CellWidget.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/domReady.js"></script>
<script type="text/javascript">
var grid;
var store;
dojo.addOnLoad(function(dom, Memory, Button, Cache, Grid) {
name: 'gridx', store = new Memory({
data : [ {
id : 1,
feedname : 'Feed4',
startstop : 0,
pause : '',
config : ''
}, {
id : 2,
feedname : 'Feed5',
startstop : 0,
pause : '',
config : ''
} ]
});
var cacheClass = "gridx/core/model/cache/Sync";
var structure = [
{
id : 'feedname',
field : 'feedname',
name : 'Feed Name',
width : '110px'
},
{
id : 'startstop',
field : 'startstop',
name : 'Start/Stop',
width : '61px',
widgetsInCell : true,
navigable : true,
allowEventBubble : true,
decorator : function() {
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit.form.Button" ',
'onClick="onStartStopButtonClick();" ',
'data-dojo-attach-point="btn" ',
'class="startStopButtonPlay" ',
'data-dojo-props="iconClass:\'startStopButtonPlayIcon\'" ',
'></button></div>' ].join('');
}
},
{
id : 'pause',
field : 'pause',
name : 'Pause',
width : '61px',
widgetsInCell : true,
navigable : true,
allowEventBubble : true,
decorator : function() {
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
'onClick="onPauseButtonClick();" ',
'data-dojo-attach-point="btn2" ',
'class="pauseButton" ',
'data-dojo-props="iconClass:\'pauseIcon\'" ',
'></button></div>' ].join('');
}
},
{
id : 'config',
field : 'config',
name : 'Config',
width : '61px',
widgetsInCell : true,
navigable : true,
allowEventBubble : true,
decorator : function() {
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
'onClick="onConfigButtonClick();" ',
'data-dojo-attach-point="btn3" ',
'class="configButton" ',
'data-dojo-props="iconClass:\'configIcon\'" ',
'></button></div>' ].join('');
}
} ];
//Create grid widget.
grid = Grid({
id : 'grid',
cacheClass : Cache,
store : store,
structure : structure,
//autoHeight: true,
columnWidthAutoResize : false
});
//Put it into the DOM tree.
grid.placeAt('compactWidgetGrid');
//Start it up.
grid.startup();
// TODO: I need to make Memory and store global somehow so I can get the data before creating the grid!!
updateGridXData(Memory, store);
});
function createDataStore(Memory, store) {
currentGridXData = new Memory({
// TODO: Replace data here with actual feed data received from server!
data : [ {
id : 1,
feedname : 'testingThis1',
startstop : 0,
pause : '',
config : ''
}, {
id : 2,
feedname : 'testingThis2',
startstop : 0,
pause : '',
config : ''
}, {
id : 3,
feedname : 'testingThis3',
startstop : 0,
pause : '',
config : ''
}, {
id : 4,
feedname : 'testingThis4',
startstop : 0,
pause : '',
config : ''
}, {
id : 5,
feedname : 'testingThis5',
startstop : 0,
pause : '',
config : ''
}, {
id : 6,
feedname : 'testingThis6',
startstop : 0,
pause : '',
config : ''
}, {
id : 7,
feedname : 'testingThis7',
startstop : 0,
pause : '',
config : ''
} ]
});
return currentGridXData;
}
function updateGridXData(Memory, store) {
grid.model.clearCache();
var appFeedsStore;
// Create new data store for GridX
//This line was giving a JavaScript error because appFeedListJSON undefined.
//Commnent out and uncomment other line to see difference.
appFeedsStore = createDataStore(Memory, store);
//appFeedsStore = createDataStore(Memory, store);
grid.setStore(appFeedsStore);
grid.model.store.setData(appFeedsStore);
// grid.refresh();
grid.body.refresh();
}
var toggled = false;
function toggle() {
myToggleButton.set("iconClass", toggled ? "startStopButtonPlayIcon"
: "startStopButtonStopIcon");
toggled = !toggled;
}
function onPauseButtonClick() {
alert("Pause!");
}
function onConfigButtonClick() {
alert("Config!");
}
// onClick functions for the app three buttons: Start/Stop, Pause, Config
function onStartStopButtonClick() {
alert("onStartStopButtonClick!");
}
function onPauseButtonClick() {
alert("onPauseButtonClick!");
}
function onConfigButtonClick() {
alert("onConfigButtonClick!");
}
</script>
</head>
<body class="claro">
<div id="compactWidgetGrid"></div>
</body>
I am trying this out using Tomcat server but not able to get the grid.
Could you please help me with this?

You were the missing the dojo require statement. You can find the working code below. I believe you are a beginner in dojo so you can find excellent article about dojo # http://dojotoolkit.org/reference-guide/1.7/dojo/require.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js' data-dojo-config="async: true, parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/oria/gridx/1.3/resources/claro/Gridx.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/document.css">
<script type='text/javascript'>//<![CDATA[
var grid;
var store;
require({
packages: [
{
name: 'gridx',
location: '//cdn.rawgit.com/oria/gridx/1.3'
}
]
},[
//Require resources.
"dojo/dom",
"dojo/store/Memory",
"dijit/form/Button",
"gridx/core/model/cache/Sync",
"gridx/Grid",
"gridx/modules/CellWidget",
"dojo/domReady!"
], function(dom, Memory, Button, Cache, Grid){
store = new Memory({
data: [
{ id: 1, feedname: 'Feed4', startstop: 0, pause: '', config: ''},
{ id: 2, feedname: 'Feed5', startstop: 0, pause: '', config: ''}
]
});
var cacheClass = "gridx/core/model/cache/Sync";
var structure = [
{ id: 'feedname', field: 'feedname', name: 'Feed Name', width: '110px' },
{ id: 'startstop', field: 'startstop', name: 'Start/Stop', width: '61px',
widgetsInCell: true,
navigable: true,
allowEventBubble: true,
decorator: function(){
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit.form.Button" ',
'onClick="onStartStopButtonClick();" ',
'data-dojo-attach-point="btn" ',
'class="startStopButtonPlay" ',
'data-dojo-props="iconClass:\'startStopButtonPlayIcon\'" ',
'></button></div>'
].join('');
},
setCellValue: function(data){
//"this" is the cell widget
this.btn.set('label', data);
}
},
{ id: 'pause', field: 'pause', name: 'Pause', width: '61px',
widgetsInCell: true,
navigable: true,
allowEventBubble: true,
decorator: function(){
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
'onClick="onPauseButtonClick();" ',
'data-dojo-attach-point="btn2" ',
'class="pauseButton" ',
'data-dojo-props="iconClass:\'pauseIcon\'" ',
'></button></div>'
].join('');
},
setCellValue: function(data){
//"this" is the cell widget
this.btn2.set('label2', data);
}
},
{ id: 'config', field: 'config', name: 'Config', width: '61px',
widgetsInCell: true,
navigable: true,
allowEventBubble: true,
decorator: function(){
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
'onClick="onConfigButtonClick();" ',
'data-dojo-attach-point="btn3" ',
'class="configButton" ',
'data-dojo-props="iconClass:\'configIcon\'" ',
'></button></div>'
].join('');
},
setCellValue: function(gridData, storeData, cellWidget){
//"this" is the cell widget
cellWidget.btn3.set('label3', data);
}
}
];
//Create grid widget.
grid = Grid({
id: 'grid',
cacheClass: Cache,
store: store,
structure: structure,
autoHeight: true,
columnWidthAutoResize: false
});
//Put it into the DOM tree.
grid.placeAt('compactWidgetGrid');
//Start it up.
grid.startup();
// TODO: I need to make Memory and store global somehow so I can get the data before creating the grid!!
updateGridXData(Memory, store);
});
function createDataStore(Memory, store){
currentGridXData = new Memory({
// TODO: Replace data here with actual feed data received from server!
data: [
{ id: 1, feedname: 'testingThis1', startstop: 0, pause: '', config: ''},
{ id: 2, feedname: 'testingThis2', startstop: 0, pause: '', config: ''},
{ id: 3, feedname: 'testingThis3', startstop: 0, pause: '', config: ''},
{ id: 4, feedname: 'testingThis4', startstop: 0, pause: '', config: ''},
{ id: 5, feedname: 'testingThis5', startstop: 0, pause: '', config: ''},
{ id: 6, feedname: 'testingThis6', startstop: 0, pause: '', config: ''},
{ id: 7, feedname: 'testingThis7', startstop: 0, pause: '', config: ''}
]
});
return currentGridXData;
}
function updateGridXData(Memory, store) {
grid.model.clearCache();
var appFeedsStore;
// Create new data store for GridX
//This line was giving a JavaScript error because appFeedListJSON undefined.
//Commnent out and uncomment other line to see difference.
appFeedsStore = createDataStore(Memory, store, appFeedListJSON);
//appFeedsStore = createDataStore(Memory, store);
grid.setStore(appFeedsStore);
grid.model.store.setData(appFeedsStore);
// grid.refresh();
grid.body.refresh();
//},
//error: function (error) {
// console.log("Inside ERROR");
// }
//});
}
function onStartStopButtonClick(){
alert("Start/Stop!");
}
var toggled = false;
function toggle(){
myToggleButton.set("iconClass", toggled ? "startStopButtonPlayIcon" : "startStopButtonStopIcon");
toggled = !toggled;
}
function onPauseButtonClick(){
alert("Pause!");
}
function onConfigButtonClick(){
alert("Config!");
}
// onClick functions for the app three buttons: Start/Stop, Pause, Config
function onStartStopButtonClick(){
alert("onStartStopButtonClick!");
}
function onPauseButtonClick(){
alert("onPauseButtonClick!");
}
function onConfigButtonClick(){
alert("onConfigButtonClick!");
}
//]]>
</script>
</head>
<body>
<body class="claro">
<div id="compactWidgetGrid"></div>
</body>
</html>

angularjs , ui-grid : Display information in a basic grid not working

I am a newbie in angularjs and ui-grid.
I am trying to display a basic grid with employee information- id, name, salary, designation, grade.
This is the output of running index.html :
**app.js : **
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.gridOptions1 = {
enableSorting: true,
columnDefs: [
{ field: 'eid' },
{ field: 'ename' },
{ field: 'salary' },
{ field: 'designation' },
{ field: 'grade', enableSorting: false }
],
onRegisterApi: function( gridApi ) {
$scope.grid1Api = gridApi;
}
};
scope.gridOptions2 = {
enableSorting: true,
onRegisterApi: function( gridApi ) {
$scope.grid2Api = gridApi;
},
columnDefs: [
{
field: 'eid',
sort: {
direction: uiGridConstants.DESC,
priority: 1
}
},
{
field: 'ename',
sort: {
direction: uiGridConstants.DESC,
priority: 0
}
},
{
field: 'salary',
sort: {
direction: uiGridConstants.DESC,
priority: 2
}
},
{ field: 'designation', enableSorting: false },
{
field: 'grade',
sort: {
direction: uiGridConstants.DESC,
priority: 3
}
}
]
};
$http.defaults.headers.common['Accept'] = "application/json";
$http.defaults.headers.common['Authorization'] = "Basic dG9tY2F0OnRvbWNhdA==";
$http.get('http://localhost:8080/EmployeeManagementSystemAngJS-0.0.1-SNAPSHOT/viewEmployeesPath')
.success(function(response) {
$scope.gridOptions1.data = response;
$scope.gridOptions2.data = response;
});
}]);
**main.css : **
.grid {
width: 500px;
height: 200px;
}
**index.html : **
<!doctype html>
<html ng-app="app">
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="ui-grid-stable.js"></script>
<link href="ui-grid-stable.css"></link>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<br> <br>
<div id="grid1" ui-grid="gridOptions1" class="grid"></div>
<br>
<br>
<div id="grid2" ui-grid="gridOptions2" class="grid"></div>
</div>
</body>
</html>
Could any one point out where i am going wrong?
I could not find many references to ui-grid. A few links to good content will be very helpful.
I referred to this and this. Both result in the same output.
I have added ui-grid-stable.css and ui-grid-stable.js in the project folder itself.

i meet the same problem
when i change the format of css to
<link rel="stylesheet" href="/resources/js/lib/ui-grid/ui-grid.min.css"/>
then it's fixed

Try with this url, it worked for me :)
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">

Develop Reference

JavaScript is the programming language of the Web.

Rally Custom HTML - Filter on Milestones - javascript

Related

ExtJS throwing Invalid domNode reference or an id of an existing domNode: null when trying to bind one element to the config of another

How to load grid data with json data on ajax sucess

Dgrid - Display label for number (i.e. 02 = Cat) I want to display Cat - not the number

Creating grid using gridx of dojo

angularjs , ui-grid : Display information in a basic grid not working

Categories

Resources