PDA

View Full Version : [CLOSED] How I save the records insert in GridPanel in Javascript (client side)?



supera
Apr 11, 2012, 7:58 PM
Hi!

I'm following this example http://examples2.ext.net/#/GridPanel/Miscellaneous/Marking_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>

Daniil
Apr 11, 2012, 9:03 PM
Hi,


my Save method is in CodeBehind
Well, I can't see that method in your example.

Here is some example how to save new records.
http://examples2.ext.net/#/GridPanel/Update/Batch/

Try to create some record and click the Sync button.

supera
Apr 11, 2012, 9:33 PM
Hi Daniil!

I think that this example that you suggested is exactly what I need!

Thanks a lot! (if you want you can close this thread).