In EJ2 .NET Core Syncfusion Diagram component how can I extend the Node object with custom properties and save them into database. The documentation describes only the saving / loading of the whole diagram. Ideally, I would like upon each node selection the custom properties, coming from datatable, to be shown in the right pane as in angular diagram builder example. Is there any event which will notify about user selection?
We can extend the node object with custom properties by using addInfo property. Please find below code example for how to use addInfo property of node.
Dictionary<string, object> addInfo = new Dictionary<string, object>();
addInfo.Add("Text", "New");
Nodes.Add(new DiagramNode()
{
Id = "NewIdea",
OffsetY = 80,
OffsetX = 340,
Height = 60,
AddInfo =addInfo,
Shape = new { type = "Flow", shape = "Terminator" }
});
The selection change event gets fired, while selecting the node. In that event, the args.newValue parameter assist to identify which node is get selected. Please find below code example for how to use the selectionChange event.
<ejs-diagram id="container" width="100%" height="700px" selectionChange="selectionChange" nodes="ViewBag.nodes" connectors="ViewBag.connectors">
<e-diagram-snapsettings horizontalGridlines="ViewBag.gridLines" verticalGridlines="ViewBag.gridLines"></e-diagram-snapsettings>
</ejs-diagram>
function selectionChange(args) {
var node = args.newValue[0];
// define your logic here
}
For more information about selectionChange event, please refer to below help documentation link
Documentation: https://ej2.syncfusion.com/documentation/api/diagram/iSelectionChangeEventArgs/
Regards,
Ramya T
Related
There is no ItemsSource property on the dotnet maui 7 ContextMenu MenuFlyout. How can we bind this to a collection. Surely they don't expect us to hardcode this? I'm trying to get a list of these within a MenuFlyoutSubItem
https://learn.microsoft.com/en-us/dotnet/maui/user-interface/context-menu?view=net-maui-7.0
Thanks
Anyway we found a workaround, as we needed a dynamically generated context menu, we now use a TapGestureRecogniser to handle a right click event and then in the code behind create the whole context menu itself each time and attach it to the view.
void ContextMenu_Selected(System.Object sender,Microsoft.Maui.Controls.TappedEventArgs e)
{
HorizontalStackLayout hs = (HorizontalStackLayout)sender;
MenuFlyout mf = new MenuFlyout();
MenuFlyoutItem flyoutItem = new MenuFlyoutItem();
flyoutItem.Text = "Menu text"
mf.Add(flyoutItem);
FlyoutBase.SetContextFlyout(hs, mf);
}
As an example, I have a Master\Detail grid.
Master\Detail defined as key-relation model and on getDetailRowData method parent node data exists in params
but how to get parent node data from child view?
Tried via context-menu:
On right click - getContextMenuItems got executed which has an input params
On this sample, child-grid doesn't have any row and node in context-params is null, it's ok,
but anyway it should be possible to retrieve the parent details at least via grid API, isn't it ?
Then I've tried to get parent via node:
but instead of detail_173 as you can see its ROOT_NODE_ID, and here is a confusion for me.
So question is that how to get parent node data (RecordID 173 just in case) through child-view context menu or any other possible way (without storing temp value, cuz multiple children's could be opened at the same time)
Yes, I've read this part Accessing Detail Grid API, and still unclear how to get parent-node via child-grid.
For React Hook users without access to lifecycle methods, use Ag-Grid Context to pass the parent node (or parent data) to the detail grid via detailGridOptions. No need to traverse the DOM or use a detailCellRenderer unless you want to :)
https://www.ag-grid.com/javascript-grid-context/
detailCellRendererParams: (masterGridParams) => ({
detailGridOptions: {
...
context: {
masterGrid: {
node: masterGridParams.node.parent,
data: masterGridParams.data
}
},
onCellClicked: detailGridParams => {
console.log(detailGridParams.context.masterGrid.node);
console.log(detailGridParams.context.masterGrid.data);
}
}
})
Able to achieve it. Have a look at the plunk I've created: Get master record from child record - Editing Cells with Master / Detail
Right click on any child grid's cell, and check the console log. You'll be able to see parent record in the log for the child record on which you've click.
The implementation is somewhat tricky. We need to traverse the DOM inside our component code. Luckily ag-grid has provided us the access of it.
Get the child grid's wrapper HTML node from the params - Here in the code, I get it as the 6th element of the gridOptionsWrapper.layoutElements array.
Get it's 3rd level parent element - which is the actual row of the parent. Get it's row-id.
Use it to get the row of the parent grid using parent grid's gridApi.
getContextMenuItems: (params): void => {
var masterId = params.node.gridOptionsWrapper.layoutElements[6]
.parentElement.parentElement.parentElement.getAttribute('row-id');
// get the parent's id
var id = masterId.replace( /^\D+/g, '');
console.log(id);
var masterRecord = this.gridApi.getRowNode(id).data;
console.log(masterRecord);
},
defaultColDef: { editable: true },
onFirstDataRendered(params) {
params.api.sizeColumnsToFit();
}
Note: Master grid's rowIds are defined with [getRowNodeId]="getRowNodeId" assuming that account is the primary key of the parent grid.
A very reliable solution is to create your own detailCellRenderer.
on the init method:
this.masterNode = params.node.parent;
when creating the detail grid:
detailGridOptions = {
...
onCellClicked: params => console.log(this.masterNode.data)
}
Here is a plunker demonstrating this:
https://next.plnkr.co/edit/8EIHpxQnlxsqe7EO
I struggled a lot in finding a solution to this problem without creating custom details renderer but I could not find any viable solution. So the real good solution is already answered. I am just trying to share another way to avoid creating custom renderer.
So What I did is that I changed the details data on the fly and added the field I required from the parent.
getDetailRowData: function (params: any) {
params?.data?.children?.forEach((child:any) => {
//You can assign any other parameter.
child.parentId= params?.data?.id;
});
params.successCallback(params?.data?.children);
}
When you expand the row to render details the method getDetailRowData gets called, so it takes in params as the current row for which we are expanding the details and the details table is set by invoking params.successCallback. So before setting the row data I am iterating and updating the parentId.
Hey there I'm still trying to improve a customized Wicket Wizard to display the steps with following states: active, completed, pending. Therefore the information of isCompleted(); should return the right value. Refering to a previous question, isComplete(); returns true, if the wizard can go to the next step.
How can I manipulate this information to get the full advantage of my draft? E.g. in one WizardStep I have multiple input fields.
super(new ResourceModel("daten.title"), new ResourceModel("daten.summary"));
java.util.Collections.addAll(sprachen, "Deutsch","English","Français","Italiano");
add(name = new RequiredTextField<String>("name", Model.of("")));
add(vorname = new RequiredTextField<String>("vorname", Model.of("")));
add(strasse = new RequiredTextField<String>("strasse", Model.of("")));
add(ort = new RequiredTextField<String>("ort", Model.of("")));
...
I don't want the step to "be completed" until each field is filled out. To check the condition I'd have to add an AjaxListener to each component and check for it's state to setComplete(boolean);. Can I control this flow from outside the wizard form? For example with an implementation of ICondition or is there another way? Because basically I can't go to the next step, because all of my textfields are RequiredTextField and cannot be skipped.
Any suggestions are highly appreciated.
Update / Solution
Component buttonbar = getForm().get(Wizard.BUTTONS_ID);
buttonbar.setOutputMarkupId(true);
Just get(Wizard.BUTTONS_ID); won't work.
Thanks to Sven Meier for the hint!
You'll have to add an AjaxFormComponentUpdatingBehavior to all your form components.
Then override #onEvent() in your wizard:
public MyWizard(id, WizardModel model) {
super(id, model);
get(Wizard.BUTTONS_ID).setOutputMarkupId(true);
}
public void onEvent(IEvent<?> event) {
if (event.getPayload() instanceof AjaxRequestTarget) {
((AjaxRequestTarget)event.getPayload()).add(get(Wizard.BUTTONS_ID));
}
}
Let your step#isComplete() return true depending on its model values, this way the wizard buttons will always be up to date.
I'm using ember latest and jquery.ui's Draggable and Droppable. I am also using some mixins that a talented ember person created to make a Draggable and Droppable view in ember. Here's the fiddle:
http://jsfiddle.net/inconduit/6n49N/7/
I need to attach the view's content to the drag event so that I can access it in the drop event. With straight up jquery, I know you'd do $(..).draggable({ .. }).data("myData","some data here"); but I don't know how to reference the view's content in this ember implementation.
Here's a snippet from App.Draggable in the fiddle:
App.Draggable = JQ.Draggable.extend({
appendTo: 'body',
helper: function() {
$(this).data("myData","this is where actual data would go");
JQ.Draggable extends Ember.View. Inside the helper() function, 'this' refers to the actual DOM element, I don't know how to refer to the View's variables. I want to pass the view's content so that it can be retrieved here:
App.Droppable = JQ.Droppable.extend({
drop: function(event,ui) {
alert('Dropped! ' + $(ui.draggable).data("myData"));
The template for the draggable looks like this:
{{#view App.Draggable contentBinding="App.anObject"}}Drag me{{/view}}
and I would like to pass that content. Please have a look at the fiddle, the pertinent functions are defined at the bottom of the javascript.
answering my own question here.
i attached the data in the didInsertElement callback as follows:
App.DraggableDataView = App.Draggable.extend({
didInsertElement: function() {
this._super();
var element = this.get('element');
$(element).data('myData',this.get('content'));
},
});
I have the feature ID, I can grab the marker layer on GeoRSS loadend, but I'm still not sure how to cause the popup to appear programmatically.
I'll create the popup on demand if that's necessary, but it seems as though I should be able to get the id of the marker as drawn on the map and call some event on that. I've tried using jQuery and calling the $(marker-id).click() event on the map elements, but that doesn't seem to be working. What am I missing?
Since I was asked for code, and since I presumed it to be boilerplate, here's where I am so far:
map = new OpenLayers.Map('myMap');
map.addLayer(new OpenLayers.Layer.OSM());
map.addLayer(new OpenLayers.Layer.GeoRSS(name,url));
//I've done some stuff as well in re: projections and centering and
//setting extents, but those really don't pertain to this question.
Elsewhere I've done a bit of jQuery templating and built me a nice list of all the points that are being shown on the map. I know how to do a callback from the layer loadend and get the layer object, I know how to retrieve my layer out of the map manually, I know how to iter over the layers collection and find my layer. So I can grab any of those details about the popup, but I still don't know how to go about using the built-in methods of the DOM or of this API to make it as easy as element.click() which is what I would prefer to do.
You don't have to click the feature to open a popup.
First you need a reference to the feature from the feature id. I would do that in the loadend event of the GeoRSS layer, using the markers property on the layer.
Assuming you have a reference to your feature, I would write a method which handles the automatic popup:
var popups = {}; // to be able to handle them later
function addPopup(feature) {
var text = getHtmlContent(feature); // handle the content in a separate function.
var popupId = evt.xy.x + "," + evt.xy.y;
var popup = popups[popupId];
if (!popup || !popup.map) {
popup = new OpenLayers.Popup.Anchored(
popupId,
feature.lonlat,
null,
" ",
null,
true,
function(evt) {
delete popups[this.id];
this.hide();
OpenLayers.Event.stop(evt);
}
);
popup.autoSize = true;
popup.useInlineStyles = false;
popups[popupId] = popup;
feature.layer.map.addPopup(popup, true);
}
popup.setContentHTML(popup.contentHTML + text);
popup.show();
}
fwiw I finally came back to this and did something entirely different, but his answer was a good one.
//I have a list of boxes that contain the information on the map (think google maps)
$('.paginatedItem').live('mouseenter', onFeatureSelected).live('mouseleave',onFeatureUnselected);
function onFeatureSelected(event) {
// I stuff the lookup attribute (I'm lazy) into a global
// a global, because there can be only one
hoveredItem = $(this).attr('lookup');
/* Do something here to indicate the onhover */
// find the layer pagination id
var feature = findFeatureById(hoveredItem);
if (feature) {
// use the pagination id to find the event, and then trigger the click for that event to show the popup
// also, pass a null event, since we don't necessarily have one.
feature.marker.events.listeners.click[0].func.call(feature, event)
}
}
function onFeatureUnselected(event) {
/* Do something here to indicate the onhover */
// find the layer pagination id
var feature = findFeatureById(hoveredItem);
if (feature) {
// use the pagination id to find the event, and then trigger the click for that event to show the popup
// also, pass a null event, since we don't necessarily have one.
feature.marker.events.listeners.click[0].func.call(feature, event)
}
/* Do something here to stop the indication of the onhover */
hoveredItem = null;
}
function findFeatureById(featureId) {
for (var key in map.layers) {
var layer = map.layers[key];
if (layer.hasOwnProperty('features')) {
for (var key1 in layer.features) {
var feature = layer.features[key1];
if (feature.hasOwnProperty('id') && feature.id == featureId) {
return feature;
}
}
}
}
return null;
}
also note that I keep map as a global so I don't have to reacquire it everytime I want to use it