What's New?

[CLOSED] Unhiding a hidden column on grid throws javascript error

  1. #1
    Jan 09, 2015, 12:56 PM

    [CLOSED] Unhiding a hidden column on grid throws javascript error

    We have created a grid which has a hidden column by default. When user tries to unhide this column on the screen, it throws a javascript error.

    We have two css classes to adjust margins according to a requirement.

    Note : Please do not remove the css classes as we have such a requirement and we need the same two css classes that are used.

    Please check the sample code.


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

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

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<style type="text/css">
    
    .align-to-bottom1 .x-grid-header-widgets
    {
        margin-top: 63px;
    }
    
    .align-to-bottom2 .x-grid-header-widgets
    {
        margin-top: 50px;
    }
    
</style>
<script runat="server">
    public class Company
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public double Price { get; set; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.BindData();
        }
    }

    private void BindData()
    {
        Store store = this.GridPanelReviewIT.GetStore();
        store.DataSource = this.GetData();
        store.DataBind();
    }

    private List<Company> GetData()
    {
        DateTime today = DateTime.Today;

        return new List<Company> 
        {
            new Company { ID = 1, Name = "3m Co", Price = 71.72 },
            new Company { ID = 2, Name = "Alcoa Inc", Price = 29.01},
            new Company { ID = 3, Name = "Altria Group Inc", Price = 83.81},
            new Company { ID = 4, Name = "American Express Company", Price = 52.55},
            new Company { ID = 5, Name = "American International Group, Inc.", Price = 64.13},
            new Company { ID = 6, Name = "AT&T Inc.", Price = 31.61},
            new Company { ID = 7, Name = "Boeing Co.", Price = 75.43},
           
        };
    }
</script>
<body>
    <form id="Form1" runat="server">
      <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:GridPanel ID="GridPanelReviewIT" runat="server" ForceFit="true">
        <Store>
            <ext:Store ID="storeITReview" runat="server" PageSize="15">
                <Model>
                    <ext:Model ID="modelITReview" runat="server">
                        <Fields>
                            <ext:ModelField Name="ID" />
                            <ext:ModelField Name="Name" />
                            <ext:ModelField Name="Price" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel>
            <Columns>
                <ext:Column ID="colShortDescription" runat="server" Text="ID" DataIndex="ID" Cls="align-to-bottom1"
                    Filterable="false">
                </ext:Column>
                <ext:Column ID="colRoughRisk" runat="server" Text="Name" DataIndex="Name" Width="120"
                    Cls="columnAlignLeft" Filterable="true">
                </ext:Column>
                <ext:Column ID="colRisk" runat="server" Text="Price" DataIndex="Price" Width="120"
                    Cls="columnAlignLeft" Hidden="true" Filterable="true">
                </ext:Column>
            </Columns>
        </ColumnModel>
        <View>
            <ext:GridView ID="grdView1" runat="server" />
        </View>
        <Plugins>
            <ext:FilterHeader ID="FilterHeader222" runat="server">
            </ext:FilterHeader>
        </Plugins>
    </ext:GridPanel>
  
    </form>
</body>
</html>
    Attached Thumbnails Click image for larger version.  Name: Error.jpg  Views: 6  Size: 37.9 KB  ID: 18611  
    Last edited by Daniil; Jan 16, 2015 at 9:16 AM. Reason: [CLOSED]
  2. #2
    Jan 09, 2015, 2:53 PM
    Hello,

    Yes, the grid acts in a strange fashion and a javascript error is produced. What about hiding the column through javascript just after render instead of doing it in markup? The following example demonstrates:

    <%@ Page Language="C#" %>
 
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<style type="text/css">
     
    .align-to-bottom1 .x-grid-header-widgets
    {
        margin-top: 63px;
    }
     
    .align-to-bottom2 .x-grid-header-widgets
    {
        margin-top: 50px;
    }
     
</style>
<script runat="server">
    public class Company
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public double Price { get; set; }
    }
 
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.BindData();
        }
    }
 
    private void BindData()
    {
        Store store = this.GridPanelReviewIT.GetStore();
        store.DataSource = this.GetData();
        store.DataBind();
    }
 
    private List<Company> GetData()
    {
        DateTime today = DateTime.Today;
 
        return new List<Company>
        {
            new Company { ID = 1, Name = "3m Co", Price = 71.72 },
            new Company { ID = 2, Name = "Alcoa Inc", Price = 29.01},
            new Company { ID = 3, Name = "Altria Group Inc", Price = 83.81},
            new Company { ID = 4, Name = "American Express Company", Price = 52.55},
            new Company { ID = 5, Name = "American International Group, Inc.", Price = 64.13},
            new Company { ID = 6, Name = "AT&T Inc.", Price = 31.61},
            new Company { ID = 7, Name = "Boeing Co.", Price = 75.43},
            
        };
    }
</script>
<body>
    <form id="Form1" runat="server">
      <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:GridPanel ID="GridPanelReviewIT" runat="server" ForceFit="true">
        <Store>
            <ext:Store ID="storeITReview" runat="server" PageSize="15">
                <Model>
                    <ext:Model ID="modelITReview" runat="server">
                        <Fields>
                            <ext:ModelField Name="ID" />
                            <ext:ModelField Name="Name" />
                            <ext:ModelField Name="Price" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel>
            <Columns>
                <ext:Column ID="colShortDescription" runat="server" Text="ID" DataIndex="ID" Cls="align-to-bottom1"
                    Filterable="false">
                </ext:Column>
                <ext:Column ID="colRoughRisk" runat="server" Text="Name" DataIndex="Name" Width="120"
                    Cls="columnAlignLeft" Filterable="true">
                </ext:Column>
                <ext:Column ID="colRisk" runat="server" Text="Price" DataIndex="Price" Width="120"
                    Cls="columnAlignLeft" Filterable="true">
                </ext:Column>
            </Columns>
        </ColumnModel>
        <View>
            <ext:GridView ID="grdView1" runat="server">
                <Listeners>
                    <AfterRender Handler="this.getHeaderCt().getHeaderAtIndex(2).hide();" />
                </Listeners>
            </ext:GridView>
        </View>
        <Plugins>
            <ext:FilterHeader ID="FilterHeader222" runat="server">
            </ext:FilterHeader>
        </Plugins>
    </ext:GridPanel>
   
    </form>
</body>
</html>

Similar Threads

  1. Hide Grid Column Error when Grid Header Hidden on Load
    By Sean in forum 2.x Help
    Replies: 4
    Last Post: Mar 02, 2013, 8:04 AM
  2. [CLOSED] Grid column hyperlink throws a JS error when clicked
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Feb 23, 2012, 1:52 PM
  3. Combobox as editor inside grid - Clicking down arrow throws error
    By Sunram in forum 1.x Help
    Replies: 0
    Last Post: Sep 08, 2011, 9:59 AM
  4. While Clicking Grid panel row column JavaScript error is coming
    By vs.mukesh in forum 1.x Help
    Replies: 2
    Last Post: May 30, 2011, 5:53 AM
  5. [CLOSED] UpdateSelection() throws javascript error
    By sadaf in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 07, 2011, 11:14 AM

Posting Permissions