Dojo DataGrid loading selected items - datagrid

I have a DataGrid and want a user to select multiple items and click a button to do something with those items (such as delete). When only a few items are selected, the deleting works, but if the user selects all the items without scrolling slowly over them, some of the selected items are null.
I also tried grid.removeSelectedRows(), but that also doesn't work for non-loaded items.
I tried fetching first, too:
grid.store.fetch({count:grid.rowCount,onComplete:dojo.hitch(this,function(){
var items = grid.selection.getSelected();
grid.selection.clear();
if (items.length) {
dojo.forEach(items, function(selectedItem) {
if (selectedItem !== null) {
grid.store.deleteItem(selectedItem); //or do something else
}
});
}
grid.sort();
})});
Even with the fetch, there are still null items, and only the very top and bottom rows actually get deleted.
Is there a way to load the selected items in a grid?

My task was to "extend" selection first item values to the rest of the selection. I've faced similar problem as yours, but finally found a solution:
updateSelected = function() {
//Callback for processing a returned list of items.
function gotSelected(items, request) {
var selectedIndex = paramGrid.selection.selected;
console.debug(selectedIndex);
var firstItem;
var counter = 0;
for (var i=0;i<selectedIndex.length;i++){
if(selectedIndex[i]){
var item = items[i];
if (counter < 1){
firstItem = item;
counter ++;
}else{
paramStore.setValue(item, "valueSPO", firstItem.valueSPO);
paramStore.setValue(item, "valueSPI", firstItem.valueSPI);
paramStore.setValue(item, "valueSM", firstItem.valueSM);
paramStore.setValue(item, "state", firstItem.state);
}
}
}
}
function fetchFailed(error, request) {
console.log("lookup failed.");
console.log(error);
}
paramStore.fetch({
query: {id: '*'},
onComplete: gotSelected,
onError: fetchFailed,
});
}
After this you have to connect this function to a button in addOnLoad:
dojo.connect(button2, "onClick", updateSelected);

Related

How to browse to the next page in a datasource that is loaded into table in Google AppMaker

I'm working on a requirement where I have a datasource named 'emailSearchResults' where I search for email messages metadata and load the results in the datasource.
The fields in the datasource are not relevant, however I set the datasource to have 50 records per page as per the below screenshot:
The script I used to load the datasource is shown in the query field, that call the following script:
function getMessageDetails(userId, msgID)
{
var messageDetails = [];
var messageData;
var msgID_,subject_,from_,date_;
messageData=Gmail.Users.Messages.get(userId,msgID,{format:"metadata", metadataHeaders:["Message-ID", "Subject", "From", "Date"]});
console.log(messageData.payload.headers);
//console.log(msgID);
//console.log(messageData.payload.headers[3].value);
date_="<na>";
from_="<na>";
subject_="<na>";
msgID_="<na>";
for (var counter =0;counter<4;counter++)
{
if (messageData.payload.headers[counter].name=="Message-ID")
{
msgID_=messageData.payload.headers[counter].value;
}
if (messageData.payload.headers[counter].name=="Subject")
{
subject_=messageData.payload.headers[counter].value;
}
if (messageData.payload.headers[counter].name=="From")
{
from_=messageData.payload.headers[counter].value;
}
if (messageData.payload.headers[counter].name=="Date")
{
date_=messageData.payload.headers[counter].value;
}
}
messageDetails.push(date_);
messageDetails.push(from_);
messageDetails.push(subject_);
messageDetails.push(msgID_);
return messageDetails;
}
function searchMessages(userId,condition)
{
//
// first we build the conditions
// we can make it fixed
// or we can make it dynamic
var searchResult;
var deleteResult;
var currentMessage;
var results = [];
var pageToken;
var params = {};
var _stat;
var options = {
includeSpamTrash: "true",
pageToken: pageToken
};
var msgRecord = [];
do
{
searchResult=Gmail.Users.Messages.list(userId,options);
for (var i = 0; i < searchResult.messages.length; i++)
{
var record=app.models.emailSearchResults.newRecord();
msgRecord=getMessageDetails(userId,searchResult.messages[i].id);
record.msgMainID=searchResult.messages[i].id;
record.msgID=msgRecord[3];
record.subject=msgRecord[2];
record.senderAddress=msgRecord[1];
record.msgDate=msgRecord[0];
/*console.log(searchResult.messages[i].id);
console.log(msgRecord[3]);
console.log(msgRecord[2]);
console.log(msgRecord[1]);
console.log(msgRecord[0]);
return;*/
results.push(record);
msgRecord=null;
}
if (searchResult.nextPageToken) {
options.pageToken = searchResult.nextPageToken;
}
} while (searchResult.pageToken);
searchResult=null;
return results;
}
On the main page I put a table and linked it to the datasource, and I enabled pagination on the table, so I get the pager buttons at the bottom of the table as below:
When I execute the app and the datasource is filled, I see the first page results in a correct way, however when I want to move to the next page, I click the next page button and once the loading is complete I find out that I still see the same results from the first page on the table.
I am not familiar with how to make the table show the results of the second page then the third page, and I am going in circles on this...
Hope the explanation is clear and addresses the issue..
I would really appreciate any help on this!
Regards
Currently pagination isn't working as expected with calculated datasources. You can, however, build your own. There are several changes you'll need to make to accomplish this. First you'll want to refactor your searchMessages function to something like this:
function searchMessages(userId, pageToken){
var results = [];
var options = {
includeSpamTrash: "true",
pageToken: pageToken,
maxResults: 50
};
var searchResult = Gmail.Users.Messages.list(userId, options);
for (var i = 0; i < searchResult.messages.length; i++){
var record = app.models.emailSearchResults.newRecord();
var msgRecord = getMessageDetails(userId,searchResult.messages[i].id);
record.msgMainID = searchResult.messages[i].id;
record.msgID = msgRecord[3];
record.subject = msgRecord[2];
record.senderAddress = msgRecord[1];
record.msgDate = msgRecord[0];
results.push(record);
}
return {records: results, nextPageToken: searchResult.nextPageToken};
}
Then you'll want to change your datasource query. You'll need to add a number parameter called page.
var cache = CacheService.getUserCache();
var page = query.parameters.page || 1;
var pageToken;
if(page > 1){
pageToken = cache.get('pageToken' + page.toString());
}
var results = searchMessages('me', pageToken);
var nextPage = (page + 1).toString();
cache.put('pageToken' + nextPage, results.nextPageToken);
return results.records;
You'll need to modify the pagination widget's various attributes. Here are the previous/next click functions:
Previous:
widget.datasource.query.pageIndex--;
widget.datasource.query.parameters.page = widget.datasource.query.pageIndex;
widget.datasource.load();
Next:
widget.datasource.query.pageIndex++;
widget.datasource.query.parameters.page = widget.datasource.query.pageIndex;
widget.datasource.load();
You should be able to take it from there.

Items in list is never selected

I have a list and setting the list to the exact item that is in it's dataProvider would not select it programmatically. Here is the code:
if (list.selectedItem != iDocument) {
var length:int = documentsCollection.length;
for (var i:int;i<length;i++) {
jDocument = IDocumentData(documentsCollection.getItemAt(i));
if (jDocument.uid==iDocument.uid) {
list.selectedItem = IDocumentData(documentsCollection.getItemAt(i));
break;
}
}
}
There were two issues.
I had applied a sort to the ArrayCollection and the field was not in the item. I had copied code from another project and the field was "#name" since it was an XMLListCollection. The sort field should have been set to "name".
So when you set the selectedItem property it looks in the collection and if the collection has a sort then it looks in the findItem() call which does a compare function that checks if the item has the field name in the item. If not it throws an error. Since I had the incorrect field name an error was thrown. If an error is thrown then the pursuit to find the selected item is abandoned and selected index is -1.
Code from ListCollectionView.as:
try
{
return sort.findItem(localIndex, values, mode, insertIndex);
}
catch (e:SortError)
{
// usually because the find critieria is not compatible with the sort.
}
return -1;
Code from Sort.as:
var hasFieldName:Boolean;
try
{
hasFieldName = values[fieldName] !== undefined;
}
catch(e:Error)
{
hasFieldName = false;
}
if (hasFieldName)
{
if (!hadPreviousFieldName)
{
message = resourceManager.getString(
"collections", "findCondition", [ fieldName ]);
throw new SortError(message);
}
else
{
fieldsForCompare.push(fieldName);
}
}
The second issue was that the List uses an exact equality operator so it uses "===" instead of "==". This means that you have to make sure you are passing in the exact instance of the item in the list.

Automatically hide "empty" columns in ExtJS grid Panel

Is there a plugin for the ExtJS Grid that automatically hides "empty" columns?
A column should be deemed "empty" if the value of the mapped field for all Records in the underlying store matches a given "emptiness" criteria (a given value or, better, a function).
Run-time add/remove/update operations on the underlying store should hide/un-hide columns accordingly.
Thanks!
I had to do something similar to this... here is a "Hiding Column Model" that will hide/show columns based on the return value of the "fieldHasData" method... it is probably a close start to what you were asking
Ext.ux.grid.HidingColumnModel = function() {
var Class = Ext.extend(Ext.grid.ColumnModel, {
constructor:function(config) {
Class.superclass.constructor.call(this, config);
},
onGridStoreLoad:function(store, records, options) {
store.fields.each(function(item, index, length) {
var colIndex = this.findColumnIndex(item.name);
if (colIndex >= 0) {
this.setHidden(colIndex, !this.fieldHasData(item.name, records));
}
}, this);
},
fieldHasData:function(field, records) {
var hasData = false;
Ext.each(Ext.pluck(records, "data"), function(item, index, allItems) {
if (item[field]) {
hasData = true;
}
});
return hasData;
}
});
return Class;
}();
And then in your grid... do add the listener on the column model
var columnModel = new Ext.ux.grid.HidingColumnModel(),
store = ... {create your store},
gridPanel = new Ext.grid.GridPanel({
...
store:store,
columnModel:columnModel,
...
});
store.on('load', columnModel.onGridStoreLoad, columnModel);
Since I could not find a similar plugin anywhere, I just implemented it myself :)
The code is on the extjs/sencha forums here:
http://www.sencha.com/forum/showthread.php?140685-Grid-Plugin-dynamically-hiding-columns-matching-quot-emptiness-quot-criteria&p=626670#post626670

asp.net mvc - how to update dropdown list in tinyMCE

Scenario: I have a standard dropdown list and when the value in that dropdownlist changes I want to update another dropdownlist that exists in a tinyMCE control.
Currently it does what I want when I open the page (i.e. the first time)...
function changeParent() {
}
tinymce.create('tinymce.plugins.MoePlugin', {
createControl: function(n, cm) {
switch (n) {
case 'mylistbox':
var mlb = cm.createListBox('mylistbox', {
title: 'Inserts',
onselect: function(v) {
tinyMCE.execCommand("mceInsertContent",false,v);
}
});
<% foreach (var insert in (ViewData["Inserts"] as List<String>)) { %> // This is .NET
yourobject = '<%= insert %>'; // This is JS AND .NET
mlb.add(yourobject, yourobject); // This is JavaScript
<% } %>
// Return the new listbox instance
return mlb;
}
return null;
}
});
<%= Html.DropDownList(Model.Record[184].ModelEntity.ModelEntityId.ToString(), ViewData["Containers"] as SelectList, new { onchange = "changeParent(); return false;" })%>
I am thinking the way to accomplish this (in the ChangeParentFunction) is to call a controller action to get a new list, then grab the 'mylistbox' object and reassign it, but am unsure how to put it all together.
As far as updating the TinyMCE listbox goes, you can try using a tinymce.ui.NativeListBox instead of the standard tinymce.ui.ListBox. You can do this by setting the last argument to cm.createListBox to tinymce.ui.NativeListBox. This way, you'll have a regular old <select> that you can update as you normally would.
The downside is that it looks like you'll need to manually hook up your own onchange listener since NativeListBox maintains its own list of items internally.
EDIT:
I played around a bit with this last night and here's what I've come up with.
First, here's how to use a native list box and wire up our own onChange handler, the TinyMCE way:
// Create a NativeListBox so we can easily modify the contents of the list.
var mlb = cm.createListBox('mylistbox', {
title: 'Inserts'
}, tinymce.ui.NativeListBox);
// Set our own change handler.
mlb.onPostRender.add(function(t) {
tinymce.dom.Event.add(t.id, 'change', function(e) {
var v = e.target.options[e.target.selectedIndex].value;
tinyMCE.activeEditor.execCommand("mceInsertContent", false, v);
e.target.selectedIndex = 0;
});
});
As far as updating the list box at runtime, your idea of calling a controller action to get the new items is sound; I'm not familiar with ASP.NET, so I can't really help you there.
The ID of the <select> that TinyMCE creates takes the form editorId_controlId, where in your case controlId is "mylistbox". Firebug in Firefox is the easiest way to find the ID of the <select> :)
Here's the test button I added to my page to check if the above code was working:
<script type="text/javascript">
function doFoo() {
// Change "myEditor" below to the ID of your TinyMCE instance.
var insertsElem = document.getElementById("myEditor_mylistbox");
insertsElem.options.length = 1; // Remove all but the first option.
var optElem = document.createElement("option");
optElem.value = "1";
optElem.text = "Foo";
insertsElem.add(optElem, null);
optElem = document.createElement("option");
optElem.value = "2";
optElem.text = "Bar";
insertsElem.add(optElem, null);
}
</script>
<button onclick="doFoo();">FOO</button>
Hope this helps, or at least gets you started.
Step 1 - Provide a JsonResult in your controller
public JsonResult GetInserts(int containerId)
{
//some code to get list of inserts here
List<string> somedata = doSomeStuff();
return Json(somedata);
}
Step 2 - Create javascript function to get Json results
function getInserts() {
var params = {};
params.containerId = $("#184").val();
$.getJSON("GetInserts", params, updateInserts);
};
updateInserts = function(data) {
var insertsElem = document.getElementById("183_mylistbox");
insertsElem.options.length = 1; // Remove all but the first option.
var optElem = document.createElement("option");
for (var item in data) {
optElem = document.createElement("option");
optElem.value = item;
optElem.text = data[item];
try {
insertsElem.add(optElem, null); // standards compliant browsers
}
catch(ex) {
insertsElem.add(optElem, item+1); // IE only (second paramater is the items position in the list)
}
}
};
Step 3 - Create NativeListBox (code above provided by ZoogieZork above)
var mlb = cm.createListBox('mylistbox', {
title: 'Inserts'
}, tinymce.ui.NativeListBox);
// Set our own change handler.
mlb.onPostRender.add(function(t) {
tinymce.dom.Event.add(t.id, 'change', function(e) {
var v = e.target.options[e.target.selectedIndex].value;
tinyMCE.activeEditor.execCommand("mceInsertContent", false, v);
e.target.selectedIndex = 0;
});
});
//populate inserts on listbox create
getInserts();

How to prevent tree items from being dragged into themselves?

I have a flex tree with dragMoveEnabled = true. I want to find out, when an item is dragged into itself or it's children. I'd like to use DragManager.showFeedback(DragManager.NONE) in the tree's onDragOver handler, but can't find out how get this to work. I'm using an ArrayCollection of nested objects as dataSource for the tree.
private function onDragOver(event:DragEvent):void {
event.preventDefault();
event.currentTarget.hideDropFeedback(event);
var index:int = tree.calculateDropIndex(event);
tree.selectedIndex = index;
var subCategory:CategoryVO = CategoryVO(tree.selectedItem);
var currentCategory:CategoryVO = subCategory;
while(currentCategory.parent != 0) {
if (currentCategory.parent == _draggedItem.id) {
DragManager.showFeedback(DragManager.NONE);
return;
}
currentCategory = tree.getParentItem(currentCategory);
if (currentCategory == null) {
break;
}
DragManager.showFeedback(DragManager.MOVE);
tree.showDropFeedback(event);
}
That's how I solved it.
_draggedItem holds the currently dragged item, set in the tree's onDragEnter handler. CategoryVO is the value object I use.
can you do something like:
if(event.currentTarget == event.target){
//item is being dropped on itself
}

Resources