[CLOSED] Load modified Store into a Datatable on click of a Button

[dheeraj_us]

Hi,

I am trying to use the RowEditor in the Gridview and I have a Button outside the gridView. After updating/inserting/deleting records from the Gridview, I want to be able to click a Button (Outside the grid) and load the modified Store into a Datatable (server side) for further processing.

Looked at all the places but not getting any clue on how to achieve the above.

Has anyone had this situation before? Please help.

- Raj

[dheeraj_us]

Anybody out there to help?

[Vladimir]

Hi,

GridPanel can save changes to the server side. You have to call 'save' javascript method and handle request on the server side. On the server side you can retrieve changed data as json, xml or any server side object (json object must be match server side object)


Please see
https://examples1.ext.net/#/GridPane...reCustomLogic/

[dheeraj_us]

Thanks for ur response but still there are some doubts I have:

Let me explain a little more abt my case: I have a page which has a Gridpanel, several other controls on it and a "Save Data" button outside the grid. On click of this button I am trying to capture the data from all the respective controls and the grid.

I have a DirectEvent linked with the button as mentioned in the code below.

I am able to get data from individual controls into individual variables on server side but I am not able to get the modified Store on the server side into a datatable. (this grid is using a RowEditor plugin)

I tried this:

protected void SaveAsNewClicked(object sender, DirectEventArgs e)
{
  DataTable _dtDg = new DataTable();
  _dtDg = (DataTable)MyGridStore.DataSource;
}

1: On what event should I call the javascript 'save' method? Can u give me an example?
2: There is no Grid event being fired on click of the "SaveAsNewClicked" button, then how do I get the modified Store into a datatable?

Please help.

[Vladimir]

Hi,

On click of this button I am trying to capture the data from all the respective controls and the grid

Please provide the source code of that click event. What exactly are you trying to capture? Controls submit mostly required information.

On what event should I call the javascript 'save' method? Can u give me an example?

You have to call save method on the client side because it is javascript method

<Click Handler="#{GridPanel1}.save();"/>

There is no Grid event being fired on click of the "SaveAsNewClicked" button, then how do I get the modified Store into a datatable?

'save' method automatically create request to the server side and submit changes. Just see the example which I mentioned in previous post


If you post your test sample which demonstrating your scenario (the sample must be executable on our side) then I can modify it to show the saving

[dheeraj_us]

Ok let's see if this can help me out, if not then I'll post the Test code too:
After looking at the example you referred to I have tried the following but with no luck:

protected void Store1_BeforeChange(object sender, BeforeStoreChangedEventArgs e)
{
  string _sJson = e.DataHandler.JsonData;
  
  StoreDataHandler _dataHandler = new StoreDataHandler(_sJson);
  ChangeRecords<DataTable> _dataTable = _dataHandler.ObjectData<DataTable>();
}

The bove code throws error: "Unexpected end when deserializing array"

If somehow I can get the _sJson string to a Datatable then it might solve my issue.

Thanka - Raj

[Vladimir]

Hi,

Once again, please see the example which I mentioned before. In the Store_BeforeChange handler you can get json as

e.DataHandler.JsonData

it is demonstrated in that example

[dheeraj_us]

Vladimir,

Thanks for ur time. I have already taken care of getting the json string, but now I am trying to Deserialize it to a Datatable in the above code. The error displayed occurs at the line:

ChangeRecords<DataTable> _dataTable = _dataHandler.ObjectData<DataTable>();

- Raj

[Vladimir]

Hi,

As I mentioned before, json object must be match server side object. DataTable has another structure therefore automatic conversation json to the datatable is impossible. You have to do it manually. Please see the following sample

<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = this.Data;
            this.Store1.DataBind();
        }
    }

    private DataTable CreateDataTable(DataSet ds, string tableName, List<Dictionary<string, string>> data)
    {
        DataTable dataTable = ds.Tables.Add(tableName);
        if (data.Count > 0)
        {
            foreach (string key in data[0].Keys)
            {
                dataTable.Columns.Add(key);
            }

            foreach (Dictionary<string, string> row in data)
            {
                DataRow dtRow = dataTable.NewRow();
                foreach (string key in row.Keys)
                {
                    dtRow[key] = row[key];
                }
                dataTable.Rows.Add(dtRow);
            }
        }

        return dataTable;
    }

    protected void Store1_BeforeChanged(object sender, BeforeStoreChangedEventArgs e)
    {
        ChangeRecords<Dictionary<string, string>> data = e.DataHandler.ObjectData<Dictionary<string, string>>();

        DataSet ds = new DataSet();
        this.CreateDataTable(ds, "created", data.Created);
        this.CreateDataTable(ds, "deleted", data.Deleted);
        this.CreateDataTable(ds, "updated", data.Updated);        

        e.Cancel = true;
    }

    private object[] Data
    {
        get
        {
            return new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                new object[] { "AT&amp;T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                new object[] { "Johnson &amp; Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                new object[] { "JP Morgan &amp; Chase &amp; Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                new object[] { "Merck &amp; Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                new object[] { "The Procter &amp; Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
            };
        }
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Simple Array Grid - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    

    <ext:ResourcePlaceHolder runat="server" />

    <script type="text/javascript">
        var template = '{1}';

        var change = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value + "%");
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />
    
    <h1>Simple Array Grid</h1>
    
    <ext:GridPanel 
        ID="GridPanel1"
        runat="server" 
        StripeRows="true"
        Title="Array Grid" 
        TrackMouseOver="true"
        Width="600" 
        Height="350">
        <Store>
            <ext:Store ID="Store1" runat="server" OnBeforeStoreChanged="Store1_BeforeChanged">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="company" />
                            <ext:RecordField Name="price" Type="Float" />
                            <ext:RecordField Name="change" Type="Float" />
                            <ext:RecordField Name="pctChange" Type="Float" />
                            <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column ColumnID="Company" Header="Company" DataIndex="company">
                    <Editor>
                        <ext:TextField runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Price" DataIndex="price">                  
                    <Renderer Format="UsMoney" />
                    <Editor>
                        <ext:NumberField runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column ColumnID="Change" Header="Change" DataIndex="change">
                    <Renderer Fn="change" />
                    <Editor>
                        <ext:NumberField runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Change" DataIndex="pctChange">
                    <Renderer Fn="pctChange" />
                    <Editor>
                        <ext:NumberField runat="server" />
                    </Editor>
                </ext:Column>
                <ext:DateColumn Header="Last Updated" DataIndex="lastChange">
                    <Editor>
                        <ext:DateField runat="server" />
                    </Editor>
                </ext:DateColumn>
            </Columns>
        </ColumnModel>
        
        <Buttons>
            <ext:Button runat="server" Text="Save">
                <Listeners>
                    <Click Handler="#{GridPanel1}.save();" />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:GridPanel>          
</body>
</html>

[dheeraj_us]

Thanks Vladimir for your patience and help both :-)

This is my first time with coolite controls hence learning the basics first.

Thanks again - Raj