Store option not working dgrid, works perfect with ondemandgrid - dojo

I want to use store attribute of Dgrid, i am using below code to make dgrid table but somehow table doesn't get populated with rows.
<script src="dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require(["dojo/_base/declare","dgrid/Grid","dgrid/Keyboard","dgrid/Selection","dgrid/editor","dgrid/extensions/DnD","dojo/dnd/Source", "dojo/store/Memory", "dojo/_base/lang"],
function (declare,Grid,Keyboard,Selection,editor,DnD, DnDSource, Memory, lang){
var store = new Memory({
data: [
{ id: 1, firstName: "Jeffrey", lastName: "Andrews", email: "jeffrey#madeupdomain.com" },
{ id: 2, firstName: "Jenny", lastName: "Saunders", email: "jenny#madeupdomain.com" },
]
});
var structure = [
{field: "lastName", label: "Last Name"},
{field: "firstName", label: "First Name"},
{field: "email", label: "EMail Address"}
];
var grid = new (declare([Grid, Selection, DnD]))({
store: store,
columns: structure
},
"gridtable");
grid.startup();
});
</script>
</head>
<div id="gridtable"></div>

The base List and Grid modules are not designed to be store-aware. Store awareness is usually inherited from _StoreMixin, which OnDemandList and the Pagination extension inherit.
It's also feasible to make your own extension of _StoreMixin; for example, one of the tutorials on dgrid.io walks through a very simple extension to render all data from a store at once.

Related

dojox.grid.DataGrid sort order bug on mixed case strings?

I know Dojo is getting quite old now but we still have apps that are using it.
One thing that was pointed out was the sort facility on the dojox.grid.DataGrid table of users. Our users table has grown over time so it's useful to order by the name column. However, we find that, while most names were entered with a Capital first letter, some names were entered all in lowercase and when I click on the name column header for sorting, I find that the Capitalised names appear in alphabetical order BUT followed by lowercase name in the same order at the bottom.
e.g. The raw data:
Tom
Dick
harry
After "sorting" displays as :
Dick
Tom
harry
Code example, using Dojo 1.8.3, as follows:
require(["dojox/grid/EnhancedGrid",
"dojo/data/ItemFileWriteStore",
"dojo/parser",
"dojo/on",
'dojo/domReady!'
],
function(EnhancedGrid, ItemFileWriteStore, Filter, parser, on) {
var data = {
items: [
{ name: 'Tom', age: 29 },
{ name: 'Dick', age: 9 },
{ name: 'harry', age: 19 }
]
};
var gridStore = new ItemFileWriteStore({
data: data
});
var gridStructure = [
[
{ 'name': 'Name', 'field': 'name' },
{ 'name': 'Age' , 'field': 'age' }
]
];
var mygrid = new EnhancedGrid({
id: "grid",
store: gridStore,
structure: gridStructure,
autoHeight: true,
autoWidth: true
}, "mydatagrid");
mygrid.startup();
}
);
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>
<div id="container" class="claro">
<div id="mydatagrid"></div>
</div>
How do I sort a column of mixed case names correctly?
i.e. to display sorted grid as:
Dick
harry
Tom
Thanks
I managed to get a solution through a suggestion on a related DataGrid post: dojox.grid.DataGrid custom sort method?
Basically, you can use the "comparatorMap" of the ItemFileWriteStore (or ItemFileReadStore)
require(["dojox/grid/EnhancedGrid",
"dojo/data/ItemFileWriteStore",
"dojo/parser",
"dojo/on",
'dojo/domReady!'
],
function(EnhancedGrid, ItemFileWriteStore, Filter, parser, on) {
var data = {
items: [
{ name: 'Tom', age: 29 },
{ name: 'Dick', age: 9 },
{ name: 'harry', age: 19 }
]
};
var gridStore = new ItemFileWriteStore({
data: data
});
var gridStructure = [
[
{ 'name': 'Name', 'field': 'name' },
{ 'name': 'Age' , 'field': 'age' }
]
];
//====================================================================================
//= Define the comparator function for "Name" ========================================
//====================================================================================
gridStore.comparatorMap = {};
gridStore.comparatorMap["name"] = function(a,b) {
var nameA = a.toLowerCase().trim(), nameB = b.toLowerCase().trim();
if (nameA < nameB) //sort string ascending
return -1;
if (nameA > nameB)
return 1;
return 0; //default return value (no sorting)
}
//====================================================================================
//====================================================================================
//====================================================================================
var mygrid = new EnhancedGrid({
id: "grid",
store: gridStore,
structure: gridStructure,
autoHeight: true,
autoWidth: true
}, "mydatagrid");
mygrid.startup();
}
);
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>
<div id="container" class="claro">
<div id="mydatagrid"></div>
</div>

Connect v-select with vuex: problem [object object]

I am trying to create a dropdown (v-select/q-select (using quasar)), which allows me to select from an array in my vuex-storage and then eventually save the selected item (content of it) in a variable. Currently I have no problem to access the vuex-storage, but face the problem, that the v-select expects a string and not an object.
My code looks like the following.
// vuex storage:
const state = {
savedsystems:
[
id: "1",
system: {...}
],
[
id: "2",
system: {...}
]
// example of the vuex storage out of my viewdevtools
systemsconstant: Object
savedsystems:Array[2]
0:Object
id:"first"
system:Object
7a73d702-fc28-4d15-a54c-2bb950f7a51c:Object
name:"3"
status:"defined"
88519419-8a81-48f1-a5e6-5da77291b848:Object
name:"5"
status:"not defined"
1:Object
id:"second"
system:Object
7a73d702-fc28-4d15-a54c-2bb950f7a51c:Object
name:"3"
status:"not defined"
88519419-8a81-48f1-a5e6-5da77291b848:Object
name:"9"
status:"defined"
}
// dropdown:
<q-select
outlined
dense
emit-value
:value="currentsystem"
:options="savedsystems"
label="selectsystem" />
// computed to get systems from vuex:
computed: {
savedsystems() {
return this.$store.getters['systemsconstant/getsavedsystems']
}
},
I used the following example https://codepen.io/sagalbot/pen/aJQJyp as inspiration and tried a couple of different setups stringifying resulting in nothing really.
If one would try to apply my case to a similar problem (v-select displays object Object), the mentioned formatlabel would be an object instead of a string.
Question:
How can I modify the (with a getter) imported array of objects "savedsystems", so it can be used both as label to select it and furthermore then to connect it properly to the values, so I can save the selected as a variable.
Or can I change something in my v-select, e.g. varying what comes behind :options/options?
I'd appreciate any help!
You should use the property option-label
<div id="q-app">
<div class="q-pa-md" style="max-width: 300px">
<div class="q-gutter-md">
<q-badge color="secondary" multi-line>
Model: "{{ model }}"
</q-badge>
<q-select filled v-model="model" :options="options" label="Standard" option-label="description"></q-select>
{{ model }}
</div>
</div>
</div>
JS:
new Vue({
el: '#q-app',
data () {
return {
model: null,
options: [
{
label: 'Google',
value: 'Google',
description: 'Search engine',
category: '1'
},
{
label: 'Facebook',
value: 'Facebook',
description: 'Social media',
category: '1'
},
{
label: 'Twitter',
value: 'Twitter',
description: 'Quick updates',
category: '2'
},
]
}
}
})
https://codepen.io/reijnemans/pen/bGpqJYx?editors=1010

Dgrid Store Issue: Data not displaying

Just started with DOJO and Dgrid.
I've got this simple dgrid using a Memory store.
However the grid in the web page stay empty. Only the header is displayed.
....
#import "./dgrid/css/dgrid.css";
<script src="./dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true, isDebug: true">
</script>
<script language="javascript">
require
(
[
"dojo/_base/declare",
"dojo/_base/array",
"dgrid/List",
"dgrid/Grid",
"dgrid/Keyboard",
"dgrid/Editor",
"dgrid/extensions/ColumnResizer",
"dijit/form/NumberTextBox",
"dstore/Memory",
"dojo/parser",
"dojo/domReady!",
"dijit/TooltipDialog",
"dijit/form/DropDownButton",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane"
],
function(
declare, arrayUtil, List, Grid, Keyboard, Editor, ColumnResizer, NumberTextBox, Memory
){
var prevpds =[
{itemnu: "TEST", itemna: "", batchn: "", cqty: 5, sqty: 5, sz: 5},
{itemnu: "TEST 44", itemna: "", batchn: "", cqty: 1, sqty: 2, sz: 3}
];
var pdsstore = new Memory({data: prevpds});
var getColumns = [
{ label: "Item Number", id: "itemnu", field: "text", editor: "text" },
{ label: "Item name", id: "itemna", field: "text", editor: "text" },
{ label: "Batch number", id: "batchn", field: "text", editor: "text" },
{ label: "Concerned Qty", id: "cqty", field: "floatnumber", editor: "NumberTextBox" },
{ label: "Sold Qty", id: "sqty", field: "floatnumber", editor: "NumberTextBox" },
{ label: "Size/ Diameter", id: "sz", field: "floatnumber", editor: "NumberTextBox" }
];
var PdsGrid=declare([Grid, Keyboard, Editor, ColumnResizer]);
window.grid = new PdsGrid(
{
store: pdsstore,
columns: getColumns
}, "pdstable2"
);
}
);
</script>
You have at least two problems.
Firstly, assuming you're using dgrid 0.4 (which I assume since you're also using dstore), you should be setting collection instead of store.
Secondly, the base List and Grid modules do not read from stores; you will want to use either OnDemandGrid or the Pagination extension.
OnDemandList and OnDemandGrid docs
Pagination docs

Use dgrid/Grid by Dojo CDN

i tried to use dgrid by the including dojo 1.10 by CDN but it does not work.
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad:true"></script>
<script>
require([ "dgrid/Grid", "dojo/domReady!" ], function(Grid) {
var grid = new Grid({
columns : {
serverName : "Server Name",
serviceName : "Service Name",
available : "Verfügbar"
}
}, "grid");
});
Where is the problem? By loading the site i get an Err: scriptErr.
Here's a really complete example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello dgrid!</title>
<script
src='//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js'
data-dojo-config="async: true, parseOnLoad: true">
</script>
<script>
require({
packages: [{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.15'
}, {
name: 'xstyle',
location:'//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
}, {
name: 'put-selector',
location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
}]
},[
'dgrid/Grid',
'dojo/domReady!'
], function (Grid) {
var data = [
{ first: 'Bob', last: 'Barker', age: 89 },
{ first: 'Vanna', last: 'White', age: 55 },
{ first: 'Pat', last: 'Sajak', age: 65 }
];
var grid = new Grid({
columns: {
first: 'First Name',
last: 'Last Name',
age: 'Age'
}
}, 'grid');
grid.renderArray(data);
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
dgrid and its dependencies are not hosted on the Google CDN, let alone as a sibling of Dojo, and you don't seem to have any packages configuration to pick up dgrid, xstyle, and put-selector elsewhere.
While dgrid is not published to any CDN, RawGit now has a feature they're testing out which is capable of caching github resources on MaxCDN. You can take advantage of this for dgrid with a configuration like the following:
var dojoConfig = {
async: true,
packages: [{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.15'
}, {
name: 'xstyle',
location:'//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
}, {
name: 'put-selector',
location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
}]
};
Of course, remember that RawGit's CDN service has no guarantee of 100% uptime and thus should be used only for prototyping, not production, but you should ideally be rolling a custom build for production anyway.
You need to put a div tag in the body.
<body>
<div id="grid"></div>
</body>
have you tried calling grid.renderArray(data)?
Here is a complete example
require(["dgrid/Grid", "dojo/domReady!"], function(Grid){
    var data = [
        { first: "Bob", last: "Barker", age: 89 },
        { first: "Vanna", last: "White", age: 55 },
        { first: "Pat", last: "Sajak", age: 65 }
    ];
 
    var grid = new Grid({
        columns: {
            first: "First Name",
            last: "Last Name",
            age: "Age"
        }
    }, "grid");
    grid.renderArray(data);
});
more examples here

Give input to a Sencha 2 template

How can I pass arguments to a Sencha 2 template? Below is my small template, have tried different things like defining "field variables" on the template and using the config, and so fourth, but Im definitly doing something wrong. Lets say I want to give arguments "title" and "usageTime", how can I do it
Ext.define('Sencha.templates.AppDetailsUsageTemplate' ,{
extend: 'Ext.XTemplate',
constructor: function (config) {
var html = [
'<div id="{id}" class="limitsList {cls}">',
' <div class="reportsSummaryLeft"> {title} </div>',
' <div class="reportsSummaryRight"> {usageTime} </div>',
' <div style="clear:both"></div>',
'</div>'];
this.callParent(html);
}
});
In my view I wanna do something ala this (pseudo code below):
xtype: 'container',
tpl: Ext.create('Sencha.templates.AppDetailsUsageTemplate',{
title: 'test tittle',
usageTime: 100384
})
I figured it out, give parameters through data:
Examples:
{
id: 'appDetailsMonth',
xtype: 'component',
tpl: Ext.create('Sencha.templates.AppDetailsUsageTemplate')
},{
id: 'appDetailsLifeDuration',
xtype: 'component',
tpl: Ext.create('Sencha.templates.AppDetailsUsageTemplate')
}
And then in applyItems
applyItems:function(newItems, oldItems) {
var i = 0,
iNum = newItems.length,
data = this.getData();
var yesterdayItem = newItems[2];
yesterdayItem.data = {
title: 'Yesterday',
usage: data.dayDuration
};
....
}