Adding row to grid

Z · Feb 03, 2012, 3:24 AM

Please see the code below on EXT.net 1.2. We have a listener that generates a new row when a button is pressed. However, we see an error message "Microsoft JScript runtime error: 'data' is null or not an object". the error occurs in the ext code when the store.add is pressed. store.insert works fine.

The error is since records is a list of two and the first is undefined. so data cannot be called. The defect is that it should be an array of one, not two.

    doRender : function(columns, records, store, startRow, colCount, stripe) {
        var templates = this.templates,
            cellTemplate = templates.cell,
            rowTemplate = templates.row,
            last = colCount - 1,
            tstyle = 'width:' + this.getTotalWidth() + ';',
            
            rowBuffer = [],
            colBuffer = [],
            rowParams = {tstyle: tstyle},
            meta = {},
            len  = records.length,
            alt,
            column,
            record, i, j, rowIndex;
        
        for (j = 0; j < len; j++) {
            record    = records[j];
            colBuffer = [];
            rowIndex = j + startRow;
            
            for (i = 0; i < colCount; i++) {
                column = columns[i];
                
                meta.id    = column.id;
                meta.css   = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
                meta.attr  = meta.cellAttr = '';
                meta.style = column.style;
 ERROR LINE               meta.value = column.renderer.call(column.scope, record.data[column.name], meta, record, rowIndex, i, store);
                if (Ext.isEmpty(meta.value)) {
                    meta.value = '*';
                }


<Columns>

<ext:Column Header="Id" ColumnID="id" DataIndex="id" Width="35" Hidden="true"/>
<ext:CommandColumn Width="24">
<Commands>
<ext:GridCommand CommandName="AddRow" Icon="Add">
<ToolTip Text="Add New Row" />
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
<Listeners>
  <Command Handler="generateNewRow(command, record.data, GridPanelTimecard, record);" />
</Listeners>

Z · Feb 03, 2012, 3:27 AM

Reposting the JS since it was mangled with the fonts.

    <script>
        var generateNewRow = function (command, rowData, grid, record) {
            debugger;
            var rowIndex = index = grid.store.indexOf(record);
            var newRecord = new grid.store.recordType({ dateVal: rowData.dateVal});
            if (rowIndex == grid.store.getCount() - 1) {
                grid.store.add([newRecord]);
            } else {
                grid.store.insert(rowIndex + 1, newRecord);
            }
        }
    </script>

**Daniil** · Feb 03, 2012, 8:49 AM

Hi,

Please clarify is the problem still actual?

Z · Feb 03, 2012, 12:15 PM

Yes. When you add rows to a grid via JS. The grid does not really realize that rows are there and things like rowCount is wrong and it messs up everything else. Maybe you cannot add rows via the store...
/Z

Originally Posted by Daniil

Hi,

Please clarify is the problem still actual?

**Daniil** · Feb 10, 2012, 11:57 AM

Your initial code works correctly for me.

Here is the refactored version with the full example.

Example

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

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

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" },
            };
            store.DataBind();
        }
    }
</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 addRow = function (grid, rowIndex, data) {
            var newRecord = new grid.store.recordType({ 
                test1 : data.test1
            });

            grid.store.insert(rowIndex + 1, newRecord);
        };
    </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="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                    <ext:CommandColumn Width="24">
                        <Commands>
                            <ext:GridCommand CommandName="add" Icon="Add" />
                        </Commands>
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
            <Listeners>
                <Command Handler="addRow(this, rowIndex, record.data);" />
            </Listeners>
        </ext:GridPanel>
    </form>
</body>
</html>

Z · Feb 12, 2012, 11:28 PM

Daniil,

I pasted your example and tested it. it adds the row, but it is not working 100% correctly. I dont see the red marks on each cell that shows it is dirty and it doesnt update the rowCount properly.

THis all works for you? I am using IE8

Thanks,
/Z

Originally Posted by Daniil

Your initial code works correctly for me.

Here is the refactored version with the full example.

Example

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

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

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" },
            };
            store.DataBind();
        }
    }
</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 addRow = function (grid, rowIndex, data) {
            var newRecord = new grid.store.recordType({ 
                test1 : data.test1
            });

            grid.store.insert(rowIndex + 1, newRecord);
        }
    </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="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                    <ext:CommandColumn Width="24">
                        <Commands>
                            <ext:GridCommand CommandName="add" Icon="Add" />
                        </Commands>
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
            <Listeners>
                <Command Handler="addRow(this, rowIndex, record.data);" />
            </Listeners>
        </ext:GridPanel>
    </form>
</body>
</html>

**Daniil** · Feb 14, 2012, 9:25 AM

A dirty flag should not appear by default.

You can use the GridPanel's insertRecord with some values for all cells if you need dirty flags.

it doesnt update the rowCount properly.

Please clarify what is the rowCount property?

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" },
            };
            store.DataBind();
        }
    }
</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 addRow = function (grid, rowIndex, data) {
            grid.insertRecord(rowIndex + 1, { 
                test1 : data.test1,
                test2 : "default",
                test3 : "default"
            }, false);

            alert(grid.getStore().getCount());
        }
    </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="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                    <ext:CommandColumn Width="24">
                        <Commands>
                            <ext:GridCommand CommandName="add" Icon="Add" />
                        </Commands>
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
            <Listeners>
                <Command Handler="addRow(this, rowIndex, record.data);" />
            </Listeners>
        </ext:GridPanel>
    </form>
</body>
</html>

Z · Feb 14, 2012, 12:20 PM

I fixed it. Basically, i was passing a non-json object as second param to insertRecord. the store didnt realize a row was added and this caused a problem. I pass JSON now and it works fine.
Thanks,
/Z

Originally Posted by Daniil

A dirty flag should not appear by default.

You can use the GridPanel's insertRecord with some values for all cells if you need dirty flags.

Please clarify what is the rowCount property?

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" },
            };
            store.DataBind();
        }
    }
</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 addRow = function (grid, rowIndex, data) {
            grid.insertRecord(rowIndex + 1, { 
                test1 : data.test1,
                test2 : "default",
                test3 : "default"
            }, false);

            alert(grid.getStore().getCount());
        }
    </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="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                    <ext:CommandColumn Width="24">
                        <Commands>
                            <ext:GridCommand CommandName="add" Icon="Add" />
                        </Commands>
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
            <Listeners>
                <Command Handler="addRow(this, rowIndex, record.data);" />
            </Listeners>
        </ext:GridPanel>
    </form>
</body>
</html>

Thread: Adding row to grid

Thread Tools

Search Thread

Display

Adding row to grid

Adding row to grid

Adding row to grid

Adding row to grid

adding row to grid

Similar Threads

[CLOSED] Adding a new grid record

Adding control values to the grid

[CLOSED] Adding an icon to each row in a grid panel...

Adding one record in a grid

Adding a property grid to the ...

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: Adding row to grid

Adding row to grid

Adding row to grid

Adding row to grid

Adding row to grid

adding row to grid

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us