EXT.NET 3.0.0 RELEASED!
Now with Tablet Support!
Ext.NET 3.0.0 is here with lots of new cool features and now with tablet support! Check Examples Explorer now to see it in action or download and test it yourself for free!
Results 1 to 8 of 8

Thread: [CLOSED] Values in DataTable columns of type object are not rendered to json

  1. #1
    Premium Member
    Join Date
    Aug 2011
    Posts
    305

    [CLOSED] Values in DataTable columns of type object are not rendered to json

    Hi:

    I discovered this because I need to read sql server sql_variant columns. The .net driver maps sql_variant columns to DataTable DataColumn objects of type object (typeof(object)).

    The problem is that the values in these columns are not converted to json.

    I attached a sample page where you can see what happens:

    Code:
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="Ext.Net.Calendar.Demo" %>
    
    <script runat="server">
      protected void Page_Load(object sender, EventArgs e)
      {
        DataTable dataTable = new DataTable("test");
        dataTable.Columns.Add("Col1", typeof (int));
        dataTable.Columns.Add("Col2", typeof(object));
        dataTable.Rows.Add(1, "Row 1");
        dataTable.Rows.Add(2, 2);
        dataTable.Rows.Add(3, DateTime.Now);
    
        Store1.DataSource = dataTable;
        Store1.DataBind();
      }
    </script>
    
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>GridPanel with ObjectDataSource - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <style>
            .x-grid-cell-fullName .x-grid-cell-inner {
                font-family : tahoma, verdana;
                display     : block;
                font-weight : normal;
                font-style  : normal;
                color       : #385F95;
                white-space : normal;
            }
            
            .x-grid-rowbody div {
                margin : 2px 5px 20px 5px !important;
                width  : 99%;
                color  : Gray;
            }
            
            .x-grid-row-expanded td.x-grid-cell{
                border-bottom-width:0px;
            }
        </style>
    
    
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
    
            
            <ext:GridPanel ID="GridPanel1" 
                runat="server" 
                Title="Employees" 
                Frame="true" 
                Height="600">
                <Store>
                    <ext:Store ID="Store1" runat="server" >
                        <Model>
                            <ext:Model ID="Model1" runat="server" IDProperty="EmployeeID">
                                <Fields>
                                    <ext:ModelField Name="Col1" Type="Int"/>
                                    <ext:ModelField Name="Col2" Type="Auto"/>
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server" DataIndex="Col1" Text="Col1" Width="150" />
                        <ext:Column ID="Column2" runat="server" DataIndex="Col2" Text="Col2" Width="150" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server">
                        <GetRowClass Handler="return 'x-grid-row-expanded';" />
                    </ext:GridView>        
                </View>  
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
                </SelectionModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    The generated JavaScript code contains the data for the store coming from the DataTable object. Note that Col2 is missing from the data json object.

    Code:
    Ext.net.ResourceMgr.init({
        id: "ResourceManager1",
        aspForm: "Form1",
        theme: "gray"
    });
    Ext.onReady(function () {
        Ext.create("Ext.grid.Panel", {
            store: {
                model: Ext.define("App.Model1", {
                    extend: "Ext.data.Model",
                    fields: [{
                        name: "Col1",
                        type: "int"
                    }, {
                        name: "Col2"
                    }],
                    idProperty: "EmployeeID"
                }),
                storeId: "Store1",
                autoLoad: true,
                proxy: {
                    data: [{
                        "Col1": 1
                    }, {
                        "Col1": 2
                    }, {
                        "Col1": 3
                    }],
                    type: 'memory'
                }
            },
            id: "GridPanel1",
            frame: true,
            height: 600,
            renderTo: "App.GridPanel1_Container",
            title: "Employees",
            columns: {
                id: "ColumnModel1",
                items: [{
                    id: "Column1",
                    width: 150,
                    dataIndex: "Col1",
                    text: "Col1"
                }, {
                    id: "Column2",
                    width: 150,
                    dataIndex: "Col2",
                    text: "Col2"
                }]
            },
            selModel: window.App.RowSelectionModel1 = Ext.create("Ext.selection.RowModel", {
                proxyId: "RowSelectionModel1",
                selType: "rowmodel"
            }),
            viewConfig: {
                id: "GridView1",
                xtype: "gridview",
                getRowClass: function (record, index, rowParams, store) {
                    return 'x-grid-row-expanded';
                }
            }
        });
    });
    Any workaround to get all the data from the DataTable object ?

    Thanks

    Update: Sorry the original title of the thread doesn't make much sense. I changed it however, the forum app didn't seem to update the big title.
    Last edited by Baidaly; Aug 10, 2013 at 2:38 AM. Reason: [CLOSED]

  2. #2
    Member
    Join Date
    Mar 2011
    Location
    Toronto
    Posts
    2,490
    Hello!

    You should change object to String and use Converter:

    Code:
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="Ext.Net.Calendar.Demo" %>
     
    <script runat="server">
      protected void Page_Load(object sender, EventArgs e)
      {
        DataTable dataTable = new DataTable("test");
        dataTable.Columns.Add("Col1", typeof (int));
        dataTable.Columns.Add("Col2", typeof(string));
        dataTable.Rows.Add(1, "Row 1");
        dataTable.Rows.Add(2, 2);
        dataTable.Rows.Add(3, DateTime.Now);
     
        Store1.DataSource = dataTable;
        Store1.DataBind();
      }
    </script>
     
     
    <!DOCTYPE html>
     
    <html>
    <head id="Head1" runat="server">
        <title>GridPanel with ObjectDataSource - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
     
        <style>
            .x-grid-cell-fullName .x-grid-cell-inner {
                font-family : tahoma, verdana;
                display     : block;
                font-weight : normal;
                font-style  : normal;
                color       : #385F95;
                white-space : normal;
            }
             
            .x-grid-rowbody div {
                margin : 2px 5px 20px 5px !important;
                width  : 99%;
                color  : Gray;
            }
             
            .x-grid-row-expanded td.x-grid-cell{
                border-bottom-width:0px;
            }
        </style>
     
     
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />
             
            <ext:GridPanel ID="GridPanel1"
                runat="server"
                Title="Employees"
                Frame="true"
                Height="600">
                <Store>
                    <ext:Store ID="Store1" runat="server" >
                        <Model>
                            <ext:Model ID="Model1" runat="server" IDProperty="EmployeeID">
                                <Fields>
                                    <ext:ModelField Name="Col1" Type="Int"/>
                                    <ext:ModelField Name="Col2" Type="Auto">
                                        <Convert Handler="
                                            var d = Ext.Date.parse(value, 'd.m.Y H:i:s', true);
                                            if (d != null)
                                                return Ext.Date.format(d, 'd.m.Y');
                                            else if (!isNaN(parseInt(value))) {
                                                return parseInt(value);
                                            } else {
                                                return value;
                                            }
                                            "></Convert>
                                    </ext:ModelField>
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server" DataIndex="Col1" Text="Col1" Width="150" />
                        <ext:Column ID="Column2" runat="server" DataIndex="Col2" Text="Col2" Width="150" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server">
                        <GetRowClass Handler="return 'x-grid-row-expanded';" />
                    </ext:GridView>        
                </View>  
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
                </SelectionModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>

  3. #3
    Premium Member
    Join Date
    Aug 2011
    Posts
    305
    Hi:

    Unfortunately I cannot follow your suggestion because, in the real case, the type of the column is set automatically by the .Net driver. And I am not in control of the stored procedure either. I think the underlying problem is that the object type columns are not rendered to JSON. Is there a way to force them to be rendered?

    I also noticed that even object members of classes are not rendered either. In this example the data in Col2 is not rendered.

    Code:
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <%@ Import Namespace="System.Runtime.Serialization.Formatters" %>
    <%@ Import Namespace="System.Xml" %>
    
    
    <script runat="server">
    
    
      internal class Record
      {
        public int Col1 { get; set; }
        public object Col2 { get; set; }
      }
    
    
      protected void Page_Load(object sender, EventArgs e)
      {
    
        IList<Record> list = new List<Record>
                             {
                               new Record {Col1 = 1, Col2 = "Row 2"},
                               new Record {Col1 = 2, Col2 = 2},
                               new Record {Col1 = 3, Col2 = DateTime.Now},
                               
                             };
    
        Store1.DataSource = list;
        Store1.DataBind();
    
      }
    
    
    </script>
    
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>GridPanel with ObjectDataSource - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <style>
            .x-grid-cell-fullName .x-grid-cell-inner {
                font-family : tahoma, verdana;
                display     : block;
                font-weight : normal;
                font-style  : normal;
                color       : #385F95;
                white-space : normal;
            }
            
            .x-grid-rowbody div {
                margin : 2px 5px 20px 5px !important;
                width  : 99%;
                color  : Gray;
            }
            
            .x-grid-row-expanded td.x-grid-cell{
                border-bottom-width:0px;
            }
        </style>
    
    
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
    
            
            <ext:GridPanel ID="GridPanel1" 
                runat="server" 
                Title="Employees" 
                Frame="true" 
                Height="600">
                <Store>
                    <ext:Store ID="Store1" runat="server" >
                        <Model>
                            <ext:Model ID="Model1" runat="server" IDProperty="EmployeeID">
                                <Fields>
                                    <ext:ModelField Name="Col1" Type="Int"/>
                                    <ext:ModelField Name="Col2" Type="Auto"/>
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server" DataIndex="Col1" Text="Col1" Width="150" />
                        <ext:Column ID="Column2" runat="server" DataIndex="Col2" Text="Col2" Width="150" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server">
                        <GetRowClass Handler="return 'x-grid-row-expanded';" />
                    </ext:GridView>        
                </View>  
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
                </SelectionModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Thanks
    Last edited by bogc; Aug 09, 2013 at 11:51 PM.

  4. #4
    Ext.NET - Dev Team Vladimir's Avatar
    Join Date
    Mar 2008
    Location
    Russia
    Posts
    15,388
    Please use Type="Object" for ModelField
    Vladimir Shcheglov
    Ext.NET, Inc.
    Development Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  5. #5
    Premium Member
    Join Date
    Aug 2011
    Posts
    305
    It worked in both cases!

    Thanks

  6. #6
    Premium Member
    Join Date
    Aug 2011
    Posts
    305
    Sorry, could you please explain why this works vs using auto? I thought that auto means "use whatever data is there"...

    Update: Now, I looked at my code and actually the ModelFieldType.Object has been added in 2.2. It's not in 2.1 (or maybe it was added but not in the version I am using)! I tested my sample with version 2.2.

    Is there a workaround for version 2.1?

    Thank you
    Last edited by bogc; Aug 10, 2013 at 12:47 AM.

  7. #7
    Ext.NET - Dev Team Vladimir's Avatar
    Join Date
    Mar 2008
    Location
    Russia
    Posts
    15,388
    For v2.1 please use IsComplex="true"
    Vladimir Shcheglov
    Ext.NET, Inc.
    Development Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  8. #8
    Premium Member
    Join Date
    Aug 2011
    Posts
    305
    The combination Type=Auto & IsComplex = true worked.

    Thanks!

Similar Threads

  1. Replies: 1
    Last Post: Apr 10, 2013, 12:02 PM
  2. Datatable and Store columns mapping
    By QualityCode in forum 1.x Help
    Replies: 0
    Last Post: Dec 16, 2010, 9:45 PM
  3. Replies: 4
    Last Post: Apr 12, 2010, 2:01 PM
  4. Replies: 1
    Last Post: Jul 30, 2009, 11:32 AM
  5. Replies: 6
    Last Post: Dec 20, 2008, 5:35 AM

Posting Permissions