- Welcome, Guest. Please Login or Register
MindFusion  
  We have released initial version of MindFusion.JavaScript pack. It includes chart, diagram, calendar, map, virtual keyboard, gauge and UI components. Here are more details and live demo for anyone interested.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Page Index Toggle Pages: 1 Send Topic Print  
ShapeListBox png & jpg
Read 749 times

08804139   Offline
YaBB Newbies
*
Posts: 22
I Love MindFusion!


   
     
 
ShapeListBox png & jpg
Nov 3rd, 2018 at 7:14pm
 
HI
I want to create a diagram (Web Forms asp + c#) with a list of images png or jpg, defined in the box ShapeListBox,
So I want to use a custom list of images.
I want to replace Solution 1 with Solution 2 as presented in the attachment.

Thanks
 
 

circuit33.png (22 KB | 64 )
circuit33.png
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1865
Gender: male
tech.support


   
     
 
Re: ShapeListBox png & jpg
Reply #1 - Nov 5th, 2018 at 9:54am
 
Hi,

ShapeListBox can only display Shape objects with their vector path definitions, so you could create these as custom Shapes using shape designer tool and load shape library file in the list box. Otherwise use NodeListView to show the bitmaps, where you add a ShapeNode with Image and Transparent properties set for each image.

Regards,
Slavcho
Mindfusion
 
 
 
IP Logged    
 
     

08804139   Offline
YaBB Newbies
*
Posts: 22
I Love MindFusion!


   
     
 
Re: ShapeListBox png & jpg
Reply #2 - Nov 6th, 2018 at 9:33pm
 
Thank you for giving me more details.
How do I use NodeListView in asp webforms
and how can I fill this list by shapenode Image.

Thanks. Huh
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1865
Gender: male
tech.support


   
     
 
Re: ShapeListBox png & jpg
Reply #3 - Nov 7th, 2018 at 12:06pm
 
This is shown in the Controls sample project -

Code:
<ndiag:NodeListView runat="server" ID="nodeList" ...
...
var node = new MindFusion.Diagramming.ShapeNode();
node.Text = shapes[i];
node.Shape = Shape.FromId(shapes[i]);
nodeList.AddNode(node, shapes[i]);
 



Add a node.Image or node.ImageUrl  assignment to show images.

Regards,
Slavcho
 
 
 
IP Logged    
 
     

08804139   Offline
YaBB Newbies
*
Posts: 22
I Love MindFusion!


   
     
 
Re: ShapeListBox png & jpg
Reply #4 - Dec 5th, 2018 at 9:03am
 
Hello,
I changed list shape by diagram view where I defined shpenode.
I want to fill an accordion component with shapenode.
I defined accordion :
<ui:Accordion ID="Accordion1" runat="server">
</ui:AccordionItem>
------
and I managed to define the accordion items
c# :
AccordionItem _accordionItem = new AccordionItem();
_accordionItem.ID = "AccordionItem" + Accordion1.Items.Count + 1;
_accordionItem.Title = _famille.Designation;
Accordion1.Items.Add(_accordionItem);
-----

how can i define components in accordion item with c # code ?
Thanks for your help
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 329
Gender: male
MindFusion team


   
     
 
Re: ShapeListBox png & jpg
Reply #5 - Dec 5th, 2018 at 10:27am
 
Hi,

One of the ways to do that is to create templates for the accordion items, that will contain the node lists with the selected shape nodes. For example: Code:
// The template class that adds the node lists to the items
public class AccordionItemTemplate : ITemplate
{
  // Initialize the item with the node list to display
  public AccordionItemTemplate(NodeListView nodeList)
  {
    this.nodeList = nodeList;
  }
  private NodeListView nodeList;

  // ITemplate.InstantiateIn implementation to add the node list to the item's controls collection
  public void InstantiateIn(System.Web.UI.Control container)
  {
    container.Controls.Add(this.nodeList);
  }
}

// ...

// Create the node list for the item
NodeListView nodeList1 = new NodeListView();
nodeList1.ID = "nodeList1";

// Add some nodes
var node = new MindFusion.Diagramming.ShapeNode();
node.Text = "Actor";
node.Shape = Shape.FromId("Actor");
nodeList1.AddNode(node, "Actor");

node = new MindFusion.Diagramming.ShapeNode();
node.Text = "Ellipse";
node.Shape = Shape.FromId("Ellipse");
nodeList1.AddNode(node, "Ellipse");

// Create an AccordionItem and assign it's template
var item1 = new AccordionItem();
item1.ID = "AccordionItem" + (Accordion1.Items.Count + 1).ToString();
item1.Title = "AccordionItem " + (Accordion1.Items.Count + 1).ToString();

item1.Template = new AccordionItemTemplate(nodeList1);

// Add the created item to the parent Accordion
Accordion1.Items.Add(item1);

// ... Create more items in a similar manner and add them to the parent accordion ...

// Finally, call the DataBind method on the Accordion
Accordion1.DataBind(); 



The result can be seen in the attached image.

Regards,
Lyubo
 
 

AccordionItems.PNG (10 KB | 57 )
AccordionItems.PNG
 
IP Logged    
 
     
Page Index Toggle Pages: 1 Send Topic Print