Dojo Grid to html or report - dojox.grid.datagrid

Is there a way to get the results from a Dojo Grid to a report or PDF? Cant really find any info on that. Maybe convert the records in the Dojo Grid into HTML and then to a report?

This is what I am doing right now. Just need to figure out a way to get the results of the grid into html or some sort of report (PDF maybe)
HTML
id="gridNoColumnSets_impediments" class="gridclassGrid"
gridNoColumnSets_impediments = new (declare([Grid, Selection, ColumnSet]))({
// use Infinity so that all data is available in the grid
bufferRows: Infinity,
cellNavigation: false,
escapeHTMLInData: false,
showHeader: true,
noDataMessage: "No results for this search",
loadingMessage: "Loading data...",
selectionMode: "single",
}, "gridNoColumnSets_impediments");
gridNoColumnSets_impediments.on(".field-id:mouseover", selectStateimpediments);
var ColumnSets_impediments = [
[
[
{label: 'id', field: 'id', sortable: false},
{label: 'ID__', field: 'ID__'},
{label: 'IMPEDIMENT', field: 'IMPEDIMENT'},
{label: 'OTHER_NAME', field: 'OTHER_NAME'},
{label: 'RIVER', field: 'RIVER'},
{label: 'COUNTY', field: 'COUNTY'},
{label: 'HU_NAME', field: 'HU_NAME'},
{label: 'DAM_TYPE', field: 'DAM_TYPE'},
{label: 'OWNER', field: 'OWNER'},
{label: 'STATE_AGCY', field: 'STATE_AGCY'},
{label: 'FED_AGCY', field: 'FED_AGCY'}
]
],
];
gridNoColumnSets_impediments.set("columnSets", ColumnSets_impediments);
function updateGridimpediments(featureSet) {
var data = arrayUtils.map(featureSet.features, function (entry, i) {
return {
ID__: entry.attributes.ID__,
id: entry.attributes.OBJECTID,
IMPEDIMENT: entry.attributes.IMPEDIMENT,
OTHER_NAME: entry.attributes.OTHER_NAME,
RIVER: entry.attributes.RIVER,
COUNTY: entry.attributes.COUNTY,
HU_NAME: entry.attributes.HU_NAME,
DAM_TYPE: entry.attributes.DAM_TYPE,
OWNER: entry.attributes.OWNER,
STATE_AGCY: entry.attributes.STATE_AGCY,
FED_AGCY: entry.attributes.FED_AGCY
};
});
// If you use a store...
dataStore = new Memory({
"data": data,
"idProperty": "id"
});
gridNoColumnSets_impediments.set("store", dataStore);
gridNoColumnSets_impediments.startup();
}

Related

Meteor multiple-select autoform

I'm new to meteor and I have problems with the meteor autoform from aldeed/meteor-autoform
I'd like to implement a Multiple-selection box.
Exercises = new Mongo.Collection('exercises');
ExerciseSchema = new SimpleSchema({
name: {
label: "Name",
type: String
},
tags: {
label: "Tags",
type: Tags
}});
Tags = new SimpleSchema({
wow: {
type: String,
allowedValues: ['red', 'green', 'blue'],
autoform: {
options: [
{label: "Red", value: "red"},
{label: "Green", value: "green"},
{label: "Blue", value: "blue"}
]
}
}});
And in my html I insert
{{#autoForm collection="Exercises" id="insertExerciseForm" type="insert" resetOnSuccess=true}}
<div class="card-content">
{{> afQuickField name='tags.wow' type='select-multiple'}}
</div>
In the Browser it looks correct like
Multiple select box select
But when I select multiple elements and click the submit button from my Autoform, I get this error in my Browser Console:
Error in insertExerciseForm insert Error: Wow must be of type String
When I remove the type='select-multiple' from the afQuickField then I can select only one element and it works fine. But I need to select mutiple elements
Can someone help me?
I think that type: [String] instead of type: String would do the job, according to the docs: https://github.com/aldeed/meteor-simple-schema
[String] does not help.
I found it out.
Tags = new SimpleSchema({
wow: {
type: Array,
allowedValues: ['red', 'green', 'blue'],
autoform: {
options: [
{label: "Red", value: "red"},
{label: "Green", value: "green"},
{label: "Blue", value: "blue"}
]
},'wow.$': {
type: String
},
}});
but now, it just saves the value in MongoDB, how can I save label and value?

ag-Grid, try to make Tree Demo work using own data

I like the ag-Grid because it's less buggy, fast and works with many frameworks.
So I tried the Tree Data, no need to tell the link between parents and children, simply lay down the data in structure, specify some options, Bingo! But, when I plug in my API, it tells me
"TypeError: rowData is undefined"
from inside of ag-grid.js even though Watch clearly shows it has the array. There are some answered Question here regarding customization with internal api. Mine is not.
I then use the official demo as a base, set up a Fiddler to grab the raw data in JSON replace demo data to make it hardcoded for a test to determine if it's problem with own API or something else. Here is the Plunker. Note it's totally based on the official javaScript Demo of Tree Data, Tree Data Example, the first one.
In case you don't want to see Plunker, here is my .js:
var columnDefs = [
{headerName: "Client", field: "Client", cellRenderer: 'group'},
{headerName: "Program", field: "Program"}
/*{headerName: "Group", field: "xgroup", cellRenderer: 'group'}, // cellRenderer: 'group'}, -- this "group" is one of the default value option for built-in cellRenderer function, not field.
//{headerName: "Athlete", field: "athlete"},
//{headerName: "Year", field: "year"},
{headerName: "Country", field: "country"}
*/
];
var myData = [
{
'Client': 'Goodle',
'Program': 'no grid',
'kids': []
},
{
'Client': 'Facebrook',
'Program': 'grids',
'kids': [
{
'Client': 'Facebrook',
'Program': 'ag-Grid'
},
{
'Client': 'Facebrook',
'Program': 'ui-grid'
}
]
}
/*{xgroup: 'Group A',
participants: [
/*{athlete: 'Michael Phelps', year: '2008', country: 'United States'},
{athlete: 'Michael Phelps', year: '2008', country: 'United States'},
{athlete: 'Michael Phelps', year: '2008', country: 'United States'}*/
/*]},
{xgroup: 'Group B', athlete: 'Sausage', year: 'Spaceman', country: 'Winklepicker',
participants: [
{athlete: 'Natalie Coughlin', year: '2008', country: 'United States'},
{athlete: 'Missy Franklin ', year: '2012', country: 'United States'},
{athlete: 'Ole Einar Qjorndalen', year: '2002', country: 'Norway'},
{athlete: 'Marit Bjorgen', year: '2010', country: 'Norway'},
{athlete: 'Ian Thorpe', year: '2000', country: 'Australia'}
]},
{xgroup: 'Group C',
participants: [
{athlete: 'Janica Kostelic', year: '2002', country: 'Crotia'},
{athlete: 'An Hyeon-Su', year: '2006', country: 'South Korea'}
]}*/
];
var gridOptions = {
columnDefs: columnDefs,
rowData: myData,
rowSelection: "single",
enableSorting: "true", unSortIcon: "true",
enableColResize: "true",
enableRangeSelection: "true",
suppressCellSelection: "false",
showToolPanel: "true",
supressCopyRowsToClipboard: true,
supressCellSelection: false,
getNodeChildDetails: getNodeChildDetails,
onGridReady: function(params) {
params.api.sizeColumnsToFit();
}
};
function getNodeChildDetails(rowItem) {
if (rowItem.Client) {
return {
group: true,
// open C be default
//expanded: rowItem.ClientName === 'Group C',
// provide ag-Grid with the children of this group
children: rowItem.kids,
// this is not used, however it is available to the cellRenderers,
// if you provide a custom cellRenderer, you might use it. it's more
// relavent if you are doing multi levels of groupings, not just one
// as in this example.
//field: 'group',
// the key is used by the default group cellRenderer
key: rowItem.Client
};
} else {
return null;
}
}
function onFilterChanged(value) {
gridOptions.api.setQuickFilter(value);
}
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
});
HTML:
<html>
<head>
<!-- you don't need ignore=notused in your code, this is just here to trick the cache -->
<script src="https://ag-grid.com/dist/ag-grid/ag-grid.js"></script>
<script src="script.js"></script>
</head>
<body>
<input placeholder="Filter..." type="text"
onpaste="onFilterChanged(this.value)"
oninput="onFilterChanged(this.value)"
onchange="onFilterChanged(this.value)"
onkeydown="onFilterChanged(this.value)"
onkeyup="onFilterChanged(this.value)"/>
<div id="myGrid" class="ag-fresh" style="height: 450px; margin-top: 4px;"></div>
</body>
</html>
Need some experts!
You need to alter getNodeChildDetails to have this:
function getNodeChildDetails(rowItem) {
if (rowItem.Client && rowItem.kids && rowItem.kids.length > 0) {
As you have it you're telling the grid that any item with Client is a parent node, but what you really mean in your data is any item with Client AND kids is a parent.
Remember that the grid can have multiple levels so a child can be a parent too.

ExtJS 4.2.0 gridpanel inside viewport rendering extra column

I am using ExtJS 4.2.0 and testing on google chrome 42.0.2311.152 m. Here
is my fiddle:('ct' is nothing but just a div)
http://jsfiddle.net/5zpx4556/
Ext.define('SimpleGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.SimpleGrid',
columns: [
{
dataIndex: 'name'
}, {
dataIndex: 'status'
}, {
dataIndex: 'enabled'
}
],
store: {
fields: ['sex', 'name', 'status', 'enabled'],
data: [
{ sex: 'male', name: 'Tom', status: 'Available', enabled: true }
]
}
});
Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'stretch'
},
renderTo:'ct',
items: [
{
xtype: 'SimpleGrid'
}
]
});
I have already posted this as a bug in the sencha forum but would be great if someone could provide a workaround for this scenario if at all it is a bug.
Not sure of the align:'stretch' has anything to do with it but there should be no reason to render the extra column.
Any help appreciated.
Thanks.
It is not a column, it is just empty space left after rendering three columns. Add flex:1 to one of the columns to fill the width.

use form for add and update data,how is that possible in extjs4?

i have a form panel and a tree panel
the form is used to add new users, the tree is used to show the list of users
what i want is to right click a node in my tree ,click edit (already can do that) then i have my data in the add form panel and be able to modify there and update my user
so basically use the same form for adding and updating
this is how im trying to do up to know
but its not working at all
i added a model to my tree,i used loadRecord(rec), but i dont know how to bind my tree data with the form fields!
tried adding displayfield with same name from my tree model!!
my tree model and store:
Ext.define('TreeModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'text' },
{ name: 'id' }
]
});
window.ATreeStore = Ext.create('Ext.data.TreeStore', {
model: 'TreeModel',
root: Ext.decode(objt.TreeToJson()),
proxy: {
type: 'ajax'
},
sorters: [{
property: 'leaf',
direction: 'ASC'
}, {
property: 'text',
direction: 'ASC'
}]
});
my tree menu:
var myContextMenu = new Ext.menu.Menu({
items: [{
text: 'Edit',
handler: function () {
Ext.getCmp('addaform').getForm().loadRecord(rec);
}
}
}]
my form:
Ext.define("Ext.app.Adduser", {
extend: "Ext.form.Panel",
title: 'Add user',
id : 'addform',
closable: true,
collapsible: true,
animCollapse: true,
draggable: true,
resizable: true,
margin: '5 5 5 5',
height: 400,
frame: true,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
anchor: '100%'
},
items: [{
layout: 'column',
border: false,
items: [{
padding: '5',
columnWidth: .5,
border: false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: ' Name',
name: 'name',
allowBlank: false,
displayfield:'id',//
anchor: '95%'
}]
}, {
padding: '5',
columnWidth: .5,
border: false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'First name',
name: 'fname',
allowBlank: false,
anchor: '95%'
}, {
xtype: 'textarea',
fieldLabel: 'Profile',
name: 'prof',
anchor: '95%'
}]
}],
buttons: [{
text: 'Save',
handler: function () {
this.up('form').getForm().submit
({
url: 'AddData.ashx',
params: { action: 'add' },
success: function (form, action)
{
Ext.MessageBox.show({ title: 'Success !',
msg: 'User added successfully<br />',
icon: Ext.MessageBox.INFO,
buttons: Ext.MessageBox.OK
}) }
}) }]
thank you
If your TreePanel uses a TreeStore which in turn has a Ext.data.Model, then when you right click on a node (say nodeA), you should be just able to do form.loadRecord(nodeA), the API for loadRecord is here
If it's still not clear, I think this blog post could help, it talks about loading a grid record into a form. I know it's not ExtJS 4, but the key functions are the same.
Ok, let me show this with a super simple example, hope it will help.
First we create the form that we want to display stuff in, note that the renderTo property is bound to a div inside my HTML, so you might need to change that. Also note that the name property of the textarea and textfield, they are the key for the loadRecord to work, they have to match the fields defined in the model later.
var form = Ext.create('Ext.form.Panel',{
renderTo : 'form-div',
items : [{
xtype : 'textarea',
fieldLabel : 'label 1',
name : 'name'
},{
xtype : 'textfield',
fieldLabel : 'label 2',
name : 'age'
}]
});
Next, we create the tree to display our data, we start by creating a simple model :
Ext.define('Person',{
extend : 'Ext.data.Model',
fields : [{
name : 'name',
type : 'string'
},{
name : 'age',
type : 'int'
}]
});
Then we create a TreeStore that uses that model and initialize it with some inline data:
var store = Ext.create('Ext.data.TreeStore',{
model : 'Person',
root : {
expanded : true,
children : [{
name : 'John',
age : 10,
leaf : true
},{
name : 'Joe',
age : 100,
leaf : true
}]
}
});
Then we create the tree to display the data in the store. (Note that the nodes will show up as "undefined" because we are not using the default "text" property of a Node)
var tree = Ext.create('Ext.tree.Panel',{
height : 300,
width : 300,
store : store,
rootVisible : false,
renderTo : 'tree-div',
listeners : {
itemclick : function(view, record){
form.loadRecord(record);
}
}
});
Now, you should see a tree with two nodes both displayed as "undefined" on your page, as well as a Form with a textarea and a textfield. If you click on a node inside the tree, the form will display the name and age of the selected node.

ExtJS Table Layout not displaying fieldlabels or adding padding

I have a form which has a number of different fields and ultimately will become a dynamic formPanel.
I've opted for the table layout since it's easier to lay out the components but for some reason, the defaults settings are not applying and no field Labels are being displayed for any fields.
I've set out the configuration like:
SearchForm = Ext.extend(Ext.FormPanel, {
id: 'myForm'
,title: 'Search Form'
,frame:true
,waitMessage: 'Please wait.'
,labelWidth:80,
buttonAlign:'center'
,initComponent: function() {
var config = {
items: [{
layout:{
type:'table',
columns:5
},
defaults:{
//width:150,
bodyStyle:'padding:20px'
},
items:[{
xtype: 'label',
name: 'dateLabel',
cls: 'f',
text: "Required:"
},
{
xtype: 'datefield',
fieldLabel: "From Date",
value: yesterday,
width: 110,
id: 'date1'
},
{
xtype: 'datefield',
fieldLabel: "To Date",
id: 'date2',
width: 110,
value: yesterday
},
{
xtype: 'displayfield', value: ' ',
height:12,
colspan:2
}
],
buttons: [{
text: 'Submit',
id: "submitBtn",
handler: this.submit,
scope: this
},{
text: 'Reset',
id: "resetBtn",
handler: this.reset,
scope: this
}
]
}]};
// apply config
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
SearchForm.superclass.initComponent.apply(this, arguments);
}
});
The problem is because you're defining the layout to be table, hence ExtJS not rendering the labels of fields correctly.
In each column, wrap your fields with an Ext.Container and give the panel a layout of form. That will tell ExtJS to render the labels correctly.