Skip to content

Commit 82d7df6

Browse files
BalaVigneshRaviChandranBalaVigneshRaviChandran
committed
892709: CRUD support in diagram control
1 parent cb965e6 commit 82d7df6

File tree

1 file changed

+264
-1
lines changed

1 file changed

+264
-1
lines changed

‎blazor/diagram/data-binding.md‎

Lines changed: 264 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1357,7 +1357,6 @@ GraphQL is a query language for APIs with which you can get exactly what you nee
13571357
@using Syncfusion.Blazor.Diagram
13581358
@using Syncfusion.Blazor.Data
13591359
@using System.Collections.ObjectModel
1360-
@using Syncfusion.Blazor.Grids
13611360
@using Syncfusion.Blazor
13621361

13631362
<div class="content-wrapper" style="width:100%">
@@ -1447,6 +1446,270 @@ GraphQL is a query language for APIs with which you can get exactly what you nee
14471446

14481447
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/GraphQLAdaptor)
14491448
1449+
### Performing CRUD operation using mutation
1450+
1451+
You can perform the CRUD operations by setting the mutation queries in the [Mutation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Mutation) property of [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html).
1452+
1453+
The following sample code demonstrates performing CRUD operation. You have to set the Insert mutation query in [Insert](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Insert) property of Mutation in `GraphQLAdaptorOptions`. Similarly, you have to set the Update and Delete mutation queries in [Update](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Update) and [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Delete) properties of Mutation in `GraphQLAdaptorOptions` respectively.
1454+
1455+
1456+
The following variables are passed as a parameter to the mutation method written for **Insert** operation in server side.
1457+
1458+
| Properties | Description |
1459+
|--------|----------------|
1460+
| record | The new record which is need to be inserted. |
1461+
| index | Specifies the index at which the newly added record will be inserted. |
1462+
| action | Indicates the type of operation being performed. When the same method is used for all CRUD actions, this argument serves to distinguish the action, such as **Add, Delete and Update** |
1463+
| additionalParameters | An optional parameter that can be used to perform any operations. |
1464+
1465+
The following variables are passed as a parameter to the mutation method written for **Update** operation in server side.
1466+
1467+
| Properties | Description |
1468+
|--------|----------------|
1469+
| record | The new record which is need to be updated. |
1470+
| action | Indicates the type of operation being performed. When the same method is used for all CRUD actions, this argument serves to distinguish the action, such as **Add, Delete and Update** |
1471+
| primaryColumnName | Specifies the field name of the primary column. |
1472+
| primaryColumnValue | Specifies the primary column value which is needs to be updated in the collection. |
1473+
| additionalParameters | An optional parameter that can be used to perform any operations. |
1474+
1475+
The following variables are passed as a parameter to the mutation method written for **Delete** operation in server side.
1476+
1477+
| Properties | Description |
1478+
|--------|----------------|
1479+
| primaryColumnValue | Specifies the primary column value which is needs to be removed from the collection. |
1480+
| action | Indicates the type of operation being performed. When the same method is used for all CRUD actions, this argument serves to distinguish the action, such as **Add, Delete and Update** |
1481+
| primaryColumnName | specifies the field name of the primary column. |
1482+
| additionalParameters | An optional parameter that can be used to perform any operations. |
1483+
1484+
```cshtml
1485+
@using Syncfusion.Blazor.Diagram
1486+
@using Syncfusion.Blazor.Data
1487+
@using System.Collections.ObjectModel
1488+
@using Syncfusion.Blazor
1489+
1490+
<div class="row">
1491+
<div class="col-md-12">
1492+
<div class="row">
1493+
<div class="col-md-3">
1494+
<button class="btn btn-primary" @onclick="Read">Read</button>
1495+
</div>
1496+
<div class="col-md-3">
1497+
<button class="btn btn-primary" @onclick="Update">Update</button>
1498+
</div>
1499+
<div class="col-md-3">
1500+
<button class="btn btn-primary" @onclick="Insert">Insert</button>
1501+
</div>
1502+
<div class="col-md-3">
1503+
<button class="btn btn-primary" @onclick="Delete">Delete</button>
1504+
</div>
1505+
</div>
1506+
</div>
1507+
</div>
1508+
<div class="content-wrapper" style="width:100%">
1509+
<div>
1510+
<SfDiagramComponent @ref="@diagram" Height="400px"
1511+
NodeCreating="OnNodeCreating" ConnectorCreating="OnConnectorCreating">
1512+
<DataSourceSettings Id="OrderID" ParentId="CustomerID">
1513+
<SfDataManager Url="https://localhost:7131/graphql" GraphQLAdaptorOptions=@adaptorOptions Adaptor="Adaptors.GraphQLAdaptor"></SfDataManager>
1514+
</DataSourceSettings>
1515+
<Layout HorizontalSpacing="40" VerticalSpacing="40" Type="LayoutType.HierarchicalTree"></Layout>
1516+
</SfDiagramComponent>
1517+
</div>
1518+
</div>
1519+
@code{
1520+
public SfDiagramComponent diagram;
1521+
private float x = 100;
1522+
private float y = 100;
1523+
private GraphQLAdaptorOptions adaptorOptions { get; set; } = new GraphQLAdaptorOptions
1524+
{
1525+
Query = @"
1526+
query ordersData($dataManager: DataManagerRequestInput!){
1527+
ordersData(dataManager: $dataManager) {
1528+
count, result { OrderID, CustomerID, EmployeeID, } , aggregates
1529+
}
1530+
}",
1531+
Mutation = new GraphQLMutation
1532+
{
1533+
Insert = @"
1534+
mutation create($record: OrderInput!, $index: Int!, $action: String!, $additionalParameters: Any) {
1535+
createOrder(order: $record, index: $index, action: $action, additionalParameters: $additionalParameters) {
1536+
OrderID, CustomerID, EmployeeID
1537+
}
1538+
}",
1539+
Update = @"
1540+
mutation update($record: OrderInput!, $action: String!, $primaryColumnName: String! , $primaryColumnValue: Int!, $additionalParameters: Any) {
1541+
updateOrder(order: $record, action: $action, primaryColumnName: $primaryColumnName, primaryColumnValue: $primaryColumnValue, additionalParameters: $additionalParameters) {
1542+
OrderID, CustomerID, EmployeeID
1543+
}
1544+
}",
1545+
Delete = @"
1546+
mutation delete($primaryColumnValue: Int!, $action: String!, $primaryColumnName: String!, $additionalParameters: Any) {
1547+
deleteOrder(primaryColumnValue: $primaryColumnValue, action: $action, primaryColumnName: $primaryColumnName, additionalParameters: $additionalParameters) {
1548+
OrderID, CustomerID, EmployeeID
1549+
}
1550+
}"
1551+
},
1552+
ResolverName = "OrdersData"
1553+
};
1554+
1555+
public class Order
1556+
{
1557+
public int? OrderID { get; set; }
1558+
public string CustomerID { get; set; }
1559+
public string EmployeeID { get; set; }
1560+
1561+
}
1562+
private void OnNodeCreating(IDiagramObject obj)
1563+
{
1564+
Node node = obj as Node;
1565+
1566+
node.Width = 80;
1567+
node.Height = 45;
1568+
node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle };
1569+
node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "#2084c4" };
1570+
Dictionary<string, object> data = node.Data as Dictionary<string, object>;
1571+
string content = "";
1572+
if (data != null)
1573+
{
1574+
foreach (var kvp in data)
1575+
{
1576+
if (kvp.Key == "EmployeeID")
1577+
{
1578+
content = kvp.Value.ToString();
1579+
}
1580+
}
1581+
}
1582+
node.Annotations = new DiagramObjectCollection<ShapeAnnotation>()
1583+
{
1584+
// Annotation is created and stored in Annotations collection of Node.
1585+
new ShapeAnnotation
1586+
{
1587+
Content = content,
1588+
Style = new TextStyle()
1589+
{
1590+
Color = "White",
1591+
Bold = true,
1592+
FontSize = 12,
1593+
FontFamily = "TimesNewRoman"
1594+
}
1595+
}
1596+
};
1597+
1598+
}
1599+
@*End:Hidden*@
1600+
private void OnConnectorCreating(IDiagramObject obj)
1601+
{
1602+
Connector connector = obj as Connector;
1603+
connector.Style.StrokeColor = "#048785";
1604+
connector.Type = ConnectorSegmentType.Orthogonal;
1605+
connector.TargetDecorator.Shape = DecoratorShape.None;
1606+
connector.SourceDecorator.Shape = DecoratorShape.None;
1607+
connector.Style = new ShapeStyle() { StrokeColor = "#3A4857", Fill = "#3A4857" };
1608+
}
1609+
1610+
//CRUD operations
1611+
//To fetch data from the remote service
1612+
public async void Read()
1613+
{
1614+
var data = await diagram.ReadDataAsync();
1615+
}
1616+
//To update data in the remote service
1617+
public async void Update()
1618+
{
1619+
Order employeeDetails = new Order() { OrderID = 9, EmployeeID = "Craft updated", CustomerID = "5" };
1620+
1621+
await diagram.UpdateDataAsync("OrderID", employeeDetails);
1622+
}
1623+
//To push data to the remote service
1624+
public async void Insert()
1625+
{
1626+
Order employeeDetails = new Order() { OrderID = 10, EmployeeID = "Craft new ", CustomerID = "5" };
1627+
await diagram.InsertDataAsync(employeeDetails);
1628+
}
1629+
//To delete data in the remote service
1630+
public async void Delete()
1631+
{
1632+
await diagram.DeleteDataAsync("OrderID", 5);
1633+
}
1634+
}
1635+
```
1636+
1637+
The following code demonstrates the mutation methods used in the GraphQL server for Normal editing.
1638+
1639+
```cshtml
1640+
using ASPNetCoreGraphQlServer.Models;
1641+
1642+
namespace ASPNetCoreGraphQlServer.GraphQl
1643+
{
1644+
public class GraphQLMutation
1645+
{
1646+
public Order CreateOrder(Order order, int index, string action,
1647+
[GraphQLType(typeof(AnyType))] IDictionary<string, object> additionalParameters)
1648+
{
1649+
GraphQLQuery.Orders.Insert(index, order);
1650+
return order;
1651+
}
1652+
public Order UpdateOrder(Order order, string action, string primaryColumnName, int primaryColumnValue,
1653+
[GraphQLType(typeof(AnyType))] IDictionary<string, object> additionalParameters)
1654+
{
1655+
Order updatedOrder = GraphQLQuery.Orders.Where(x => x.OrderID == primaryColumnValue).FirstOrDefault();
1656+
updatedOrder.OrderID = order.OrderID;
1657+
updatedOrder.EmployeeID = order.EmployeeID;
1658+
updatedOrder.CustomerID = order.CustomerID;
1659+
updatedOrder.Freight = order.Freight;
1660+
updatedOrder.OrderDate = order.OrderDate;
1661+
return updatedOrder;
1662+
}
1663+
public Order DeleteOrder(int primaryColumnValue, string action, string primaryColumnName,
1664+
[GraphQLType(typeof(AnyType))] IDictionary<string, object> additionalParameters)
1665+
{
1666+
Order deletedOrder = GraphQLQuery.Orders.Where(x => x.OrderID == primaryColumnValue).FirstOrDefault();
1667+
GraphQLQuery.Orders.Remove(deletedOrder);
1668+
return deletedOrder;
1669+
}
1670+
public List<Order> BatchUpdate(List<Order>? changed, List<Order>? added,
1671+
List<Order>? deleted, string action, String primaryColumnName,
1672+
[GraphQLType(typeof(AnyType))] IDictionary<string, object> additionalParameters, int? dropIndex)
1673+
{
1674+
if (changed != null && changed.Count > 0)
1675+
{
1676+
foreach (var changedOrder in (IEnumerable<Order>)changed)
1677+
{
1678+
Order order = GraphQLQuery.Orders.Where(e => e.OrderID == changedOrder.OrderID).FirstOrDefault();
1679+
order.OrderID = changedOrder.OrderID;
1680+
order.CustomerID = changedOrder.CustomerID;
1681+
order.OrderDate = changedOrder.OrderDate;
1682+
order.Freight = changedOrder.Freight;
1683+
}
1684+
}
1685+
if (added != null && added.Count > 0)
1686+
{
1687+
if (dropIndex != null)
1688+
{
1689+
GraphQLQuery.Orders.InsertRange((int)dropIndex, added);
1690+
}
1691+
else {
1692+
foreach (var newOrder in (IEnumerable<Order>)added)
1693+
{
1694+
GraphQLQuery.Orders.Add(newOrder);
1695+
}
1696+
}
1697+
}
1698+
if (deleted != null && deleted.Count > 0)
1699+
{
1700+
foreach (var deletedOrder in (IEnumerable<Order>)deleted)
1701+
{
1702+
GraphQLQuery.Orders.Remove(GraphQLQuery.Orders.Where(e => e.OrderID == deletedOrder.OrderID).FirstOrDefault());
1703+
}
1704+
}
1705+
return GraphQLQuery.Orders;
1706+
}
1707+
1708+
}
1709+
}
1710+
1711+
```
1712+
14501713
## Entity Framework
14511714

14521715
You need to follow the below steps to consume data from the **Entity Framework** in the diagram component.

0 commit comments

Comments
 (0)