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))
)
Related
I want to hide the Dev Tools menu item in Kibana, but according to their roadmap, that's not possible with their permission system nor will it be anytime soon. (see https://discuss.elastic.co/t/disable-hide-management-plugin-kibana-5/72763)
Kibana is inside an iFrame hosting a site on the container's domain.
I ended up using MutationObservers in JavaScript to watch for changes to the DOM inside the iFrame in order to hide the menus I didn't want non-admins to see. Solution written in AngularJS 1.2 and is known to work with Kibana 6.2 and 6.3. This will hide several "left side" menus as well as a bunch of Management sub-menus. You can use or modify the code to hide/show additional UI elements. Unfortunately, I had to rely on classes a lot since very few elements contained IDs I could reference.
I hope this at least helps you think of your own solution to managing Kibana display elements outside of their permission structure.
HTML:
<iframe id="AnalysisFrame" ng-src="{{kibanaUrl}}" ng-init="setupFrame()"></iframe>
JavaScript:
$scope.setupFrame = function() {
//iframes are excluded from mutation observation, so we will
// need to create an observer _inside_ the iframe content.
var theFrame = document.querySelector('#AnalysisFrame');
//once the frame is loaded, that is when we can now attach our
// observer to the frame's content.
theFrame.onload = function() {
//console.log('[TRACE] iframe is completely loaded');
var bIsKibanaAdmin = $scope.bIsKibanaAdmin;
//the above is TRUE|FALSE set by some outside logic
// which does not pertain to this exercise.
//create an observer instance for Management sub-menus
var observerMan = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
//console.log('[TRACE] ', mutation);
//sub-menus of the Management console area
var manArea = theFrame.contentDocument.body.querySelector('kbn-management-landing');
if ( manArea ) {
//Management area is divided up by panels of related subjects
var manPanels = manArea.querySelectorAll('div[class*="page-row"]');
if ( manPanels ) manPanels.forEach(function(aPanel) {
//console.log('[TRACE] panel=', aPanel);
//6.2.4 had <div> titles, 6.3.x has <h3> titles, select based on their class only
var panelTitle = aPanel.querySelector('.kuiPanelHeader__title');
//if a panel has a title (version panel does not have one), see if hide or not.
if ( panelTitle ) switch ( panelTitle.innerText ) {
case 'Kibana':
//only hide the Advanced Settings item off this panel
var panelItem = aPanel.querySelector('li > a[href*="#/management/kibana/settings"]');
if ( panelItem ) panelItem.parentElement.hidden = !bIsKibanaAdmin;
break;
default:
//most management panels are hidden from non-admins
aPanel.hidden = !bIsKibanaAdmin;
}//switch
});
}
});
});
//configuration of the left menu becomes active observer
var configMan = {
attributes: true, //for when Management becomes the Active menu
attributeFilter: ['class'],
//attributeOldValue: true,
childList: false,
characterData: false,
//characterDataOldValue: false,
//subtree: true,
};
//the Management menu item does not exist yet, cannot start observing until later.
//create an observer instance for left menu
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
//console.log('[TRACE] ', mutation);
var leftMenus = mutation.target.querySelectorAll('.global-nav-link');
//since the menus do not have IDs, we are searching for their outer
// DIV class unique to all left menu items. Their first element child
// will be the <a href> link we can use to filter out ones we
// wish to show or not.
if ( leftMenus ) leftMenus.forEach(function(aMenu) {
if ( aMenu.firstElementChild ) {
switch ( aMenu.firstElementChild.hash ) {
case "#/dev_tools":
aMenu.hidden = !bIsKibanaAdmin;
break;
case "#/account":
aMenu.hidden = true;
break;
case "":
if ( aMenu.innerText=='Logout' ) {
aMenu.hidden = true;
}
//else console.log('[TRACE] menu=', aMenu);
break;
case "#/management":
//we only want to hide certain sub-menus
// our menu item exists, attach observer for when
// user clicks it to make it "active"
observerMan.observe(aMenu, configMan);
break;
default:
//console.log('[TRACE] menu=', aMenu);
}//switch
}
});
});
});
//configuration of the left menu creation observer
var configLM = {
attributes: false,
//attributeFilter: ['src'],
//attributeOldValue: true,
childList: true,
characterData: false,
//characterDataOldValue: false,
//subtree: true,
};
//start observing the contents of the iframe changes
observer.observe(theFrame.contentDocument.body, configLM);
};
};
I'm facing an issue when trying to perform server side pagination using an enhanced datagrid (dojo v1.10).
The first page is correctly displayed, but the widget (store ? grid ? plugin ?) seems to ignore the 'Content-Range' header value in response and does not allow to get next page.
For example with response header containing 'Content-Range: items 0-9/17', pagination displays '1 to 10 of 10 items', and next page is not available.
After some debug I see that range value is correctly read from JsonRest store (query function)
results.total = results.then(function(){
var range = results.ioArgs.xhr.getResponseHeader("Content-Range");
return range && (range = range.match(/\/(.*)/)) && +range[1];
});
...
But in fetch method from ObjectStore, totalCount value is undefined, results.length is then used:
var results = this.objectStore.query(query, args);
Deferred.when(results.total, function(totalCount){
Deferred.when(results, function(results){
if(args.onBegin){
args.onBegin.call(scope, totalCount || results.length, args);
...
Any idea ?
Thanks,
My code:
// get grid store
var restStore = new JsonRest(
{
target: "ks2/api/workflow/...",
});
var memoryStore = new Memory();
var store = Cache(restStore, memoryStore);
/*set up layout*/
var layout = [{
name: "id",
field: 'id',
width: '5%',
datatype:"string"
},
....
];
/*create a new grid*/
this.workflowGridWidget = new EnhancedGrid({
id: 'workflowGridWidget',
store: new ObjectStore({objectStore: store}),
structure: layout,
rowSelector: '20px',
plugins: {
pagination: {
pageSizes: ["10", "25", "50"],
defaultPageSize: 10,
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
maxPageStep: 4,//page step to be displayed
position: "bottom" //position of the pagination bar
}
}
});
/*append the new grid to the div*/
this.workflowGridWidget.placeAt("workflowDataGrid");
/*Call startup() to render the grid*/
this.workflowGridWidget.startup();
I found the issue: I was using a non dojo restful compliant API, and I needed to add JSON response post-processing using
aspect.after(store, "query", this.processResponse);
...
processResponse: function ks2ProcessMonitor_datagrid_WorkflowDataGrid_processResponse(deferred) {
return deferred.then(function(response) {
//process response content
return processedResponse;
});
},
This was working properly but for some reason, it has an impact on pagination. Removing this post-processing (using another API which is dojo compliant) fix the pagination issue.
Maybe I should try response post-processing using an Observable as suggested by Layke.
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.
I have a modal which has two event dates how to create two events in fullcalendar when clicked on add button.I tried this.
$('#btnAdd').on('click', function (e) {
$('#interviewModal').modal('hide');
var arr = new Array();
var event = {
title : $('#txtTitle').val(),
start : $('#txtStartDate').val(),
end : $('#txtEndDate').val(),
allDay: false,
stick : true
}
var event2 = {
title : $('#txtTitle').val(),
start : $('#txtStartDate2').val(),
end : $('#txtEndDate2').val(),
allDay : false,
stick : true
}
arr.push(event);
arr.push(event2)
e.preventDefault();
$('#calendar').fullCalendar('renderEvent',arr);
});
Also my modal looks like this
Modal Picture
Use "renderEvents" instead of "renderEvent". https://fullcalendar.io/docs/event_rendering/renderEvents/
$('#calendar').fullCalendar('renderEvents', arr, true);
This accepts an array of events, instead of a single one.
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.