Add Records dynamically, Save problem

**zhangsir199** · Nov 26, 2010, 4:22 PM

Hi everyone,
My GridPanel load records dynamically at client side, when I save GridPanel, I can't get Created json at store's OnBeforeStoreChanged event.
code like this:

DataTable dt = new DataTable();
dt.Columns.Add("id");
dt.Columns.Add("name");
 
DataRow dr=dt.NewRow();
dr["id"]="no1";
dr["name"]="name1";
dt.Rows.Add(dr);
 
DataRow dr2=dt.NewRow();;
dr2["id"]="no2";
dr2["name"] = "name2";
dt.Rows.Add(dr2);
 
X.Js.AddScript("loadData('" + JSON.Serialize(dt) + "')");

client side:

// try 1:
function loadData(data) {
    GridPanel1.getStore().loadData(eval(data));
    GridPanel1.getStore().each(function (v) {
        v.newRecord = true;
    })
}
// try 2:
function loadData(data) {
    GridPanel1.getStore().insert(0, eval(data));                      
}

all these two ways load data normally, but can't save store date as created. if I didn't modify anything, store's OnBeforeStoreChanged couldn't fire at all. How could I get what I want to?
is only record added by "grid.getStore().addRecord(record)" method can be recognize as created data when saveing?

**Daniil** · Nov 29, 2010, 5:57 PM

Hi,

The Store's insert() methods expects an array of Ext.data.Record as the second parameters.
http://dev.sencha.com/deploy/dev/doc...Ext.data.Store

Please use the insertRecord() method.

Example

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void LoadData(object sender, DirectEventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("id");
        dt.Columns.Add("name");

        DataRow dr = dt.NewRow();
        dr["id"] = "no1";
        dr["name"] = "name1";
        dt.Rows.Add(dr);

        DataRow dr2 = dt.NewRow(); ;
        dr2["id"] = "no2";
        dr2["name"] = "name2";
        dt.Rows.Add(dr2);

        X.Js.AddScript("loadData('" + JSON.Serialize(dt) + "')");
    }
</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>Ext.Net Example</title>

    <script type="text/javascript">
        function loadData(data) {
            var values = eval(data);
            Ext.each(values, function(v) {
                GridPanel1.getStore().insertRecord(0, v, false, true);
            });
        }
    </script>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="id" />
                            <ext:RecordField Name="name" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="id" DataIndex="id" />
                <ext:Column Header="name" DataIndex="name" />
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    <ext:Button runat="server" Text="Load data" OnDirectClick="LoadData" />
    </form>
</body>
</html>

**zhangsir199** · Dec 31, 2010, 5:18 AM

Originally Posted by Daniil

Hi,

The Store's insert() methods expects an array of Ext.data.Record as the second parameters.
http://dev.sencha.com/deploy/dev/doc...Ext.data.Store

Please use the insertRecord() method.

Example

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void LoadData(object sender, DirectEventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("id");
        dt.Columns.Add("name");

        DataRow dr = dt.NewRow();
        dr["id"] = "no1";
        dr["name"] = "name1";
        dt.Rows.Add(dr);

        DataRow dr2 = dt.NewRow(); ;
        dr2["id"] = "no2";
        dr2["name"] = "name2";
        dt.Rows.Add(dr2);

        X.Js.AddScript("loadData('" + JSON.Serialize(dt) + "')");
    }
</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>Ext.Net Example</title>

    <script type="text/javascript">
        function loadData(data) {
            var values = eval(data);
            Ext.each(values, function(v) {
                GridPanel1.getStore().insertRecord(0, v, false, true);
            });
        }
    </script>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="id" />
                            <ext:RecordField Name="name" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="id" DataIndex="id" />
                <ext:Column Header="name" DataIndex="name" />
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    <ext:Button runat="server" Text="Load data" OnDirectClick="LoadData" />
    </form>
</body>
</html>

Thanks Daniil. Sorry to replyed so lately. At last, I submit all records in store to server side, and Judge which is added or updated by whether it has ID or not.(when adding, ID is generated at the time of saving to DB, and ID is already existing when updating)

By the way, I found some method like addRecord() etc at ext.net examples, and they didn't in extjs docs, how can I find a API to read them in detail?

**Daniil** · Jan 10, 2011, 10:10 AM

Originally Posted by zhangsir199

By the way, I found some method like addRecord() etc at ext.net examples, and they didn't in extjs docs, how can I find a API to read them in detail?

Yes, this method is added in Ext.Net and there is no documentation for this method in ExtJS docs.

Generally speaking, Ext.Net docs is under construction and not available at this moment.

So, I can suggest you to look at this method in the Ext.Net sources.

**farisqadadeh** · Mar 13, 2011, 6:43 PM

do EXT have a JSON parser method or object other than eval, since if we have a special characters iniside the JSON , just like single quote then the whole JSON will be undetermined.

**Daniil** · Mar 13, 2011, 9:19 PM

Hi,

Please use Ext.decode() method.
http://dev.sencha.com/deploy/dev/doc...&member=decode

**farisqadadeh** · Mar 14, 2011, 9:13 PM

what about if the Json rendered JSON string contains single quote , then the the JavaScript error will fired , how can we resolve this using JSON.Serialize , i mean in same case u provide , then the JS call will not be reached and a javascript error will be fired.

**Daniil** · Mar 14, 2011, 9:33 PM

Could you provide a sample demonstrating what you mean? Not sure that I understand.

**farisqadadeh** · Mar 14, 2011, 9:41 PM


Client Side:
        function loadData(data) {
            var values = eval(data);
            Ext.each(values, function (v) {
                GridPanel1.getStore().insertRecord(0, v, false, true);
            });

Server Side:

   X.Js.AddScript("loadData(" + JSON.Serialize(feeds).Replace("'","''") +");");

suppose the server side method JSON.Serialize(feeds).Replace("'","''") render following JSON:

var data ='[{ "Description": "", "icon": "http://b.static.ak.fbcdn.net/rsrc.php/v1/yz/r/StEh3RhPvjk.gif", "link": "http://www.facebook.com/photo.php?fbid=208875102462974&set=a.208850449132106.63456.201118776571940", "id": "201118776571940_208875119129639", "fromname": "QA Motors", "fromid": "201118776571940", "picture": "http://photos-c.ak.fbcdn.net/hphotos-ak-snc6/196188_208875102462974_201118776571940_942734_6971040_s.jpg", "name": "", "message": "asdasdasdasdasd", "Likes": "1", "caption": "", "Comments": "7", "type": "photo", "length": "" }, { "Description": "wrong one'wrongone'", "icon": "http://b.static.ak.fbcdn.net/rsrc.php/v1/yD/r/DggDhA4z4tO.gif", "link": "http://www.facebook.com/video/video.php?v=10150104536038779&oid=201118776571940&comments", "id": "201118776571940_10150104536038779", "fromname": "QA Motors", "fromid": "201118776571940", "picture": "http://vthumb.ak.fbcdn.net/hvthumb-ak-ash2/158306_10150104539933779_10150104536038779_59854_1142_t.jpg", "name": "Hi this is a video [HD]", "message": "hi all this is a sample Video", "Likes": "0", "caption": "", "Comments": "0", "type": "video", "length": "0:30" }, { "Description": "", "icon": "http://b.static.ak.fbcdn.net/rsrc.php/v1/yD/r/DggDhA4z4tO.gif", "link": "http://www.facebook.com/video/video.php?v=10150104508663779&oid=201118776571940&comments", "id": "201118776571940_10150104508663779", "fromname": "QA Motors", "fromid": "201118776571940", "picture": "http://vthumb.ak.fbcdn.net/hvthumb-ak-snc4/158965_10150104512083779_10150104508663779_16166_1177_t.jpg", "name": "Video [HD]", "message": "Video Decription", "Likes": "0", "caption": "", "Comments": "0", "type": "video", "length": "0:30" }, { "Description": "Welcome to Yahoo!, the worlds most visited home page. Quickly find what youre searching for, get in touch with friends and stay in-the-know with the latest news and information.", "icon": "http://b.static.ak.fbcdn.net/rsrc.php/v1/yD/r/aS8ecmYRys0.gif", "link": "http://www.yahoo.com/", "id": "201118776571940_109622215783479", "fromname": "QA Motors", "fromid": "201118776571940", "picture": "http://external.ak.fbcdn.net/safe_image.php?d=f5a2e5bc6d4727356dbf1b8760c59d79&w=90&h=90&url=http%3A%2F%2Fl1.yimg.com%2Fa%2Fi%2Fww%2Fnews%2F2011%2F03%2F11%2F031111tsunami5.jpg", "name": "Yahoo!", "message": "", "Likes": "0", "caption": "www.yahoo.com", "Comments": "0", "type": "link", "length": "" }, { "Description": "", "icon": "http://b.static.ak.fbcdn.net/rsrc.php/v1/yz/r/StEh3RhPvjk.gif", "link": "http://www.facebook.com/photo.php?fbid=208850452465439&set=a.208850449132106.63456.201118776571940", "id": "201118776571940_208850469132104", "fromname": "QA Motors", "fromid": "201118776571940", "picture": "http://photos-c.ak.fbcdn.net/hphotos-ak-snc6/200743_208850452465439_201118776571940_942596_1586352_s.jpg", "name": "", "message": "", "Likes": "0", "caption": "", "Comments": "0", "type": "photo", "length": "" }, { "Description": "asdasdasd", "icon": "", "link": "http://www.facebook.com/201118776571940/posts/208850272465457", "id": "201118776571940_208850272465457", "fromname": "QA Motors", "fromid": "201118776571940", "picture": "", "name": "", "message": "", "Likes": "0", "caption": "", "Comments": "0", "type": "status", "length": "" }, { "Description": "This is our test page", "icon": "", "link": "http://www.facebook.com/201118776571940/posts/125510034187551", "id": "201118776571940_125510034187551", "fromname": "QA Motors", "fromid": "201118776571940", "picture": "", "name": "", "message": "", "Likes": "1", "caption": "", "Comments": "0", "type": "status", "length": ""}]';

You will notice that this JSON is invalid and will cause Javascript error (see wrong one text), how can we handle this from the server side method it self to render the JSON always in correct way.

**Daniil** · Mar 14, 2011, 10:14 PM

I use the following sample and can't still reproduce the problem.

Could you apply the required changes to let me a possibility to reproduce the issue?

I should note also that there is a json object (not string) even if I don't use .eval() or Ext.decode().

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        var someObject = new object[] 
        {
            new 
            {
                Test1 = "test11",
                Test2 = "test12"
            },
            
            new 
            {
                Test1 = "test21",
                Test2 = "test22"
            }
        };

        string jsonString = JSON.Serialize(someObject);
        X.Js.AddScript("getJsonObject(" + jsonString + ");");
    }
</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>Ext.Net Example</title>

    <script type="text/javascript">
        var getJsonObject = function (json) {
            alert(Ext.isArray(json) + ": " + json);
        }
    </script>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    </form>
</body>
</html>

Thread: Add Records dynamically, Save problem

Thread Tools

Search Thread

Display

Add records dynamically, problem about Save store

Converting JSON string to JSON object

ok daniel.

ok see following sample.

Similar Threads

[CLOSED] Enter Grid COlumn and save the records

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

[CLOSED] Posting Store Records - new records also picked up in modified collection

[CLOSED] How to add the records to grid panel dynamically?

Problem after update records

Posting Permissions

Sitemap

Downloads

Resources