My resource list is a list of users for my scheduler. I would like to show a tooltip when hovering over them that displays user specific information. I can do this easily for events with the eventMouseover but can someone help me do this for resources?
I have all of the user info I just do not know how to make the tooltip appear.
I solved this using the resourceRender function http://fullcalendar.io/docs/resource_rendering/resourceRender/
function resourceRenderCallback(resourceObj, labelTds, bodyTds){
var title = 'Name: ' + resourceObj.title;
labelTds.attr('title', title);
}
From here you can add whatever you desire to title. Another possibility is
labelTds.on('hover', function(){console.log('hover');});
which would allow any jquery event to be triggered for the resource
Related
I am pretty much a javascript noob, and very new to cytoscape (but i code in other languages)...
I am trying to use Cytoscape to graph out the servers available in my network. Creating a node per server and their relationship was straightforward actually.
I would like to add the possibility than when I click a node (let's say server12345) that it would open kind of a table with data associated with that server (servertype etc...).
Do you have any idea / examples / guidance on how I could:
add functionality on that click event of a specific node ?
how to create a 'details' table using cytoscope?
Thank you guys so much in advance!
(Ps: My first post on StackOverflow...)
Nice question.
Firstly, you can capture the click event of cytoscape.js like below
cy.nodes().on('click', function(e){
var clickedNode = e.target;
console.log(clickedNode.id());
});
or you can also use the tap event of cytoscape.js
cy.on('tap', 'node', function(evt){
var node = evt.target;
console.log( 'tapped ' + node.id() );
});
You can read events section of the documentation for more details
After you capture this event, I see to ways.
1-) Just modify an existing HTML element on the UI. For example in here you can see on the left side there are some other elements.
So you can write your code like
cy.on('tap', 'node', function(evt){
var node = evt.target;
document.getElementById('someOtherElementOnUI').innerHTML = JSON.stringfy(node.data());
});
This will simply modify some other UI element (HTML element) and changes its content to the data of the selected node.
2-) You can use some extensions like Cytoscape.js-popper and show data dynamically like a tooltip. You can check my answer https://stackoverflow.com/a/66813720/3209523
We got a Web Dynpro Application which was created with the Floorplan Manager.
By clicking a specific button I start a Business AddIn which check some conditions and then it should show a popup on the screen with a message for the user.
Is there a way I can accomplish that?
One way to get a PopUp (eg confirmation) window in Floorplan applications is to overwrite the NEEDS_CONFIRMATION method of the Interface IF_FPM_GUIBB_*_EXT inside your feeder-class.
Create a reference to cl_fpm_confirmation_request and put this one in the export-parameter EO_CONFIRMATION_REQUEST of the Method.
By Example:
METHOD if_fpm_guibb_list_ext~needs_confirmation.
DATA li_req TYPE REF TO cl_fpm_confirmation_request.
CASE io_event->mv_event_id.
WHEN 'YOUR_EVENT_ID'.
CREATE OBJECT li_req
EXPORTING
it_confirmation_text = 'Plaintext in Content of Popup'
iv_window_title = 'Title of the Popup'
iv_button_text_approve = 'Text Approve-Button'
iv_button_text_reject = 'Text Reject-Button'
.
eo_confirmation_request = li_confrequ.
ENDCASE.
ENDMETHOD.
The method will be called before the PROCESS_EVENT-Method an will override it when you cancel the popup.
Please be aware that every GUIBB-Implementation has it´s own extension interface, e.g. List, Tree, ...
For a deeper look inside popups in FPM or custom-popups have a look into https://blogs.sap.com/2013/11/26/popups-in-floorplan-manager/
Hi I am trying to use drag and drop external events for fullcalendar and get working with the yii extension full calender - which seems to be just a wrapper.
The part that is not working (no errors just does not work) is dragging the external event onto the calendar and it staying there. It drags over but it just returns home.
Reading the fullcalendar docs - it looks like I need to provide a callback function to 'drop' attribute. I've been using the external-event example which is part of full calendar. I did discover the example was using the object name '#calendar' and that yii is creating name '#yw0' but it still didn't work after I updated.
I cannot find a way to get it work. I tried a simple alert which sort of works, it is called on page load - not after a drag operation.
So I declared a variable with the function in View
//$dropcallback=new CJavaScriptExpression("alert('hi')");
$dropcallback=new CJavaScriptExpression(
"function(date, allDay) {
var originalEventObject = $(this).data('eventObject');
var copiedEventObject = $.extend({}, originalEventObject);
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
$('#yw0').fullCalendar('renderEvent', copiedEventObject, true);
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the Draggable Events list
$(this).remove();
}
}
");
Then I create the widgit like this
$this->widget('ext.EFullCalendar.EFullCalendar', array(
'themeCssFile'=>'cupertino/jquery-ui.min.css',
'options'=>array(
'header'=>array(
'left'=>'prev,next',
'center'=>'title',
'right'=>'today'
),
'editable'=>true,
'dropable'=>true,
'drop'=>$dropcallback,
'events'=>Game::model()->gameCalendarData(),
)));
My yii experiance is little and same with JS - so any help appreciated in how to get this working.
I understand that in JS you need to provide a callback to allow the drag op to succeed. But what sort of call back do I need when it is wrapped in a yii widgit? I tried a PHP callback and again it is only called on page load.
The result I wish is that I can build the external events list from the DB - allow users to drag them onto the calendar - and save them in the DB.
I did manage to get data from DB displayed in the calendar.
Thanks
Droppable is spelt with two p's. So
'dropable'=>true,
Should be
'droppable'=>true,
Actually, I'm trying to use a combo-box in Ext.Net to select a value from its selecting list. This combo-box is editable and user can type any value he want.
On selecting list, I want to prevent user from selecting the highlighted item by pressing Enter key and let him just select it by mouse click. for this, i tried to use an listener on bound list "ItemKeyDown" but it did nothing. Other events related to mouse par example, working fine but all events related to key are not working.
I don't know if i have missed something in configurations or what.
Anyone can give me any advise to make theses listeners work?
Thanks in advance,
var combo = Html.X().ComboBox().DisplayField(mark).ValueField(type).Editable(true)
.ID(combo_id).EnableKeyEvents(true).AutoSelect(false).SelectOnFocus(true)
.QueryMode(DataLoadMode.Local).ValidateOnBlur(false).ValidateOnChange(false)
.ListcConfig(Html.X().BoundList()
.Listeners(l => l.ItemKeyDown.Handler = "console.log('ItemKeyDown');")); /// ItemKeyDown not displayed in console.
I post the solution i got from Ext.Net support team so if someone need it in future:
#(Html.X().ComboBox()
.Listeners(events => {
events.Expand.Handler = #"this.listKeyNav.map.removeBinding({
key: Ext.EventObject.ENTER
});";
events.Expand.Delay = 1;
events.Expand.Single = true;
})
)
On my site I have a DataList full of image thumbnails. The thumbnails are HyperLink controls that, when clicked, offer an enlarged view of the source image (stored in my database).
My client wants a facebook Like button on each image and I was hoping to put that in the lightbox window that appears when you click on a thumbnail.
My challenge here is that to generate the info for the Like, I need to create meta tags and each image should, preferably, create it's own meta tags on the fly.
What I can't figure out is how to make the HyperLink click open the lightbox AND create the meta tags at the same time.
Any help will be greatly appreciated.
For a live view of the site, go to http://www.dossier.co.za
The way that we approach similar problems is to hook the onclick event of the href in javascript.
Depending on exactly what you need to do, you can even prevent the standard browser behavior for the hyperlink from executing by returning false from the javascript method.
And in some cases, we just use the hyperlink for "show" by setting the href to "#".
Here is an example that combines all of these concepts:
File Name
In this case, the specified javascript is executed, there is no real hyperlink, and the browser doesn't try to navigate to the specified URL because we return false in the javascript.
Add a Classname to the opening table tag like class="tbl_images" so we can use JQuery to access it. Capture the click on the td and pickup the id of the item. Pass that id to your code as required to generate your meta tags. In the following when the user clicks on an anchor in a td, a function will run.
I use this all the time to access attributes in the td so i can run a function. You could use something like this to pickup values from your image/anchor and create something...
$("#tbl_images > tbody > tr ").each(function () {
//get the id of the tr (if required)
var id = $(this).attr("id");
var ImageTitle = $(this).find("img.Image_Class_Name").attr("title");
//on click of anchor with classname of lighthouse run function,
//passing in our id or other data in the row to our function
$(this).find("td: > a.lighthouse").click(function () {
//update script for this record
MyFunction(id,ImageTitle);
});
});