[CLOSED] Create GridPanel dinamically with javascript

**Pablo_Azevedo** · Nov 09, 2010, 10:55 AM

Hi,

I'm having some problems when creating a GridPanel dinamically using javascript. Let me explain the situation.

1) The GridPanel I need to load must be created dinamically 'cause the datasource will be different.
2) To load the data I use a static method (DirectMethod) returning an object containg the information to create the Store and the ColumnModel (fields, width, header, dataindex, format) and the records to show to the user.

Basically I return an object like

{
   fields: {[
      {header: 'Date', width: 200, dataindex: 'DATE', format: ''},
      {header: 'Value', width: 120, dataindex: 'VALUE', format: ''},
      {header: 'Null Value', width: 120, dataindex: 'VALUE_NULL', format: ''}
   ]},
   records: {[...]}
}

3) I'm doing this way 'couse I don't want to execute a POST. Need my process to be as fast as it cans. So I can not go to the server and create the store and column model, it must to be done on client side.

THE PROBLEM:
1) When I serialize the result in my static method using JSON.Serialize the values in DATE column are returned as a String.
> Tested with Firefox, Chrome and Internet Explorer. The problem occurs only in Internet Explorer.

2) The values in VALUE_NULL column are returned as null, but the GridPanel displays a zero value. I need to display empty.
> Tested with Firefox, Chrome and Internet Explorer. The problem occurs in all browsers.

Follows the sample code:

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

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

<script runat="server">
    [DirectMethod]
    public static object LoadData()
    {
        System.Data.DataTable table = new System.Data.DataTable();

        table.Columns.Add("DATE", typeof(DateTime));
        table.Columns.Add("VALUE", typeof(decimal));
        table.Columns.Add("VALUE_NULL", typeof(decimal));

        table.Rows.Add(new DateTime(2010, 9, 25), 123.232, DBNull.Value);
        table.Rows.Add(new DateTime(2010, 8, 15), 168.847, DBNull.Value);
        table.Rows.Add(new DateTime(2010, 2, 16), 65.054, DBNull.Value);
        table.Rows.Add(new DateTime(2010, 4, 30), 87.95, DBNull.Value);
        table.Rows.Add(new DateTime(2010, 7, 22), 874.005, DBNull.Value);
        table.Rows.Add(new DateTime(2010, 5, 09), 687.778, DBNull.Value);

        return JSON.Serialize(table);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript">
var alertDate = false;
function renderDate(value)
{
    if (!alertDate && Ext.isEmpty(value))
    {    
        alertDate = true;
        alert('Date is null');
    }
    return value
}

function loadData()
{
    var dateColumn = { dataIndex: 'DATE', header: 'Date', width: 210, xtype: 'datecolumn' };
    var numberColumn = { dataIndex: 'VALUE', header: 'Value', width: 120, xtype: 'numbercolumn' };
    var numberColumnNVL = { dataIndex: 'VALUE_NULL', header: 'Null Value (EMPTY)', width: 120, xtype: 'numbercolumn' };
    
    var dateField = { name: 'DATE', type: 'date', allowBlank: true, defaultValue: '' };
    var numberField = { name: 'VALUE', type: 'float', allowBlank: true, defaultValue: '' };
    var numberFieldNVL = { name: 'VALUE_NULL', type: 'float', allowBlank: true, defaultValue: '' };
    
    if (!Ext.isEmpty(grdDate.store))
        grdDate.store.removeAll(false);
    
    var store = new Ext.data.JsonStore({
        id:            grdDate.id + 'Store',
        autoSave:    false,
        autoLoad:    false,
        fields:        [dateField, numberField, numberFieldNVL]
    });
    
    var columnModel = new Ext.grid.ColumnModel({
        id:                    grdDate.id + 'ColumnModel',
        columns:            [dateColumn, numberColumn, numberColumnNVL],
        defaults: {
            fixed:            true,
            hideable:        false,
            menuDisabled:    true,
            sortable:        false
        }
    });
    
    columnModel.setRenderer(0, renderDate);
    
    grdDate.reconfigure(store, columnModel);
    
    Ext.net.DirectMethods.LoadData({
        success: function(result)
        {
            var table = Ext.decode(result);
            
            display.setValue(result);
            grdDate.store.loadData(table);
            
        }
    })
}
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager runat="server" />
        <ext:Button ID="btnLoad" runat="server" Text="Load">
            <Listeners>
                <Click Handler="loadData();" />
            </Listeners>
        </ext:Button>
        <ext:GridPanel ID="grdDate" runat="server" Width="500" Height="300">
            <Store>
                <ext:Store runat="server" />
            </Store>
            <ColumnModel runat="server" />
        </ext:GridPanel>
        <br />
        <br />
        <ext:DisplayField ID="display" runat="server" />
    </div>
    </form>
</body>
</html>

**Daniil** · Nov 09, 2010, 9:08 PM

Originally Posted by Pablo Azevedo

2) The values in VALUE_NULL column are returned as null, but the GridPanel displays a zero value. I need to display empty.
> Tested with Firefox, Chrome and Internet Explorer. The problem occurs in all browsers.

Hi,

To achieve this requirement I would suggest you to use one of these two ways:

1. RecordField's Convert and a common Column with a custom Renderer
2. RecordField's without Type="Float" and a common Column with a custom Renderer

Please note that NumberColumn can't show 'empty' because it expects number. Therefore it needs to use a common Column.

Also please note that zero value is to support sorting. I'm not sure how sorting will work with my suggestions.

JS code you can see via browser's "View source"

Example 1

<%@ 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[] { DBNull.Value },
                                         new object[] { 4156.64 },
                                         new object[] { DBNull.Value }
                                };
            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>
</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="test" Type="Float">
                                <Convert Handler="return value == null ? 'empty' : value;" />
                            </ext:RecordField>
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test" DataIndex="test">
                    <Renderer Handler="return value === 'empty' ? value : Ext.util.Format.number(value, '0,000.00')" />
                </ext:Column>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    </form>
</body>
</html>

Example 2

<%@ 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[] { DBNull.Value },
                                         new object[] { 4156.64 },
                                         new object[] { DBNull.Value }
                                };
            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>
</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="test" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test" DataIndex="test">
                    <Renderer Handler="return value === null ? 'empty' : Ext.util.Format.number(value, '0,000.00')" />
                </ext:Column>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    </form>
</body>
</html>

**Daniil** · Nov 09, 2010, 9:15 PM

I should say that you provide us with excellent examples and explanations of your requirements. Nice to work on questions that you posted.

Thank you.

**Vladimir** · Nov 09, 2010, 9:32 PM

Hi,

Few remarks:
1. First problem can be easly solved by adding dateFormat to the date field

dateFormat:"Y-m-dTh:i:s"

Another option to use AltConverters in the JSON.Serialize. In this case date will be serialized as native javascript date object (in this case dateFormat is not required)

return JSON.Serialize(table, JSON.AltConverters);

2. It is not required to serialize direct metod return result manually. Toolkit makes it automatically

return table;

In this case decode is not required (you can remove 'var table = Ext.decode(result)')
Please note that in this case general converters will be used therefore dateFormat is required

**Daniil** · Nov 09, 2010, 9:58 PM

One remark more.

It regards to

columnModel.setRenderer(0, renderDate);

I think you use it in debug purpose but I should say that DateColumn uses an own renderer, so the renderDate() renderer overrides the DateColumn's one.

Thread: [CLOSED] Create GridPanel dinamically with javascript

Thread Tools

Search Thread

Display

[CLOSED] Create GridPanel dinamically with javascript

Similar Threads

Create window dinamically

Ext.create gives javascript error

[CLOSED] create contextmenu via javascript

Add JavaScript to Window on create?

[CLOSED] Create Ifram in tab with JavaScript

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Create GridPanel dinamically with javascript

[CLOSED] Create GridPanel dinamically with javascript

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us