How to get selected node in diagram programmatically

[sattar shaikh]

Hi,
I want to set custom properties of selected node in diagram programmatically.


Thanks and Regards,

Sattar Shaikh

[Rajagopal]

Hi Sattar,

To add a custom property to a node please use the below code snippet.

public class MySymbol : Group
{
private int clickCount;

public int ClickCount
{
get { return clickCount; }
}

protected override void OnMouseClick()
{
clickCount = clickCount + 1;
}

public class MySymbolConverter : TypeConverter
{
public override PropertyDescriptorCollection GetProperties(ITypeDescriptorContext context, object value, Attribute[] attributes)
{
PropertyDescriptor[] props = new PropertyDescriptor[3];
props[1] = TypeDescriptor.CreateProperty(typeof(MySymbol), "ClickCount", typeof(int), attrs);
}
}

Also refer this shipped sample in the browser samples
\\Syncfusion\EssentialStudio\5.1.0.51\Windows\Diagram.Windows\Samples\2.0\Symbol Design\CustomSymbol\

In the above sample we have add the ClickCount property to the custom node.

Regards,
Rajagopal

[sattar shaikh]

>Hi Sattar,

To add a custom property to a node please use the below code snippet.

public class MySymbol : Group
{
private int clickCount;

public int ClickCount
{
get { return clickCount; }
}

protected override void OnMouseClick()
{
clickCount = clickCount + 1;
}

public class MySymbolConverter : TypeConverter
{
public override PropertyDescriptorCollection GetProperties(ITypeDescriptorContext context, object value, Attribute[] attributes)
{
PropertyDescriptor[] props = new PropertyDescriptor[3];
props[1] = TypeDescriptor.CreateProperty(typeof(MySymbol), "ClickCount", typeof(int), attrs);
}
}

Also refer this shipped sample in the browser samples
\\Syncfusion\EssentialStudio\5.1.0.51\Windows\Diagram.Windows\Samples\2.0\Symbol Design\CustomSymbol\

In the above sample we have add the ClickCount property to the custom node.

Regards,
Rajagopal




Thanks Rajgopal,

I am currently evaluating the Essential Diagram.
1)I am using this in my project for draw the flow charts.
2)In flow chart user can able to get child flow chart when he click on the particular process. so i can able to set the hyperlink to the particular process(Symbol) and save it.
3)Also i want to save the all flow chart's node in database with labels.
(please see the images in attachment)
supposse i want to save in database
a)Process name: - Primayr Creation
b)soncer(top label): - DD
c)Leader(bottom label):-AP
d)Is this process has any Hyperlink then HREF will also save in database.



so on there query please reply me.
Mainly how to save the diagram with nodes in the database.

Also is there any simple way to give the labels to the process(ellipse,rectangle) when drawing the nodes in diagram, as we can able to give label to textnode by double clicking on it.



Thanks

Sattar Shaikh




HowTosave.zip

[Administrator]

Hi Sattar,

Thanks for the update.

You can save the diagram into database with node details such its name, label text and its hyperlink. For this, you need to iterate the nodes collection and create a table with required fields and finally update the fields with node's name, label's text and its hyperlink.

The following code snippet Illustrates this.

[C#]

if (this.DiagramWebControl1.Model.Nodes.Count > 0)
{
NodeCollection nodes = this.DiagramWebControl1.Model.Nodes;
foreach (Node node in nodes)
{
if (node is EmployeeSymbol)
{
EmployeeSymbol sym = node as EmployeeSymbol;

if (sym.Labels.Count > 0)
{

string datasrcpath = Server.MapPath(String.Empty);
datasrcpath = datasrcpath + @"\App_Data\employees.mdb";

string connectionstring1 = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + datasrcpath + ";";
OleDbConnection orgdbconnection1 = new OleDbConnection(connectionstring1);

orgdbconnection1.Open();

string orgdbinsertquery = "Insert into tbDiagram "+"(NodeName,NodeLable,NodeLink) values(@name,@label,@link)";

OleDbCommand orgdbinsertcommand = new OleDbCommand(orgdbinsertquery, orgdbconnection1);

orgdbinsertcommand .Parameters.Add("@name",OleDbType.VarChar).Value = sym.FullName;
orgdbinsertcommand.Parameters.Add("@label", OleDbType.VarChar).Value = sym.Labels[0].Text;
orgdbinsertcommand.Parameters.Add("@link", OleDbType.VarChar).Value = sym.HREF.ToString();
orgdbinsertcommand.ExecuteNonQuery();

orgdbconnection1.Close();


}
}
}
}

Sample reference

Here is a sample for your reference.

http://websamples.syncfusion.com/samples/Diagram.Web/6.1.0.34/F70134/Diagram_Web/main.htm

In the sample provided, click the button 'Save into Database' to save the nodes details into the employees.mdb.

Please let me know if you have any further questions.

Regards,
Jaya

[sattar shaikh]

Thanks Jaya,
I am getting good result what we expect from using Essential Diagram Controls.
thanks to reply me.

You did not explain about my one issue..
1)Is there any way by Double Clicking, give the label to the controls like Ellispe,Rectangle.Just like we can able to give/write label to the TextNode by Double Clicking on it.
2)
Please see attachment...
we want to add our custom symbols in palatte.How to add custom symbols(Ellipse,Rectangle,Triangle) without predifined symbols.
As in pics..
Below to outer labeled Document Symbol in Palatte,without labeled symbols are added by custom code.so I want to keep those only my customised symbols.
3)
Please see attached pics..
How to give the outer label to the customised symbols which is added in palatte.
please reply me.

Thanks and Regards,

Sattar Shaikh

>Hi Sattar,

Thanks for the update.

You can save the diagram into database with node details such its name, label text and its hyperlink. For this, you need to iterate the nodes collection and create a table with required fields and finally update the fields with node's name, label's text and its hyperlink.

The following code snippet Illustrates this.

[C#]

if (this.DiagramWebControl1.Model.Nodes.Count > 0)
{
NodeCollection nodes = this.DiagramWebControl1.Model.Nodes;
foreach (Node node in nodes)
{
if (node is EmployeeSymbol)
{
EmployeeSymbol sym = node as EmployeeSymbol;

if (sym.Labels.Count > 0)
{

string datasrcpath = Server.MapPath(String.Empty);
datasrcpath = datasrcpath + @"\App_Data\employees.mdb";

string connectionstring1 = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + datasrcpath + ";";
OleDbConnection orgdbconnection1 = new OleDbConnection(connectionstring1);

orgdbconnection1.Open();

string orgdbinsertquery = "Insert into tbDiagram "+"(NodeName,NodeLable,NodeLink) values(@name,@label,@link)";

OleDbCommand orgdbinsertcommand = new OleDbCommand(orgdbinsertquery, orgdbconnection1);

orgdbinsertcommand .Parameters.Add("@name",OleDbType.VarChar).Value = sym.FullName;
orgdbinsertcommand.Parameters.Add("@label", OleDbType.VarChar).Value = sym.Labels[0].Text;
orgdbinsertcommand.Parameters.Add("@link", OleDbType.VarChar).Value = sym.HREF.ToString();
orgdbinsertcommand.ExecuteNonQuery();

orgdbconnection1.Close();


}
}
}
}

Sample reference

Here is a sample for your reference.

http://websamples.syncfusion.com/samples/Diagram.Web/6.1.0.34/F70134/Diagram_Web/main.htm

In the sample provided, click the button 'Save into Database' to save the nodes details into the employees.mdb.

Please let me know if you have any further questions.

Regards,
Jaya





HowtoAddOnlycustomcontrols.zip

[Administrator]

Hi Sattar,

Thanks for the update.

1) Is there any way by Double Clicking, give the label to the controls like Ellispe,Rectangle.Just like we can able to give/write label to the TextNode by Double Clicking on it.

In diagram web, there is no direct way of editing the label inside the symbol at run time. But as a workaround, you can edit the label by assigning text in the TextBox to the label of selected symbol in CallbackRefresh event handler of diagram.

Sample reference

Please refer the sample that demonstrates the same. In the below sample, selecting a shape will show you the popup where you can type the text that will be assigned as a new label to the selected shape.

http://websamples.syncfusion.com/samples/Diagram.Web/6.1.0.34/F70134/AddLabel/main.htm

2) we want to add our custom symbols in palatte.How to add custom symbols(Ellipse,Rectangle,Triangle) without predifined symbols.

3) How to give the outer label to the customised symbols which is added in palatte.

Custom Symbols can be easily created using the Symbol Designer Utility available in Dashboard(All Programs->Syncfusion->Essential Studio Version x.x.x.xx->Window Forms->Utilities->Diagram->Symbol designer). Such symbols can then be added to the Symbol Palette in a Diagram Builder Application or simply be reused in diagrams you might create programmatically. The outer label can be added using Name property of a symbol in the Symbol Designer Utility.

Please refer the below Online documentation link for creating custom symbols using Symbol Designer Utility.

http://www2.syncfusion.com/ug_61/diagram/SymbolDesigner.html

Please let me know if you have any further questions.

Regards,
Jaya