Here is an example. Please have a look.
View
@{
var X = Html.X();
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.Net.MVC v3 Example</title>
<script>
// Just creating a new node for testing
var create = function () {
var destinationNode = App.TreePanel1.store.getRootNode();
destinationNode.appendChild({
text: "New Node",
leaf: true
});
};
// Just removing some node for testing
var remove = function () {
var node = App.TreePanel1.store.getRootNode().childNodes[3];
node.remove();
};
var saveChangedData = function () {
var tree = App.TreePanel1,
treeStore = tree.getStore(),
removedRecords = treeStore.getRemovedRecords(),
updatedRecords = treeStore.getUpdatedRecords(),
newRecords = treeStore.getNewRecords(),
changedData = {};
if (newRecords.length > 0) {
changedData.Created = [];
Ext.Array.each(newRecords, function (node, index) {
changedData.Created.push(tree.convertToSubmitNode(node, { withChildren: true }));
});
}
if (removedRecords.length > 0) {
changedData.Deleted = [];
Ext.Array.each(removedRecords, function (node, index) {
changedData.Deleted.push(tree.convertToSubmitNode(node, { withChildren: true }));
});
}
if (updatedRecords.length > 0) {
changedData.Updated = [];
Ext.Array.each(updatedRecords, function (node, index) {
changedData.Updated.push(tree.convertToSubmitNode(node, { withChildren: true }));
});
}
if (!Ext.Object.isEmpty(changedData)) {
App.direct.SaveChangedData(changedData);
} else {
Ext.Msg.alert("Info", "No changed data for saving");
}
};
</script>
</head>
<body>
@X.ResourceManager()
@X.Button().Text("Create").Handler("create")
@X.Button().Text("Remove").Handler("remove")
@X.Button().Text("Save changed data").Handler("saveChangedData")
@(X.TreePanel()
.ID("TreePanel1")
.Title("Tree")
.Width(200)
.Store(
X.TreeStore()
.Proxy(
X.AjaxProxy().Url(Url.Action("GetChildren"))
)
)
.Root(
X.Node().NodeID("0").Text("Root").Expanded(true)
)
.Editor(X.TextField())
.Plugins(X.CellEditing()
.Listeners(events =>
events.Edit.Handler = "e.record.dirty = true;"
)
)
)
</body>
</html>
Controller
[DirectController]
public class RazorController : Controller
{
public ActionResult Index()
{
return View();
}
public StoreResult GetChildren(string node)
{
NodeCollection nodes = new Ext.Net.NodeCollection();
if (!string.IsNullOrEmpty(node))
{
for (int i = 1; i < 6; i++)
{
Node asyncNode = new Node();
asyncNode.Text = node + i;
asyncNode.NodeID = node + i;
nodes.Add(asyncNode);
}
for (int i = 6; i < 11; i++)
{
Node treeNode = new Node();
treeNode.Text = node + i;
treeNode.NodeID = node + i;
treeNode.Leaf = true;
nodes.Add(treeNode);
}
}
return this.Store(nodes);
}
[DirectMethod]
public ActionResult SaveChangedData(string changedDataJson)
{
TreeStoreChangedData changedData = JSON.Deserialize<TreeStoreChangedData>(changedDataJson);
string message = "";
if (changedData.Created != null)
{
message += "Created nodes count: " + changedData.Created.Count + "<br>";
}
else
{
message += "Created nodes count: 0<br>";
}
if (changedData.Deleted != null)
{
message += "Deleted nodes count: " + changedData.Deleted.Count + "<br>";
}
else
{
message += "Deleted nodes count: 0<br>";
}
if (changedData.Updated != null)
{
message += "Updated nodes count: " + changedData.Updated.Count + "<br>";
}
else
{
message += "Updated nodes count: 0<br>";
}
X.Msg.Alert("SaveChangedData", message).Show();
return this.Direct();
}
}
TreeStoreChangedData Class
public class TreeStoreChangedData
{
public List<SubmittedNode> Created { get; set; }
public List<SubmittedNode> Deleted { get; set; }
public List<SubmittedNode> Updated { get; set; }
}
The example is not full. You should handle a batch save request in a similar way that it is done for a regular Store. Please see the BatchController in this example.
http://mvc.ext.net/#/GridPanel_Update/Batch
