I want to edit some values inside an enhancedgrid. For the first time it works well. The item is send to server via JSONRest and the values are stored on Server. If i want to do more edits in the same row, the row is freezed in. Other rows are editable.
I use AMD-Style-Syntax
The Reststore comes here:
_listenStore: new Cache(new JsonRest({
target: "Liste/",
idProperty: "id",
editable: true
}),new Memory()),
The Grid is coming up during startup() of the Widget
this._wuListenGrid=new dojox.grid.EnhancedGrid({
selectionMode: "single",
store: new ObjectStore({objectStore: this._listenStore}),
structure: this._strukturListen,
nestedSorting: true,
editable: true,
singleClickEdit: true,
keepSelection: false,
alwaysEditing: true
});
domConstruct.place(this._wuListenGrid.domNode,this.cpListen.domNode, "last");
this._wuListenGrid.startup();
The structure is defined outside, but works as expected. The editable fields are defined with 'editable': true
I'll do the save with
this._wuListenGrid.store.save();
If save() is called, the RestStore submit the changed items ondemand. So I think the store-part should be oK.
Related
I am creating a timeline using R/Shiny timevis package. I can see in R/Shiny that you can setOptions so that the items are editable. I can see in visjs documentation that you can then set individual manipulation actions (see below).
Is there a way for me to set these options from R/Shiny using setOptions? Thanks...
timevis(groups = project_groups) %>%
setOptions(list(editable = TRUE,
...
https://visjs.github.io/vis-timeline/docs/timeline/#Editing_Items
// enable or disable all manipulation actions
var options = {
editable: true // true or false
};
// enable or disable individual manipulation actions
var options = {
editable: {
add: true, // add new items by double tapping
updateTime: true, // drag items horizontally
updateGroup: true, // drag items from one group to another
remove: true, // delete an item by tapping the delete button top right
overrideItems: false // allow these options to override item.editable
}
};
Yes you can set individual options. Here is an example:
library(timevis)
timevis(
data.frame(start = Sys.Date(), content = "Today"),
options = list(editable = list(add = TRUE, remove = FALSE))
)
I need to simulate a drag & drop on fullcalendar in the week view with protractor. I found something with coordinates but I'd like a "no browser window dependent solution"... ther's also no way out on finding the exact starting cell in the week view by class or id ...or at least, I couldn't figure how to select a single cell of a row of a day because, using the Chrome's item selector, it seems every row has the same class fc-widget-content and cells are not "selectable" elements.
Are there any other chances?
maybe this is a little bit helpful (also very later ;). I also want to test my app with FullCalendar, but I'm using Cypress (similar to Protractor).
We plan items from an external list and assign it to a resource on a certain day/time in the FullCalendar (we use the scheduler plugin).
I found out that the drag and drop event is somehow intercepted by code, enriching it with for example properties of the event (like date, title and others). How I enriched this data is in the Cypress trigger('drop', data) command. Data is the evenData that is set by the Draggable class:
// Executed on the external list items, where every item we want to plan has class `.fc-event`.
this.draggableContainer = new Draggable(this.containerEl.nativeElement, {
itemSelector: '.fc-event',
eventData(eventEl) {
const id = eventEl.dataset.id;
return {
duration,
id: currentWorkItem.id,
title: currentWorkItem.description,
extendedProps: {
duration,
customRender: true,
data: currentWorkItem,
},
};
}
Then, in your test file (Cypress)
const eventData = {
date: new Date(),
dateStr: new Date().toISOString(),
draggedEl: {
dataset: {
notificationId: '123',
priority: '0',
title: 'Test',
},
},
jsEvent: null,
resource: {
id: '123',
},
event: null,
oldEvent: null,
};
cy.get('.fc-event') // selector for the external event I want to drag in the calendar
.trigger('dragstart')
.get('.fc-time-grid table tr[data-time="07:00:00"] td.fc-widget-content:nth-child(2)') // selector for where I want to drop the event.
.trigger('drop', eventData) // this will fire the eventDrop event
So, .trigger('drop', eventData) will fill the eventDrop info. It is not exactly the same as doing it manually, but works for me.
Caveats:
I haven't found a way to plan it on another resource (we use the resource scheduling plugin of FullCalendar.io). It does not matter that much, because you can specify it in the evenData (resource: { id: 'my-resource-id' } }.
No visual feedback because the drag mirror is not shown. Not a big problem during e2e testing, but it is a bit of a blackbox now. Maybe this is fixable
As part of a WP plugin I am creating, I am using Wordpress' Javascript/AJAX modal Uploader/gallery browser for multiple item selection. I am using this JS code;
file_frame = wp.media.frames.file_frame = wp.media({
multiple: true,
library: {
type: 'image'
},
});
This creates the frame as expected, but removes the left hand side bar, and the bottom edit/clear selection tool. Does anyone know how I can get these 2 things back?
I have an ASP.NET website with a C# back-end that uses Jqgrid.
I want users to be able to select an item in the grid to edit. One of the fields that can be edited will be presented to users as a drop-down selection list with only valid options for that user.
For example, let's say I have a grid displaying persons. If "person1" is edited, the user may be able to choose "blue" or "red" from the selection list for this item, but if "person2" is edited the user may only choose "yellow" or "green" from the selection list.
I want to dynamically populate the selection list based on what person/row is selected.
I have editoptions and dataurl set on the specific field as follows:
editoptions: { dataUrl: 'FetchData.aspx' }
Yet, I somehow need some kind of parameter to pass to the FetchData.aspx page so that it can do its background-checking on the specific person and create the correct list for the specific "person".
I was hoping I could pass the rowid or itemname or something as follows to identify the specific row/item that is selected:
editoptions: { dataUrl: 'FetchData.aspx?selecteditem=' + Id }
How can I pass a parameter so that I can create the correct list of items for the specific item? There are countless similar questions on the web, but I haven't been able to find a conclusive answer...
I have solved the problem by adding the following onSelectRow function (note that 'Id' in the below code represents the name of a column I want to pass as parameter. It can be any column name in your grid) :
onSelectRow: function (id) {
var temp = $("#list").getRowData(id)['Id']
$("#list").setColProp('mySelectListColumnName', { editoptions: { dataUrl:'FetchData.aspx?selecteditem=' + temp });
}
The above helps to pass the parameter. However, this alone is not sufficient - it allows FetchData.aspx to receive a parameter and customize the html response accordingly, but it only fetches the values once from the dataUrl - so it doesn't refresh when I select different rows.
To solve this, I have also added the following statement:
jQuery.extend(jQuery.jgrid.edit, { recreateForm: true });
This ensures that the edit form will be recreated every time that edit is clicked, which is what I want since the edit form will be slightly different for each row. Works perfectly. Hope this helps someone out there - there is a maze of options out there and this is the simplest I've seen. And it works.
Add this to your defaults:
jQuery.extend(jQuery.jgrid.edit, { recreateForm: true });
and this to your grid parameters:
ajaxSelectOptions: {
data: {
selecteditem: function() { return $('#list').jqGrid('getGridParam', 'selrow'); } }
}
I have a dojo grid which is using some editable dijit form fields. All is well, until I try ot implement an country (multi) select cell as an Tooltip Dialog; i.e., show a drop down button which opens the tooltip dialog populated with a checkbox array to select one or more country. Once checked and clicked OK, the cell should update with a list of selected countries. Obviously I'll take care of updating the server via the store later on.
I've implemented a country select tooltip dialog which works fine like so:
dojo.provide("CountrySelector");
dojo.declare(
"CountrySelector",
[dijit.form.DropDownButton],
{
label: 'Countries',
dropDown: new dijit.TooltipDialog({ execute: function() {
console.log("EXECUTE : ", arguments[0]);
this.value = arguments[0].country;
}, href:'/cm/ui/countries' }),
postCreate: function() {
this.inherited(arguments);
this.label = this.value;
dojo.connect(this.dropDown, 'onClose', function() { console.log('close'); });
console.log("CountrySelect post create", this);
},
}
);
And the grid cell is typed as:
{ name: 'Countries', field: 'targeting.countries', editable: true, hidden: false, type:dojox.grid.cells._Widget, widgetClass: CountrySelector },
All is working fine but I can't figure out how to update cell's content and store once the widget is executed. As well, I don't seem to have the row id of the updated row.
Any ideas?
Thanks,
Harel
//Layout:
gridLayout: {rows: [{name: 'Coll Name',field: 'colField', type: dojox.grid.cells.ComboBox, editable:'true', width:'8%',options: [], alwaysEditing:false}]}
//Grid Store:
this.gridStore = new dojo.data.ItemFileReadStore({data: {items: data}});
//
var setOptions = function(items, request){
this.gridLayout.rows[0].options.push('Val 1','Val 2');
this.gridLayout.rows[0].values.push('1','2');
dojo.connect(this.gridLayout.rows[0].type.prototype.widgetClass.prototype, "onChange",this, "_onComboChange");
}
this.gridStore.fetch({onComplete: dojo.hitch(this,setOptions)});
_onComboChange: function (selectedOption) {
console.info("_onComboChange: ",selectedOption);
},
// If you need to populate combos with different values you can use onItem
var getArray = function(item, request){
// populate one by one
// attach an event to each combo
}
this.gridStore.fetch({onItem: dojo.hitch(this,getArray)});
This is what i used to update my grid
var idx = yourGrid.getItemIndex(item);
if (idx >- 1) {
yourGrid.updateRow(idx);
}
More detail
every row is identified by its identifier
yourGrid.store.fetchItemByIdentity({
identity: <yourIdentity>,
onItem: function(item){
// Update your attributes in the store depending on the server response
// yourGrid.store.setValue(item, <attribute>,<value>);
var idx = yourGrid.getItemIndex(item);
if (idx >- 1) {
yourGrid.updateRow(idx);
}
}
});
I didn't set up a test with your code but you should be able to do it by just creating a method named getValue in your widget that returns the value.
Take a look at the other examples (like dojox.grid.cells.ComboBox) to get an idea of what getValue should look like.