Apr 11, 2012, 6:58 PM
[CLOSED] How I save the records insert in GridPanel in Javascript (client side)?
Hi!
I'm following this example https://examples2.ext.net/#/GridPane...rking_Records/...
I wish save the records added in GridPanel... but, my Save method is in CodeBehind... and I wish this method continue in codebehind.
There are any property of gridPanel or Store that reflects this inserted records in cliente side in server side?
I'm following this example https://examples2.ext.net/#/GridPane...rking_Records/...
I wish save the records added in GridPanel... but, my Save method is in CodeBehind... and I wish this method continue in codebehind.
There are any property of gridPanel or Store that reflects this inserted records in cliente side in server side?
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.GridPanel1.Store.Primary.DataSource = new object[]
{
new object[] { "Sample 1" },
new object[] { "Sample 2" },
new object[] { "Sample 3" },
new object[] { "Sample 4" },
new object[] { "Sample 5" },
new object[] { "Sample 6" },
new object[] { "Sample 7" },
new object[] { "Sample 8" },
new object[] { "Sample 9" },
new object[] { "Sample 10" },
new object[] { "Sample 11" },
new object[] { "Sample 12" },
new object[] { "Sample 13" },
new object[] { "Sample 14" },
new object[] { "Sample 15" }
};
this.GridPanel1.Store.Primary.DataBind();
}
</script>
<html>
<head id="Head1" runat="server">
<title>Marking Changed GridPanel - Ext.NET Examples</title>
<style type="text/css">
.dirty-row .x-grid-cell, .dirty-row .x-grid-rowwrap-div {
background-color: #FFFDD8 !important;
}
.new-row .x-grid-cell, .new-row .x-grid-rowwrap-div {
background: #c8ffc8 !important;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<script type="text/javascript">
var getRowClass = function (record) {
if (record.phantom) {
return "new-row";
}
if (record.dirty) {
return "dirty-row";
}
}
var insertRecord = function () {
var grid = <%= GridPanel1.ClientID %>;
grid.store.insert(0, {});
grid.getView().focusRow(0);
grid.editingPlugin.startEdit(grid.store.getAt(0), grid.columns[0]);
}
</script>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>Marking Records</h1>
<p>Demonstrates how to mark rows with custom colors. Edit any cell or insert new record.</p>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Test Grid"
Width="600"
Height="350">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="TestCell">
<Fields>
<ext:ModelField Name="TestCell" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="TestCell" DataIndex="TestCell" Flex="1">
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" StripeRows="true">
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
</Plugins>
<Buttons>
<ext:Button ID="Button1" runat="server" Text="Insert record" Icon="Add">
<Listeners>
<Click Fn="insertRecord" />
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Daniil; Apr 11, 2012 at 8:36 PM.
Reason: [CLOSED]