dojo data grid in custom widget is not rendering - javascript

hi all i have created a custom widget which in the future will contain more than a data grid however i have had considerable difficulty trying to get the data grid to render.
I have no errors and all the following seems to be being called as i suspect; perhaps it is an asynch issue?
Any help on this would be great, my code as followed.
AssetGridWidget.js
define([
"dojo/_base/declare",
"dojo/_base/fx",
"dojo/_base/lang",
"dojo/dom-style",
"dojo/mouse",
"dojo/on",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/AssetGridWidget.html",
"dojox/grid/DataGrid",
"dojo/data/ItemFileWriteStore",
"dojo/store/Memory",
"dojo/data/ObjectStore"]
, function(declare, baseFx, lang, domStyle, mouse, on, _WidgetBase, _TemplatedMixin, template, DataGrid,ifilereadstore, Memory, ObjectStore){
return declare([_WidgetBase, _TemplatedMixin], {
widgetInTemplate : true,
templateString: template,
postCreate: function(){
this.layout =
[
{ name: 'Name', field: 'name', width: '100px' },
{ name: 'Color', field: 'color', width: '100px' }
];
this.data = {
data :
{items :[
{ name : 'John Doe', color: 'green' },
{ name : 'Jane Doe', color: 'red' }
],
label:'name',
identifier:'color'
}
};
this._employeeStore = new Memory({data: this.data, idProperty: "name"});
this._dataStore = ObjectStore({objectStore: this._employeeStore});
this.grid = new DataGrid
(
{
noDataMessage: "Hazza",
store: this._dataStore,
query: { id: "*" },
autoRender : true,
structure: this.layout
},
"grid"
);
this.inherited(arguments);
},
startup: function() {
this.grid.startup();
}
});
});
my template is as follows:
AssetGrididget.html
<div>
<div data-dojo-attach-point="grid" style="width: 800px; height: 800px;"></div>
</div>
finally the page i am calling it from
Index.html
<head>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
</head>
<body>
<div id="gridContainer" style="width: 300px; height: 300px;"></div>
<script>
require(["dojo/request", "dojo/dom", "dojo/_base/array", "tartarus/widget/AssetGridWidget", "dojo/domReady!"],
function(request, dom, arrayUtil, AssetGridWidget){
var gridly = new AssetGridWidget();
gridly.placeAt("gridContainer");
gridly.startup();
});
</script>
</body>
I have been smacking my head against a brick wall for hours on this so any help is greatly appreciated!

You are passing "grid" as the second argument to the DataGrid constructor. This will attempt to find a DOM node in the document with the ID grid and replace that with the grid.
However, based on your template, it looks like what you're actually intending to do is to replace your grid attach point with the grid instead. Instead of "grid", your second argument to the constructor should be this.grid.
(I might also suggest naming the attach point gridNode instead to distinguish it, since you are immediately assigning the actual grid instance to this.grid thereafter.)

Related

jsfiddle using dojo not picking up styles for unknown reasons

I'm attempting to copy an existing jsfiddle
require([
"dojo/dom",
"dijit/Dialog",
"dijit/form/Button",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(dom, DijitDialog, Button, BorderContainer, ContentPane) {
(new Button({
label: 'Show dialog',
onClick: function() {
var layout = new BorderContainer({
design: "headline",
style: "width: 400px; height: 400px; background-color: yellow;"
});
var centerPane = new ContentPane({
region: "center",
style: "background-color: green;",
content: "center"
});
var actionPane = new ContentPane({
region: "bottom",
style: "background-color: blue;"
});
(new Button({ label: "OK"})).placeAt(actionPane.containerNode);
(new Button({ label: "Cancel"})).placeAt(actionPane.containerNode);
layout.addChild(centerPane);
layout.addChild(actionPane);
layout.startup();
var dialog = new DijitDialog({
title: 'dialog title',
style: {
//width: '400px',
//height: '400px',
},
content: layout
});
dialog.containerNode.style.backgroundColor = "red";
dialog.startup();
dialog.show();
}
})).placeAt(document.body);
to a new jsfiddle
require([
. . .
})
that uses a newer version of dojo but the EXACT same code. I've added the external resource "claro.css" for the appropriate version of dojo that I'm using in the Frameworks setting, and the same LOAD TYPE in the JavaScript settings, but my fiddle is clearly missing styles since it is not rendering like the original: the dialog box and BorderContainer are missing borders, background colors, and essentially all styles.
This is even more important since the same thing is happening (styles not being applied) to a dialog dijit in an application that I'm working on.
What am I missing in my fiddle??
You are missing the claro body tag. Click on Settings icon on HTML and add this to the body tag.
<body class="claro">

dgrid in a custom widget

I have a custom widget to which I pass data from backend. Grid shown on the correct place but not showing data on it. I tried with hardcoded data but only the headers are shown. Grid has height and width set.
Here is the code snippet. I would appreciate any help. thanks.
define(["dojo/_base/declare", "dijit/_WidgetBase",
"dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin",
"dijit/_OnDijitClickMixin",
GridWidget.js
define(["dojo/_base/declare", "dijit/_WidgetBase",
"dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin",
"dijit/_OnDijitClickMixin", "dojo/text!./templates/GridWidget.html",
"dgrid/Grid","dgrid/Keyboard", "dgrid/Selection", "dgrid/extensions/DijitRegistry", "dstore/Memory", "dstore/Trackable"], function(declare, _WidgetBase,
_TemplatedMixin, _WidgetsInTemplateMixin,
_OnDijitClickMixin, template, Grid, Keyboard, Selection, DigitRegistry, Memory, Trackable) {
return decalare("GridWidget", [_WidgetBase, _OnDijitClickMixin, _TemplatedMixin, _WidgetsInTemplateMixin], {
widgetsInTemplate: true,
baseClass: 'GridWidget',
templateString: template,
data: null,
store: null,
grid: null,
columns: null,
constructor: function(data) {
this.data = data;
},
_setData: function(input) {
if (input) {
this._set("data", input);
}
},
getData: function() {
return this.data;
},
postCreate : function() {
this.inherited(arguments);
var StandardGrid = declare([Grid, Selection, Keyboard, DijitRegistry]);
this.store = new (declare([Trackable, Memory]))({
data : this.data,
idProperty : "isbn"
});
this.columns = {
bookTitle : "Title",
first : "First Name",
last : "Last Name",
releaseDate : "Release Date"
};
this.grid = new StandardGrid({
collection : this.store,
columns : this.columns,
cellNavigation : false,
noDataMessage : "No results.",
loadingMessage : "Loading Data...",
}, this.gridNode);
}
startup: function() {
if (this._started) return;
this.inherited(arguments);
if (this.grid) {
this.grid.startup();
}
}
});
});
GridWidget.html
<div class="${baseClass}">
<div class="${baseClass}Grid"data-dojo-attach-point="gridNode"></div>
</div>
testGridWidget.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test: Dgrid 0.4</title>
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css" media="screen">
<script>
//var startTime = new Date();
var CONTEXT_ROOT = 'DtossApp';
var djConfig = (function(){
var base = location.href.split("/");
base.pop();
base = base.join("/");
return {
parseOnLoad: true,
isDebug: true,
packages: [{
name: CONTEXT_ROOT,
location: base + "/widget"
}]
};
})();
</script>
</head>
<body class="claro">
<script>
function showGrid() {
require([
CONTEXT_ROOT + '/GridWidget',
'dojo/dom-construct',
'dojo/dom',
'dijit/layout/ContentPane',
], function (GridWidget, domConstruct, dom, ContentPane) {
var testWidget = new GridWidget({ data: createData()});
var cp = new ContentPane({
title : "Book List",
content : testWidget});
var ref = dom.byId('grid');
domConstruct.place(cp.domNode, ref);
testWidget.startup();
//Copied from dgrid laboratory sample..
function createData () {
var data = [];
var column;
var i;
for (i = 0; i < 50; i++) {
data.push({});
for (column in { first: 1, last: 1, bookTitle: 1, releaseDate: 1 }) {
data[i].isbn = i;
data[i][column] = column + '_' + (i + 1);
}
}
return data;
}
});
}
</script>
<h1>Test: Dgrid 0.4</h1>
<div id="buttonContainer">
<button class="action" onClick="showGrid1()">Show Grid</button>
</div>
<div id="grid"></div>
<!-- load dojo and provide config via data attribute -->
<script src="dojo/dojo/dojo.js"></script>
</body>
</html>
GridWidget.css
.GridWidgetGrid {
height: 300px;
width: 80%;
}
Dgrid tutorial shows the following note:
When using the basic Grid module, the grid will be empty until you call renderArray. The more advanced store-based implementations like OnDemandGrid will populate themselves from the store automatically.
I changed my Grid to OnDemandGrid which picks data from store automatically.
Also calling renderArray in startup method populates data for Grid.

making grid rows do some event on clicking like opening any document say pdf in DOJO(JavaScript Based toolkit)

I want to perform click event on rows , Json data is coming from a servlet, which is contaainig data, roll number is the unique field through which I want to open a pdf document which is itself named as roll number. please help me to do it
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"
%>
<!DOCTYPE html>
<html>
<head>
<script>
function onReportTypesSelect()
{
if(getDijitValue('data_types') != 'Select')
{
if(getDijitValue('data_types') == 'class_level')
{
require([
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore",
"dojo/query",
"dojo/domReady!"
], function(JsonRest, Memory, Cache, DataGrid, ObjectStore, query){
var userStore, dataStore, grid;
userStore = new Cache(JsonRest({target: "<%=request.getContextPath()%>" + "/data/classServlet"}), new Memory());
grid = new DataGrid({
id:"class_level_grid",
store: dataStore = new ObjectStore({objectStore: userStore}),
structure: [
{name: 'Roll Number', field: 'roll', width: 'auto', defaultValue: ""},
{name: 'Name', field: 'name', width: '100px', defaultValue: ""},
{name: 'Class', field: 'class', width: '75px', defaultValue: ""}
],
style:"font-family: calibri, Garamond, Comic Sans; font-size: 10;",
selectionMode:'single',
autoHeight: 10,
rowsPerPage:40,
rowSelector:'20px',
selectable: true
}
, "class_level_grid_div"); // make sure you have a target HTML element with this id
grid.startup();
});
}
}
}
</script>
</head>`enter code here`
<body>
<div id="data_types" data-dojo-type="dijit/form/Select" style="width: 200px;" onchange="onReportTypesSelect()">
<span data-dojo-value="Select"><b>Select</b></span>
<span data-dojo-value="class_level"><b>class Level</b></span>
</div>
<div id="class_level_grid_div" style="width: 95%; height: 90%;"> </div>
</div>
</body>
</html>
The easiest way to do what you want is to set an onClickhandler for the Rows.
I needed to highlight the sindle Features of our Service when they were selected and stored in a grid. This is my Workarround, maybe it helps you!
OnClickZoom = on(yourGridName,"RowDblClick", function(evt){
//get the clicked rowindex
var idx = evt.rowIndex, item = this.getItem(idx);
// get a value out of the item
var value = this.store.getValue(item, "yourFieldName");
//highlight geometry
highlightGeometry(value, true);
});
In your case you must get your rollnumber or the field which can be used to open the PDF you needed. Something like
"..//myMenu/myPDF/"+theFileName+".pdf";
Regards

Consume WCF crossdomain using JSONP to store in datagrid and view data dojo?

I can't find this anywhere and i don't know why the cross domain REST request is not solved by dojo. anyways here is the problem:
I am implementing dojo data-grid, and i am trying to get the data for the grid from a WCF that is not in my domain, so i crossdomain problem is raised and i am trying to over come this problem by using JSONP.
but i am a newbie in dojo so i am probably doing something wrong. here is my code:
require([
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore",
"dojo/query",
"dijit/form/Button",
"dojo/domReady!",
"dojo/request/script","dojo/dom-construct"
],function(script, domConstruct){
//make the request just as before
script.get("http://localhost:8060/ListService.svc/LoadLists?uid=c4446476-15e6-e111-9ecb-b7c5971d170a", {
jsonp: "callback",
query: {q: "#dojo"}
}).then(function(data){
test = data;
}).then(function(){
console.log(results);
});
}, function (JsonRest, Memory, Cache, DataGrid, ObjectStore ,query) {
grid = new DataGrid({
store: dataStore = test,
structure: [
{ name: "Blog Id", field: "id", width: "50px", },
{ name: "Name", field: "listtype", width: "200px",classes:"Name" },
{ name: "Phone Number", field: "longlevel", width: "200px",classes:"test" }
]
}, "gridTest"); // make sure you have a target HTML element with this id
grid.startup();
dojo.query("body").addClass("claro");
grid.canSort = function () { return false; };
});
the error i am getting is query is not a function. any ideas how to implement this correctly.
Simple mistake just put the data grid command inside the first then with the data returning
require([
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore",
"dojo/query",
"dijit/form/Button",
"dojo/domReady!",
"dojo/request/script","dojo/dom-construct"
],function(script, domConstruct){
//make the request just as before
script.get("http://localhost:8060/ListService.svc/LoadLists?uid=c4446476-15e6-e111-9ecb-b7c5971d170a", {
jsonp: "callback",
query: {q: "#dojo"}
}).then(function(data){
function (JsonRest, Memory, Cache, DataGrid, ObjectStore ,query) {
grid = new DataGrid({
store: dataStore = test,
structure: [
{ name: "Blog Id", field: "id", width: "50px", },
{ name: "Name", field: "listtype", width: "200px",classes:"Name" },
{ name: "Phone Number", field: "longlevel", width: "200px",classes:"test" }
]
}, "gridTest"); // make sure you have a target HTML element with this id
grid.startup();
dojo.query("body").addClass("claro");
grid.canSort = function () { return false; };
})
}).then(function(){
console.log(results);
});
};
If you still find a problem probably because the grid is created before the request is returning from the wcf.
if that happened please use the Deferred in dojo 1.8 which make you in control of you processes sequence.
so you will be able to call the request give it some time and then put the data in the grid to be viewed.

Populating combo from XmlStore with Ext js designer

I am trying to get working a simple (noob) examle of Combo loaded with data from Xml file.
Here is my xml:
<?xml version="1.0" encoding="UTF-8"?>
<accounts>
<account>
<name>Savings Account</name>
<id>1</id>
</account>
<account>
<name>Current Account</name>
<id>2</id>
</account>
</accounts>
When I configure and add XmlStore, it reports 2 records found.
Here is the code for the XmlStore:
cteo = Ext.extend(Ext.data.XmlStore, {
constructor: function(cfg) {
cfg = cfg || {};
cteo.superclass.constructor.call(this, Ext.apply({
storeId: 'cteo',
url: 'cteo.xml',
record: 'account',
data: '',
fields: [
{
name: 'name',
mapping: 'name'
},
{
name: 'id',
mapping: 'name'
}
]
}, cfg));
}
});
new cteo();
finally, this is the code for the combo:
MyPanelUi = Ext.extend(Ext.Panel, {
title: 'My Panel',
width: 400,
height: 250,
initComponent: function() {
this.items = [
{
xtype: 'label',
text: 'Cuenta Origen'
},
{
xtype: 'combo',
store: 'cteo',
displayField: 'name',
valueField: 'id'
}
];
MyPanelUi.superclass.initComponent.call(this);
}
});
It must be something simple, but I am stuck...
This will not do anything:
store: 'cteo',
You need to pass in the object reference that you assigned earlier, not a string:
store: cteo,
Alternately, you could call Ext.StoreMgr.lookup('cteo'), but judging by your code I assume that the variable reference was your intention.
One comment on your code. Doing this:
cteo = Ext.extend(Ext.data.XmlStore, {
...
cteo();
...is a bit strange, and is most likely creating a global variable in the window scope (assuming that cteo is not defined as a var somewhere earlier). Think of it as defining a custom class, then creating a new instance of the class you defined. Also, think about your naming -- a store subclass should be a specific type of store, which should be evident in the name. Typically, your code should look more like this:
Ext.ns('MyNamespace');
MyNamespace.CteoStore = Ext.extend(Ext.data.XmlStore, {
...
});
var cteoStore = new CteoStore();
Oh yeah, one other thing. You do not need to override the constructor for the sole purpose of providing default configs. Just do this:
MyNamespace.CteoStore = Ext.extend(Ext.data.XmlStore, {
storeId: 'cteo',
url: 'cteo.xml',
record: 'account',
data: '',
fields: [
{
name: 'name',
mapping: 'name'
},
{
name: 'id',
mapping: 'name'
}
]
});
This is also more useful since these configs are overrideable, unlike in your example. This makes it more reusable (like if you ever wanted to assign a different id to another instance).
Check out this thread at sencha site:
http://www.sencha.com/forum/showthread.php?105818-(noob)-Populating-combo-from-XmlStore-with-Ext-js-designer

Categories