What's New?

Prevent automatic trim in Grid Cell

  1. #1
    Nov 20, 2012, 3:59 PM

    Prevent automatic trim in Grid Cell

    I have some record with spaces before data... but when I load de store into the grid this spaces are automatically trimmed.

    How can I do to prevent or disable this automatic trim?

    It's a sample 

    <script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.BindData();
        }
    }
 
    protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
    {
        this.BindData();   
    }
 
    private void BindData()
    {
        this.Store1.DataSource = this.Data;
        this.Store1.DataBind(); 
    }
 
    private object[] Data
    {
        get
        {
            return new object[]
            {
                new object[] { "A" },
                new object[] { " B" },
                new object[] { "  C" },
                new object[] { " D " },
                new object[] { " E     F " }

            };
        }
    }
</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 id="Head1" runat="server">
    <title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
 
    <script type="text/javascript">

 
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
         
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            StripeRows="true"
            Title="Array Grid"
            Width="600"
            Height="290"
            AutoExpandColumn="Company">
            <Store>
                <ext:Store ID="Store1" runat="server" OnRefreshData="MyData_Refresh">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="company" Type="String" />

                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:RowNumbererColumn />
                    <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company">
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
            </SelectionModel>
            <LoadMask ShowMask="true" />
        </ext:GridPanel>
    </form>
</body>
</html>
    In the Grid "A" is correct, but:
    - " B" are showed as "B"
    - " C" are showed as "C"
    - " D " are showed as "D"
    - " E F " are showed as "E F"

    Thanks in advance!
    Last edited by inaltec; Nov 20, 2012 at 5:27 PM.
  2. #2
    Nov 20, 2012, 8:10 PM
    Can be marked as Solved... I found the answer mixing answered forums and this example:
    https://examples1.ext.net/#/GridPane...Custom_Column/

    <script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.BindData();
        }
    }
  
    protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
    {
        this.BindData();   
    }
  
    private void BindData()
    {
        this.Store1.DataSource = this.Data;
        this.Store1.DataBind(); 
    }
  
    private object[] Data
    {
        get
        {
            return new object[]
            {
                new object[] { "A" },
                new object[] { " B" },
                new object[] { "  C" },
                new object[] { " D " },
                new object[] { " E     F " }
 
            };
        }
    }
</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 id="Head1" runat="server">
    <title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
  
    <script type="text/javascript">
         var renderValor = function (value) {
            var template = '<span style="white-space: pre;">{0}</span>';
            var formatvalue = String.format(template, value);
            return formatvalue;
        };
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
          
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            StripeRows="true"
            Title="Array Grid"
            Width="600"
            Height="290"
            AutoExpandColumn="Company">
            <Store>
                <ext:Store ID="Store1" runat="server" OnRefreshData="MyData_Refresh">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="company" Type="String" />
 
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:RowNumbererColumn />
                    <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company">
                          <Renderer Fn="renderValor" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
            </SelectionModel>
            <LoadMask ShowMask="true" />
        </ext:GridPanel>
    </form>
</body>
</html>
    Thanks!
    Last edited by inaltec; Dec 06, 2012 at 11:55 AM.
  3. #3
    Dec 05, 2012, 2:44 PM
    Is there a way to disable this trim by default in all grid?
  4. #4
    Dec 12, 2012, 3:39 PM
    Hi,

    You could use "&nbsp;".

    Example
    private object[] Data
{
    get
    {
        return new object[]
        {
            new object[] { "A" },
            new object[] { "&nbsp;B" },
        };
    }
}
  5. #5
    Dec 13, 2012, 1:27 PM
    @dannil this solutions is like the @inaltec solution because you need to modify the information... but one solutions is on server (data) side and the other is on client side.

    What's the problem? We have an app that works with Bank Transactions ... and this transactions work with ISO8583 standard. I'm talking about 45.000 transactions per hour.

    Then I have an infinite universe that unknown what's columns have spaces, but is mandatory show the information with this spaces.

    What's the deal? when I'm load the data to a store and show in a grid... with current solutions we need to add a renderer to this columns or change data. Both solutions add processing time and can see the app performance slow down. (superficial solution)

    I'll be able to think it is as a Ext.Net->GridPanel bug. Because I have never seen a grid that change data if you don't specified that (based on my experience in: Delphi, Power Buillder, VB, VS, SQL), removing spaces is like a formatting a column (renderer). Then I propose add a property in GridPanel with true or false to chose if you want trim spaces or not. (root solution).

    NOTE: Don't know if I detailed good the problem (in English). Let me know if need more details or explain in other way.
  6. #6
    Dec 13, 2012, 3:39 PM
    The problem is clear. Thank you for the additional details.

    Well, GridPanel doesn't trim these spaces. Just HTML works this way. The same happens with:
    <div>     test     </div>
    Some more details are here:
    http://en.wikipedia.org/wiki/Non-breaking_space

    So, if you don't want (and you are totally right here) to process the data, then the requirement can be achievable via CSS and without custom renderers.

    1. Set up Cls="my-grid" for the GridPanel.

    2. Here is the CSS rule.
    <style type="text/css">
    .my-grid .x-grid3-cell-inner {
        white-space: pre;
    }
</style>
    It should not cause any performance deduction.

    Hope this helps.
  7. #7
    Dec 13, 2012, 4:23 PM
    Now I'm so happy with the solution, and the performance did change immediately without using renderer.

    Thanks a lot!

Similar Threads

  1. [CLOSED] automatic data moving from bottom to top in grid panel
    By Vasudhaika in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: May 28, 2014, 5:26 AM
  2. [CLOSED] ListView: Remove Padding around the cell
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 18, 2012, 7:58 AM
  3. [CLOSED] [1.0] GridPanel Cell Padding?
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 05, 2011, 6:27 PM
  4. [CLOSED] [1] Grid Cell padding is trimmed and do not want it to be
    By bsnezw in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: May 03, 2011, 8:35 PM
  5. Automatic grid size, in width and height.
    By Galo Q in forum 1.x Help
    Replies: 1
    Last Post: May 12, 2010, 12:12 PM

Posting Permissions