oria / gridx Goto Github PK

View Code? Open in Web Editor NEW

162.0 162.0 78.0 84.17 MB

Just another powerful Dojo grid

License: Other

JavaScript 79.73% HTML 11.07% CSS 5.11% PHP 4.08% Batchfile 0.01%

gridx's People

Contributors

Stargazers

Watchers

Forkers

kriszyp supnate willcode2surf colemanto owenxin haokang unixcrh edwinspire luosong mrhacky wushuibo hyq liluxdev shuhblam carloscnk jlcmes mrgrechkinn daidai123 yurychika agios cphil123 jsonn niubods brentdouglas rafaeloliveiralima snaniaiah yang031370 cocus-es livitki buddha198 pdardailler hjzheng vvb air2 ak1394 qasdevs vhr prodigeni shanghaikid vigb zammer arsuriya skrishnas blueleader07 han-feng rcoundon mmueller71 shutrisk homenn11 maxnikulin gitsudent esironal keeganmccallum maheshpati wangcrystal iongroup cephdon lvganfei anthonyponceot iaplaton erykb2000 chenzhh cunick ggerret vuppalaravikanth connectthefuture sindilevich alanland oguzozgen convincee varunverma3 thielium luswei pgiannac lohitakshtrehan armoisan notoriun jeffrylim92

gridx's Issues

IndirectSelect.js fails on row selection if 'all' set to false

The IndirectSelect module shows a checkbox in the row header.
It can optionally show a select-all checkbox in the column header. This is enabled by default, but can be disabled by setting 'all' to false.

If you do this, an error will be thrown if you click on any row checkbox.

This is because _onSelectionChange in IndirectSelect is listening for selection changes so that it can update the column checkbox if all rows are now checked.

Deferred.when(d, function(){
    t._allSelected[t._getPageId()] = allSelected;
    var node = t.grid.rowHeader.headerCellNode.firstChild;
    domClass.toggle(node, t._getDijitClass() + 'Checked', allSelected);
    node.setAttribute('aria-checked', allSelected ? 'true' : 'false');
});

There is no check to see if we have a column header select-all checkbox, so if we don't (if 'all' is set to false) this throws an uncaught exception, preventing the row from being selected.

Wrapping this in a

if (t.arg('all'))

check seems to be sufficient to fix the problem.

when 'IndirectSelect' attribute is on and the grid is belonged to a tabpane, the checkbox rendered incorrectly

the test page as following:

<title>Untitled</title> <script type="text/javascript" src="lib/dojo/dojo/dojo.js" data-dojo-config="'parseOnLoad':true,'async':true,'packages':[{'name':'gridx','location':'../gridx'},{'name':'clipart','location':'../../clipart'},{'name':'maqettaSamples','location':'../../../samples'},{'name':'maqetta','location':'../../maqetta'},{'name':'shapes','location':'../../shapes'},{'name':'zazl','location':'../../zazl'},{'name':'widgets','location':'../../custom'}]"></script> <script type="text/javascript"> require([ "dijit/dijit", "dojo/parser", "maqetta/space", "maqetta/AppStates", "dojox/io/xhrScriptPlugin", "dojo/data/ItemFileReadStore", "gridx/Grid", "gridx/core/model/cache/Async", "dojox/data/CsvStore", "gridx/modules/VirtualVScroller", "gridx/modules/ColumnResizer", "gridx/modules/extendedSelect/Row", "gridx/modules/SingleSort", "gridx/modules/RowHeader", "gridx/modules/IndirectSelect", "dijit/layout/TabContainer", "dijit/layout/ContentPane" ]); </script> <style>@import "themes/claro/document.css";@import "themes/claro/claro.css";@import "lib/dojo/gridx/resources/claro/Gridx.css";@import "lib/dojo/gridx/resources/claro/Gridx_rtl.css";@import "app.css"; </style> <script type="text/javascript" src="app.js"></script>

ColumnLock module: layout messed up after change of grid width

When using module ColumnLock, the layout does not look nice when the width of the grid gets bigger.

I have adapted “test_datagrid_compatible.html” to use locked-columns and changed the width from pixel to %:

<!DOCTYPE html>
<html>
<head>
    <title>A Gridx compatible to DataGrid</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
    <link rel='stylesheet' href="support/common.css" />
    <style type="text/css">
        .gridx {
            width: 100%;
            height: 500px;
        }

    </style>

    <script type="text/javascript" src="../../dojo/dojo.js" 
        data-dojo-config="async: true, isDebug: true, parseOnLoad: true"></script>
    <script type="text/javascript" src='support/common.js'></script>
    <script type="text/javascript">
        require(["./test_datagrid_compatible.js"]);
    </script>
</head>
<body class='claro'>
    <h1>A Gridx compatible to DataGrid</h1>
    <div data-dojo-type='gridx.Grid' data-dojo-props='
        cacheClass: "gridx/core/model/cache/Async",
        store: store,
        structure: structure,
        columnLockCount: 2,
        modules: [
            "gridx/modules/VirtualVScroller",
            "gridx/modules/Focus",
            "gridx/modules/SingleSort",
            "gridx/modules/ColumnResizer",
            "gridx/modules/move/Column",
            "gridx/modules/select/Row",
            "gridx/modules/ColumnLock"
        ]
    '></div>
</body>
</html>

Now display grid in a small browser window, then make it wider and scroll down.
Some rows have old size and the new displayed rows have the new size.

change of store (to JsonRest) doesn't reflect change of number of rows in the grid

I'm building a database application with maqetta as design-tool, the dojo and gridx library and a php-script that connects the JsonRest store to my postgresql database.
Problem is, that maqetta configures the gridx with a "dojo.data.ItemFileReadStore", where I have to fill in a cerain numer of rows during the configuration wizard. Later on I change that ItemFileReadStore against a JsonRest store. There are two problems.
First the change of rows (my database has a lot of rows, and I don't want to put in so much data by hand and with the time, the number of rows grows in database) is not reflected in the grid. There are just the n rows, that I put in the ItemFileReadStore during the design process. So I can see just the first n rows of my database. Even if I add the module VirtualVScroller it shows and scrolls just over the first n rows.
Second I can't use just the "dojo.store.JsonRest" store directly. I have to combine it with a "dojo.store.Memory" in a "dojo.store.Cache". If not, I see n times the last row of my database. The sort modules (SingleSort and NestedSort) and the ColumnResizer modules are working if I declare them in the html file. I'd like to show the two files, generated by maqetta and edited by me (testgrid.html and app.js), but I didn't find a way to attach or insert files here, because the html-tags are destroying the diplay of the code.

gridx problem updating cell with JsonRest store

I have a Tree Grid (gridx) using a JsonRest store.
When I edit a cell (description column in layout below) in the grid, the correct PUT is generated to the server, but the cell in the grid reverts to the previous value.
E.g. the description cell contains 'xxx' and I edit it to 'yyy'. The PUT is generated, but the cell then displays 'xxx' again.

Some of the relevant code is here...

var layout = [
{ field: "name", width: "250px", name: "File",
expandLevel: 'all', editable: true,
formatter: function(rawData) {
// this -> layout column
//console.debug('name this=', this, ' rawData=', rawData);
return rawData.name;
}},
{ field: "description", width: "200px", name: "Description",
editable: true},

store = new Observable(JsonRest({target:"/portal/admin/file/json/" + {{ group.organization_id }} + "/?", idProperty: "id"}));

    filesGrid = new Grid({
                store: store,
                cacheClass: Cache,
                structure: layout,
                autoHeight: true,
                modules: [Edit, 
                          Focus,
                          CellWidget,
                          RowHeader,
                          SelectRow,
                          Tree],
                loadingMessage: 'Please wait while we fetch the file data...',
                noDataMessage: 'No files were found.',
                errorMessage: '<span class="dojoxGridError">Sorry, the Portal was unable to fetch the data.</span>'
        },
        document.createElement('div')
    );

Docs for Edit > fromEditor reference 'getEditorValue'

The docs for the Edit > fromEditor function refer to something called 'getEditorValue'. This is confusing and doesn't appear to make sense. Is it a copy/paste error?

'destory' function name typo in two files

modules/CellWidget.js : 136
modules/dnd/_Dnd.js : 65, 67

The destroy method is mistakenly (I assume) named 'destory' in both files.

Do you plan to handle hidden column?

I would to know if you plan to handle hidden column during the runtime?

Thibault

grid.header.refresh() causes headers to move when locked columns are in use

If you have a grid with locked columns then grid.header.refresh() doesn't work correctly, offsetting the headers by the number of locked columns. The column definitions have not been changed.

Before (Col 1 and Col 2 are locked):

After calling grid.header.refresh:

The header for Col 1 has been expanded and neither Col 1 and Col 2 seem to be properly locked any more.

With custom Widget gridx from maqqeta

Greetings.
I'm using maqqeta and have the option to create custom widgets easily, I created some without problem.
Now I try to do the same by creating one containing a gridx but shows all the elements but not the table, (dojo/parser::parse() error Error {} ).
Here are the files generated by maqqeta:

[contry.oam.json]

{"id":"usms.country","name":"usms.country","spec":"1.0","version":"1.0","require":[{"type":"javascript","src":"dojo/dojo.js","$library":"dojo"},{"type":"javascript-module","format":"amd","src":"dijit/Toolbar","$library":"dojo"},{"type":"javascript-module","format":"amd","src":"dijit/form/Button","$library":"dojo"},{"type":"javascript-module","format":"amd","src":"dijit/form/TextBox","$library":"dojo"},{"type":"javascript-module","format":"amd","src":"dojox/io/xhrScriptPlugin","$library":"dojo"},{"type":"css","src":"resources/claro/Gridx.css","$library":"gridx"},{"$library":"dojo","format":"amd","src":"widgets/usms/country","type":"javascript-module"}],"library":{"dojo":{"src":"../../../../dojo/dojo.js"},"gridx":{}},"content":"

[country.js]

define(['dojo/_base/declare',
'dijit/_Widget',
'dijit/_Templated',
'dojo/text!./country.html'
],function(declare,_Widget,_Templated,templateString){

return declare('usms.country',[ _Widget, _Templated], {
widgetsInTemplate:true,
templateString:templateString
});
})

[country_widgets.json]

{"name":"custom","longName":"Custom Widgets","version":"1.0","localPath":true,"categories":{"custom":{"name":"User Widgets","description":"User Widgets","widgetClass":"dijit"}},"widgets":[{"name":"country","description":"Custom user widget country","type":"usms.country","category":"custom","iconLocal":true,"icon":"app/davinci/img/maqetta.png","properties":{"style":"width: 100%; height: 100%; overflow: hidden;"}}]}

When setting layout of column to have sortable: false, the sort icon should not appear

I have created a gid layout when one column is not sortable. Is there a way to remove the sort icon in this case? Thanks.

Selection checkboxes truncated in grid when using Chrome and zooming

If I bring up the demo at http://oria.github.com/gridx/gridx/demos/test_grid_indirectSelect.html in Chrome (currently Version 25.0.1364.97 m) and zoom to 150%, the right sides of the checkboxes for selecting rows appears truncated. If I zoom in further to 175%, it looks good again. Any idea if this is a Gridx issue or a Chrome issue? Thanks.

'extendedSelect/row' module does not work properly if an item's ID is 0

If, for example, using ItemFileWriteStore with no identifier specified, the first item in the grid will have an ID of 0 by default. This causes buggy behavior with the 'extendedSelect/row' module. You cannot deselect the first row by ctrl+click. You can select the first row, but cannot deselect it with Ctrl+click, and it's id is not returned in grid.select.row.getSelected().

I am not using the cell or column modules. This behavior does not appear to occur if using the regular 'select/row' module. The following code change seems to solve the problem for me:

idx/gridx/core/model/extensions/Mark.js Line 87 : if(arg[0]) ----> if(arg[0] || (arg[0] == 0) )

JSONREST + GRIDX - issues with PUT (ADD).

When we add a record to the gridx (using jsonstore's add function) the gridx fires off a GET immediately after the initial PUT (add), however it does not seem to be waiting for the PUT to finish so that sometimes (it is sporadic) it fails to update the gridx with the new item and I can see the GET contains all items EXCEPT the item being added (put)......

Any ideas? This has been filed as a bug in our product and needs to be resolved ASAP - but I cannot seem to find a way around this. I believe I have traced the GET call to somewhere in the gridx cache which calls a "_storeFetch", which invokes the JsonRest to call a "query" which in turn has xhr do a GET.

Any ideas on how I can work around this?

OSX Chrome/Safari - no vertical scrollbars

http://oria.github.com/gridx/demo.html for example - on OSX Chrome/Safari, no vertical scrollbars show up. Works fine on windows chrome and osx firefox.

Row selection and cell editing and space key

I had a grid which includes modules CellWidget, Edit, RowHeader, SingleSort and IndirectSelect. When I click on a grid in the table and press "space" then I see the row selected. If I press "space" agaun, I see the row de-selected. So far this is all good.

Now, if I start editing the cell (double click or enter) and the Dijit TextBox widget appears in the row, as I enter data, for example "Hello says neil", each time I press the space key for data in the row, the space key is being interpreted as a toggle for the row selection.

I believe that while editing a cell, space bar checking for the row should be disabled.

(note: I should mention that this happens when I set the flag "triggerOnCell: true"

remove item from store hits error in db, but item removed from cache,screen despite error

gridx with store dojo/store/JsonRest
item is deleted irrespective of outcome of db-operation
If error in DB, e.g. constraint violation, record is deleted from cache,screen but
it is not deleted in DB

In error-from-db-routine , i have to do following to match grid with DB:
this.myGrid.model.clearCache();
this.myGrid.body.refresh();

Is there a cleaner solution?

my code:
var dfd=this.myGrid.store.remove(rowId);
dfd.then(lang.hitch(this,function(iets){
console.log(myModuleName+' deleteDBRow dfd.then iets',iets);
}),//ok
lang.hitch(this,function(error){
//but record disappears from gridx cache, from screen !!!!
console.error(error);
alert(myModuleName+' '+error.responseText);
this.myGrid.model.clearCache();
this.myGrid.body.refresh();
})//error
);//dfd.then

i notice:

in _Cache.js, aspect is laid after store-remove routine
t[c](store, old ?);

and in _onDelete: function(item){
item is deleted irrespective of outcome of db-operation
(no deferred to test!)

gridx.modules.select.Row: isSelected throw an exception

For instance:

grid1.row(0).isSelected()

throw

Error: this.row is undefined

Replacing this.row.id by this.id in the isSelected function of gridx.modules.select.Row will solve the problem.

Edit: Cannot change value when using decorator in combination with dijit.form.Select

If I define a column as editable using a dijit.form.Select and provide the options (via constraints) and also use a decorator - any change in value does not get applied.

I have an array of options with entries that have label and value properties. And I define a column as this:

{
field: 'type',
name: 'Type',
editable: true,
editor: 'dijit.form.select',
constraints: {
options: myOptions
},
decorator: function(val) {
return t.typeMap[val];
}
}

With the above definition the value reverts back to the previous value as soon as I try to change it. If I remove the decorator it works just fine.

ComboBox in a gridx cell doesn't show options

I've tried to define a gridx structure showing a ComboBox inside a cell for selecting values. The ComboBoxes are shown when activating cell editor but there's no content in it. I tried also the 'options' property inside the structure definition, same.

I've searched around for whole day but didn't find any solution or hint yet.

Find below the code snippet:

    var casparMessages = new Store({
        data: [
            {name: 'DESADV D96A Standard', id: 1},
            {name: 'INVOIC D96A Standard', id: 2},
            {name: 'ORDERS D96A Standard', id: 3}
        ]
    });

    var casparPartnerConnectionsStore = new Store({
        data: [
            {id: 1, message: 'ORDERS D96A Standard', partner: 'tegut...', testFlag: 'deaktiviert', printFlag: 'deaktiviert', archiveFlag: 'aktiviert', communicationType: 'AS2', communication: 'tegut... Produktion', active: 'aktiviert'},
            {id: 2, message: 'INVOIC D96A Standard', partner: 'tegut...', testFlag: 'deaktiviert', printFlag: 'aktiviert', archiveFlag: 'aktiviert', communicationType: 'AS2', communication: 'tegut... Produktion', active: 'aktiviert'},
            {id: 3, message: 'ORDERS D96A Standard', partner: 'Metro', testFlag: 'deaktiviert', printFlag: 'deaktiviert', archiveFlag: 'aktiviert', communicationType: 'AS2', communication: 'Metro Produktion', active: 'aktiviert'},
            {id: 4, message: 'INVOIC D96A Standard', partner: 'Metro', testFlag: 'deaktiviert', printFlag: 'aktiviert', archiveFlag: 'aktiviert', communicationType: 'AS2', communication: 'Metro Produktion', active: 'aktiviert'},
            {id: 5, message: 'ORDERS D96A Standard', partner: 'EDEKA AG', testFlag: 'deaktiviert', printFlag: 'deaktiviert', archiveFlag: 'aktiviert', communicationType: 'X.400', communication: 'EDEKA AG Produktion', active: 'aktiviert'},
            {id: 6, message: 'INVOIC D96A Standard', partner: 'EDEKA AG', testFlag: 'deaktiviert', printFlag: 'aktiviert', archiveFlag: 'aktiviert', communicationType: 'X.400', communication: 'EDEKA AG Produktion', active: 'aktiviert'},
            {id: 7, message: '', partner: '', testFlag: '', printFlag: '', archiveFlag: '', communication: '', active: 'deaktiviert'}
        ]
    });

    var casparPartnerConnectionsStructure = [
        {name:'Nachricht (Modul)', field:'message', editable:true, editor:'dijit.form.ComboBox', editorArgs:{props:'store: casparMessages, searchAttr: "name"'}},
        {name:'Partner', field:'partner', editable:true, editor:'dijit.form.ComboBox'},
        {name:'TestKZ', field:'testFlag', editable:true, editor:'dijit.form.ComboBox'},
        {name:'DruckKZ', field:'printFlag', editable:true, editor:'dijit.form.ComboBox'},
        {name:'ArchivKZ', field:'archiveFlag', editable:true, editor:'dijit.form.ComboBox'},
        {name:'Kommunikationstyp', field:'communicationType', editable:true, editor:'dijit.form.ComboBox'},
        {name:'Kommunikation', field:'communication', editable:true, editor:'dijit.form.ComboBox'},
        {name:'Aktiv', field:'active', editable:true, editor:'dijit.form.ComboBox'},
    ];

    casparPartnerConnectionsGrid = new Grid({
        id:'casparPartnerConnectionsGrid',
        cacheClass:Cache,
        store:casparPartnerConnectionsStore,
        structure:casparPartnerConnectionsStructure,
        autoHeight:true,
        modules: [
            Modules.Focus,
            Modules.RowHeader,
            Modules.SelectRow,
            Modules.CellWidget,
            Modules.Edit,
            Modules.VirtualVScroller
        ]
    }, 'casparPartnerConnections');

    casparPartnerConnectionsGrid.startup();

Choosing single select vs multiple select when using extendedSelect/Row

When using the select/Row module to perform row selection, there is a property on that module called "Multiple". If set to false, row selection is single while if set to true, row selection is multiple. Examining the documentation for extendedSelect/Row no similar mechanism can be found. This either implies that there is documentation missing or else that extendedSelect/Row only supports multiple selection which itself should be documented.

tests/test_grid_persist.js errors?

I had to change following lines in test_grid_persist.js in latest download of gridx to make it work

//add lang as 1st parm of require-function
//'gridx/modules/select/Column', select NOT Select
require([
'dojo/_base/lang',
'gridx/Grid',
'gridx/core/model/cache/Sync',
'gridx/modules/Persist',
'gridx/modules/select/Column',
'gridx/modules/move/Column',
'gridx/modules/dnd/Column',
'gridx/modules/NestedSort',
'gridx/modules/VirtualVScroller',
'gridx/modules/ColumnResizer',
'gridx/tests/support/data/MusicData',
'gridx/tests/support/stores/ItemFileWriteStore',
'gridx/tests/support/TestPane'
], function(lang,Grid, Cache, Persist, SelectColumn, MoveColumn, DndColumn, NestedSort, VirtualVScroller, ColumnResizer, dataSource, storeFactory, TestPane){

Herman

Cannot use pagination when deleting from grid

I'd been trying to delete a row from a gridx grid using a dojo.store.JsonRest store. My gridx constructor looks like this:

      grid = new Gridx({
          store: jsonStore,
          structure: layout,
          cacheClass: Async,
          bodyRowHoverEffect: false,
          modules: [
                    Focus,
                    IndirectSelect,
                    Filter,
                    {moduleClass: FilterBar, closeButton: false},
                    Toolbar,
                    ExtendedSelectRow,
                    NestedSort,
                    ColumnResizer,
                    VirtualVScroller ,
                    Pagination,
                    OneUIPaginationBar,
                    OneUIPaginationBarDD,
                    RowHeader
                    ]
      });

When I made this call to delete a row:

var defer = grid.store.remove(itemNames[i]);

I kept getting this error:

Error: Row is not in cache:1

Also, firebug showed this:
throw new Error('Row is not in cache:' + rowInfo.rowIndex);

Going into firebug, it appears the issue is I am having is because I am using the pagination module with gridx, because in Body.js, there is this comment:

// autoChangeSize: [read|write] Boolean
// Whether to change rootStart and rootCount automatically when store size is changed.
// This need to be turned off when pagination is used.
autoChangeSize: true,

Having autoChangeSize set incorrectly causes t.updateRootRange(0, t.rootCount - 1); not to be called in the _onDelete function in Body.js.

The rootRange is not being updated correctly - it stays at 2 instead of being decremented to 1 if I start with 2 rows and delete one.

When I commented out the Pagination modules above in my gridx constructor, I no longer received the error.

So for now I have a workaround of not using pagination and having my deletes succeed, but I would like to use pagination and be able to delete from my json rest store.

Thanks,
Susan

how to use JsonRest as server side store with gridx?

when I use JsonRest as a store,the grid cant show the data.
code like this:

require([
    'dojo/store/JsonRest',
    'gridx/Grid',
    'gridx/core/model/cache/Async',
    'gridx/modules/SingleSort',
    'gridx/modules/ColumnResizer',
        'dojo/data/ObjectStore',
    'gridx/modules/pagination/Pagination',
    'gridx/modules/pagination/PaginationBar',
    'dojo/domReady!'
],function(Store,Grid,Cache,Sort,ColumnResizer,ObjectStore,Pagination,PaginationBar){
    var jsonStore = new Store({target:"${ctx}/demo/user/listJson"});
    // var store = new ObjectStore({objectStore:jsonStore});
    var columns = [
        {field: 'id', name: 'ID'},
        {field: 'loginName', name: 'LONIN_NAME'},
        {field: 'name', name: 'NAME'},
        {field: 'registerDate', name: 'REGISTER_DATE'}
    ];

    var grid = new Grid({
        cacheClass: Cache,
        store: jsonStore,
        structure: columns,
        modules:[
             Sort,
             ColumnResizer
             Pagination,
             PaginationBar
        ],
         autoHeight: true
    }); 
    grid.placeAt("gridNode");
    grid.startup();

});

I find that , when I user ObjectStore to wrap the JsonRest ,the grid can show the data now,but sort is not work ,and the request url is like this "/demo/user/listJsonundefined?sort(+name)".
what's the problem?

Link to Mobile Demo is Broken

http://oria.github.com/gridx/gridx/mobie/demos/demo.html

gives a 404

Mac friendly multiple row selection with Command+click

The select and extendedSelect modules allow for Ctrl+click to select multiple rows/cells . On a mac, Ctrl+click also opens a context menu, so it does both. It would be better if the multiple row selection was mapped to Command+click instead for a mac.

Cloud hosting

Is there any CDN address for this?

modules.Edit: setCellValue is overriden when always editing is true

We would link to display a custom Button using the CellWidget modules.

By this way using the method setCellValue in the column definition we hope to set the label of the button and the behaviour of the onClick inside.

The button must be always displayed so the column definition is set to alwaysEditing.

However, the setCellValue is never called, because when the alwaysEditing parameter is true the setCellValue function is override like that:

From master/modules/Edit._initAlwaysEdit():

col.setCellValue = getEditorValueSetter((col.editorArgs && col.editorArgs.toEditor) || lang.partial(getTypeData, col));

May be we have missed something ...

Sort by attribute other than 'field' ?

I have an object which has a human readable value as a string which would require a complex function to sort using a comparator in the Grids structure, and from reading Issue #23 it seem to indicate that that only works for the old ItemFileWriteStore which I am not using. An integer value already exists in this object to facilitate sorting.

I was able to achieve this by setting the 'id' in the structure to the value I want used for the sort attribute, the 'field' to the value I want displayed, and commenting out the portion of the private ._sort() method in 'gridx/core/model/extensions/Sort.js' that tries to use the column's field for the sort attribute. (GridX 1.1, .zip downloaded today)

55| if(s.colId){
56|     s.attribute = /*c.columns ? (c.columns[s.colId].field || s.colId) :*/ s.colId;
57| }else{

I haven't noticed any problems (yet, all my Grid id's are the same as their fields, except for this one), but I have to ask, is there already, or is there a planned implementation of a way to do this? Something like adding a sortBy: 'foo' to the column object in the structure?

Gridx DnDRow issue

After creating a standard gridx.grid instance, with DndRow and MoveRow modules initiated, drag and drop only partially works. In particular, you are only permitted to drag rows up inside the grid, but cannot drag them down. Is an issue across multiple browsers.

e.g.:

    require([
    //Require resources.
    "dojo/store/Memory",
    "gridx/core/model/cache/Sync",
    "gridx/Grid",
     "gridx/modules/dnd/Row", 
     "gridx/modules/move/Row"

], function(Memory, Cache, Grid, DndRow, MoveRow){

    var store = //create store......
    var structure = //create structure......

    //Create grid widget.
    var grid = Grid({
        id: 'grid',
        cacheClass: Cache,
        store: store,
        structure: structure,
                modules: [                                                                           
                          DndRow,
                          MoveRow
                          ]
    });

    //Put it into the DOM tree. Let's assume there's a node with id "gridContainer".
    grid.placeAt('gridContainer');

    //Start it up.
    grid.startup();
});

Docs: Clarifications on Module Menu, property "hookPoint"

The Menu Module contains "__MenuArgs" which has a property called "hookPoint" which is important as it defines which area of the grid a menu is attached. There are a variety of options for hookPoint but there is a lack of clarity on what these mean. Examples:

What is the difference between "header" and "headercell"?
What is the difference between "grid" and "body"?

IndirectSelectColumn breaks grid sorting for OSX Safari

Using IndirectSelectColumn with SingleSort fails on Safari on OSX.

The grid renders correctly to start, but if you click on a column heading to sort, the horizontal alignment of the columns and the headings is broken.

Column grouping

Hi,

Do you plan to support column grouping?

If not is there a proper way to manage it using the tree module and a custom data store.

I.e. by default the tree module is enabled and the grid is linked to a custom store, having an attribute group by, if this attribute is not empty the returned data is formatted according to the attribute name set in group by.

When the user right clicks in the header of a column, the context menu is displayed with an entry group by. If the user clicks on group by, the group by attribute of the store is valuated to the field column attribute. Then the tree module is enabled. Finally the grid is refreshed.

So, due to the tree grid module and the store's data formatted on the fly the grouping column becomes available.

Incorrect order when sorting dates

The sorting feature is broken for dates. Apparently it will sort dates as literal strings rather than Date objects, resulting in errors such as:

1904/4/4 -> 1904/12/18 -> 1904/10/25

The sorting convention for dates is as follows (as defined by Excel):

Sort in ascending order means from oldest to newest
4/5/2008 -> 10/26/2009 -> 11/3/2009
Sort in descending order means from newest to oldest
11/3/2009 -> 10/26/2009 -> 4/5/2008

In order to reproduce this issue:

Open the "test_grid_singleSort.html" test (in gridx/tests/test_grid_singleSort.html)
Click on the header to sort column "Download Date" in ascending order

The dates will be sorted in ascending order as expected, but looking closely one can see that the order is not always correct.

In this example, it will sort these dates in the following sequence:

1904/10/25 -> 1904/12/18 -> 1904/4/4

The correct ascending order should be:

1904/4/4 -> 1904/10/25 -> 1904/12/18

Apparently the sorting is converting the dates into String and then sorting alphabetically, which works only some of the times.

Bar.js typing error backgroun-color

//  |           {content: "This is <b>a message</b>", style: "backgroun-color: blue;"}, //Can add some html

backgroun-color -> background-color

Missing docs on setStore() in Model

The Model object has an important method on it called setStore() but this is not documented in the docs for the library.

gridx can't be rendered right in a TabContainer

A newly reported defect from dojo trac #16225

----------------------------------------------- The original content ----------------------------------------------

I found a defect with GridX(not dojox.datagrid), should I submit it here?

I use gridx with a indirectselect feature(two plguins used: 'gridx/modules/RowHeader', 'gridx/modules/IndirectSelect') in a tab, the column for checkbox is shifted, and the first data column disappears.

code as following:

<body class="claro" data-maq-flow-layout="true" data-maq-ws="collapse" id="myapp" data-maq-appstates="{}">
<span data-dojo-type="dijit.layout.TabContainer" style="min-width: 1em; min-height: 1em; width: 100%; height: 300px;" controllerWidget="dijit.layout.TabController">
<div data-dojo-type="dijit.layout.ContentPane" title="Tab 1" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" selected="selected" closable="false" doLayout="false" style="width: auto; height: auto;">
   <span data-dojo-type="dojo.data.ItemFileReadStore" id="ItemFileReadStore_1" jsId="ItemFileReadStore_1" data="{&quot;identifier&quot;:&quot;unique_id&quot;,&quot;items&quot;:[{&quot;unique_id&quot;:1,&quot;id&quot;:&quot;1&quot;,&quot;label&quot;:&quot;Label 1&quot;},{&quot;unique_id&quot;:2,&quot;id&quot;:&quot;2&quot;,&quot;label&quot;:&quot;Label 2&quot;}]}"></span>

   <table data-dojo-type="gridx.Grid" style="min-width: 1em; min-height: 1em; width: 100%; height: 300px;" data-dojo-props="cacheClass: 'gridx/core/model/cache/Async',structure:[{width:'auto',name:'id',field:'id'},{width:'auto',name:'label',field:'label'}],store:ItemFileReadStore_1,modules: ['gridx/modules/VirtualVScroller','gridx/modules/ColumnResizer','gridx/modules/extendedSelect/Row','gridx/modules/SingleSort', 'gridx/modules/RowHeader',   'gridx/modules/IndirectSelect']"></table>

 </div>
 <div data-dojo-type="dijit.layout.ContentPane" title="Tab 2" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" selected="selected" closable="false" doLayout="false"></div>
 </span></body>

if used in the ContentPane? which is the top container, all is right. The screenshot see attached picture.

OS: Windows7 HOME; Browser: Chrom18 and IE9

Error snapshot
Error test case

Docs not complete for Edit > toEditor

The docs for the Edit module, toEditor describe it as having the signature:

function(storeData, gridData)

however, the code calls within GridX pass in:

function(storeData, gridData, cell, editor)

I believe this to be the correct signature and think I am asking for a doc update in this area.

Error if GridX async cache becomes inconsistent with data returned by server

To re-create:

REST API endpoint that has 300 items
Use a virtual scrolling grid (Gridx 1.0.3) with RowHeader, backed by a JsonRest store
While scrolling the grid, another client/user is creating new items on the server, so the REST API starts returning responses inconsistent with the initial response received by the grid (e.g. a different total, etc. )

While scrolling, an error is thrown here:

RowHeader line 155

_onAfterRow: function(row){
    var t = this,
    visualIndex = row.visualIndex(),
    n = query('[visualindex="' + visualIndex + '"].gridxRowHeaderRow', t.bodyNode)[0],
    bn = query('[visualindex="' + visualIndex + '"].gridxRow .gridxRowTable', t.grid.bodyNode)[0],
    nt = n.firstChild,
    cp = t.arg('cellProvider');

The error is that n is undefined.

gridx race condition when posting new record followed by refresh-query

I sometimes encounter a race condition when POST'ing a new record to store.
Directly after the POST-request, a query-request is sent to server,treated there and results sent back before POST has finished on server.
So results do not include new record.
Is there a trick to remedy this?

var store=new JsonRest({target:'ALIAS/'+alias+'/',idProperty:'ID'});

this.myGrid=new Grid({store:store,cacheClass:cacheAsync....})

var dfd=this.myGrid.store.add({ID:id,CLASS:contact_class},{incremental:true,id:id});

By tracing , i notice following flow:

BEGIN OF POST
_Cache.js _onSet (JsonRest add-method calls put-method internally, so both _onSet and _onNew , which are aspected on to them, are called!)
Body.js _onSet
_Cache.js _onNew
_Cache.js _onNew calling _onSizeChange
Body.js _onSizeChange
onSizeChange calling refresh
Body.js refresh
Async.js when
Async.js fetchById
Async.js fetchByIndex
_Cache.js _storeFetch
var results = s.query(req.query || {}, req);

          BEGIN OF QUERY
        _Cache.js _onComplete
         _Cache.js _addRow
          ....
         END OF QUERY

...
END OF POST

Bug: gridx.edit.onApply event have not fired on cell edit failures

preface: I want to handle cell edit errors in the GridX...
And there is great special event function to connect to in the 'gridx/modules/Edit' module:
onApply: function(/* cell, applySuccess */)

Issue: But now this function have not called in failure cases (i.e. when parameter applySuccess=false)!
That is because of errback have not called after: cell.setRawData(v)
because of errback is absent in code...

The bug in the 'dojo\gridx\modules\Edit.js'
Here is diff to fix:

--- Edit.js Чт сен  6 02:26:00 2012
+++ Edit_fixed.js   Пт сен  7 03:58:20 2012
@@ -341,7 +341,9 @@
                            finish(true);
                        }else{
                            Deferred.when(cell.setRawData(v), function(){
-                               finish(true);
+                               finish(true);   //callback
+                           }, function(success){
+                               finish(false);  //errback
                            });
                        }
                    }catch(e){

Unclear docs on Row.index() vs Row.visualIndex()

The core Row object has two methods for retrieving an index of a row. These are Row.index() and Row.visualIndex(). The documentation does not describe the difference/semantics of these method calls. I would like the docs updated to describe the difference/function between these two method calls.

Issues when flagging a column as editable and attaching a decorator.

I have a password field in my grid and to do this I had to format the cell like this:

{'name': 'Password', 'field': 'password', editable: true, decorator:this.passwordDecorator, editorArgs:{props:""type":"password""}}

visually it works, but I can no longer edit the value (I could before I added the decorator). When I double click the cell, it flickers for a second as if I can edit, but then I am kicked out of the edit mode.

Advice for select-all with large virtual scrolling grids

I have a virtual scrolling grid, backed by a JsonRest store, using RowHeader, extendedSelect/Row and IndirectSelect.

If there are a large number of rows (I have 100,000+) it leads to usability issues with the select-all checkbox in the column header.

Under the covers, it's submitting a single REST request to fetch all 100,000+ items. If you wait long enough, it does work - all items are eventually selected.

But because the request takes a while, the browser thinks the script has hung. Firefox, for example, opens an "Unresponsive script" error dialog offering to let the user kill the script.

Is there any advice for this scenario, please?

I can see that the simplest advice would be for you to say that select-all is unadvisable for grids with large number of rows, but I'm hoping there will be something we can do.

Ideally, it would be good if some "loading/waiting" indicator was displayed while the request was sent, perhaps with the request split into multiple separate REST requests so as to keep the script active and prevent the browser wanting to kill it?

Or would it be possible for the request for select-all to somehow request IDs only rather than the whole items to reduce the overhead of the request?

A column with boolean and editable field with a checkbox

Best regards.
Gridx'm using in a project to display tables of a database, HOWEVER I failed to make a boolean column and editing displays a checkbox me.
I have not found a clear example of how to do it, or how I define the table estructra and modules are needed.

What I have achieved so far is that the boolean fields are edited with a textbox that is the factory.
I thank you help me with a brief example of how I should implement it.

columnDefinition.navigable missing documentation and default value

We tried to add ComboBox and DropDownButton inside a cell using the cellWidget module.

The widgets were rendered however the focus was immediately lost after a mouseup.

We spent some times before discover the attribute navigate. We would like to explain his role inside gridx.modules.CellWidget. How ever shouldn't be better to set the default value to true?.

Below what we understood of the attribute.

var columnDefinitionCellDijitMixin = {
// navigable: Boolean
//      On the mouse down event if navigable is true the widget will keep the focus else the focus will be given to the parent cell.
//      That mean, the navigable attribute should be true if the widgets requiring focus to work correctly like dropdown, textbox ... consequently the parent cell will be never "selected".
navigable: false,
};

Edit.js onApply add old cache-item to error-object in case of server-store-failure

I am a newbie to gridx. So all what i am telling here may not be true!

When a column has been edited , the new value is written back to the server store via a
store.put command.

Then as a result of aspect'ing the store-put-function, the value is updated in grid-cache and
displayed .
This happens even if the store.put function fails.
In that case i would like to restore the old value.

Would it be possible in Edit.js to save the old value and pass it on via the error-object in case of failure?

E.g.

Edit.js

apply: function(rowId, colId){
....
if(cell){
/tshvr4 begin/
var cache_item=lang.clone( g.model._cache._cache[rowId]);
/tshvr4 end/
var widget = g.cellWidget.getCellWidget(rowId, colId),
....
finish = function(success, e){
if(!success){
console.warn('Can not apply change! Error message: ', e);
e['cache_item_old']=cache_item;//tshvr4+
}
....
}
}

in application one could do then:
this.myGrid.connect(this.myGrid.edit,'onApply',function(cell,success,e)
{
console.log(myModuleName+' onApply success='+success+' cell=',cell);
if(e)
{
console.dir(e);
alert(e.response.data);
console.log(myModuleName+' cache_item_old=',e.cache_item_old);
var cache=cell.grid.model._cache._cache;
var id=cell.row.id
cache[id]=e.cache_item_old;
cell.grid.body.refreshCell(cell.row.visualIndex(),cell.column.index());
}
});

Thanks!
Fine written framework!

document.css?

On https://github.com/oria/gridx/wiki/Create-the-Simplest-Gridx it says that we need to add

@import "your/path/to/dijit/themes/claro/document.css";

I don't see it in my dojo 1.8.3.
Where is it coming from?

Gridx Column Header Widget Events Disappeared

Hi,

I have a question relating to gridx. I haven't found any example on how to add a widget into the column header for the gridx so I created on myself.

For each column name, I added a widget. getColumnHeaderWidget() return a widget.

cell.name = this.getColumnHeaderWidget(viewDesignData[i].label, i+2);

Then I extended the Header.js file to override the _build() and preload() functions as shown below. I only use Edit, CellWidget, Exporter, CSV, Table, and Printer modules. The widget shows as it should (html-wise). However the onclick event doesn't work. The onclick event is attached to an image data-dojo-attach-point. I tested the event on the cell of the grid (not the header) and it works fine. Did the onclick get overridden by some other functions that builds the header within the gridx? If so do you know where it is?

I also have an attached image for the column header I created to clarify my question.

_build: function(){
var t = this,
g = t.grid,
f = g.focus,
sb = [''];
array.forEach(g._columns, function(col){
var thId = (g.id + '-' + col.id).replace(/\s+/, '');
var divTag = "";
if(!col.name.id){
divTag = '

' + (col.name || '') + '

';
}else{
if(!t.headerWidgetMap){
var headerWidgetMap = new Dictionary();
t.headerWidgetMap = headerWidgetMap;
}
var baseAttr = col.name.domNode.getAttribute("class");
col.name.domNode.setAttribute("class", baseAttr + " gridxSortNode");
t.headerWidgetMap.add(thId, col.name);
}
sb.push('');
});
sb.push('
' + divTag + '
');
t.innerNode.innerHTML = sb.join('');
domClass.toggle(t.domNode, 'gridxHeaderRowHidden', t.arg('hidden'));
}

preload: function(args){
// tags:
// protected extension
var t = this,
g = t.grid;
t.domNode.appendChild(t.innerNode);
t._build();
g.headerNode.appendChild(t.domNode);
//Add this.domNode to be a part of the grid header
g.vLayout.register(t, 'domNode', 'headerNode');
t.aspect(g, 'onHScroll', '_onHScroll');
t.aspect(g, 'onHeaderCellMouseOver', '_onHeaderCellMouseOver');
t.aspect(g, 'onHeaderCellMouseOut', '_onHeaderCellMouseOver');

        if(this.headerWidgetMap){ 
            //append widget into the container 
            for(var i = 0 ; i < this.headerWidgetMap.getKeyList().length; i++){ 
                var thId = this.headerWidgetMap.getKeyList()[i]; 
                var thNode = dom.byId(thId); 
                var headerWidget = this.headerWidgetMap.item(thId); 
                headerWidget.placeAt(thNode); 
                headerWidget.startup(); 
            } 
            //remove the headerWidgetMap 
            delete this['headerWidgetMap']; 
        }           

        //FIXME: sometimes FF will remember the scroll position of the header row, so force aligned with body. 
        //Does not occur in any other browsers. 
        if(sniff('ff')){ 
            t.aspect(g, 'onModulesLoaded', function(){ 
                t._onHScroll(t._scrollLeft); 
            }); 
        } 
        if(g.columnResizer){ 
            t.aspect(g.columnResizer, 'onResize', function(){ 
                if(g.hScrollerNode.style.display == 'none'){ 
                    t._onHScroll(0); 
                } 
            }); 
        } 
        t._initFocus(); 
    }

Thanks,
TC

Problems with gridX and ie8 ... not sure how to debug

I have a project that uses GridX but I am getting user complaints that it fails with "ie8". The error message is:

"Exception Error: Invalid Template"

I was able to debug my code to the point where I am actually creating an instance of GridX. The failure appears to be occurring with

var myGridX = new Grid(gridArgs, gridNode);

To make debugging harder, it appears that Dojo is catching the exception with a Catch() block and hiding from me which "real" source statement within the GridX code is actually the one throwing the underlying exception.

My project works perfectly in IE9, FF and Chrome ... it is just IE8 that is broken for me. I am at a loss on how to debug further.

Neil