What's New?

[OPEN] [#445] JavaScript error when I try to reconfigure grid with ImageCommandColumn

  1. #1
    Mar 01, 2014, 2:07 PM

    [OPEN] [#445] JavaScript error when I try to reconfigure grid with ImageCommandColumn

    Hello,

    I have some static command columns in the grid and want to add some extra columns.
    First I tried to add command column with directevents, but it doesn't work. I have error - control with this id doesn't exist. But If I don't use master page it works good. There are any ideas how it should works?

    Next I tried to add direct method, but it works partially. If I have all Handler code in one line it works good
    <Command Handler="#{DirectMethods}.DmCommand({eventMask: { showMask: true }});" />
    But when I move code to the other line, it doesn't work
    <Command Handler="
    #{DirectMethods}.DmCommand({
     eventMask: { showMask: true }
});" />
    Same behavior with PrepareCommand.

    <%@ Master Language="C#" AutoEventWireup="true" %>

<!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></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" DisableViewState="false">
    </ext:ResourceManager>

    <form id="form1" runat="server">
        <ext:Viewport runat="server">
            <Content>
                <asp:ContentPlaceHolder ID="BodyContent" runat="server">
                </asp:ContentPlaceHolder>
            </Content>
        </ext:Viewport>
    </form>
</body>
</html>
    <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" %>

<%@ Import Namespace="System.Collections.Generic"%>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<script runat="server">
    
    private void AddField(ModelField field)
    {
        if (X.IsAjaxRequest)
        {
            this.Store1.AddField(field);
        }
        else
        {
            this.Store1.Model[0].Fields.Add(field);
        }
    }

    private void Reconfigure()
    {
        List<ModelField> fields = new List<ModelField>();
        List<ColumnBase> columns = new List<ColumnBase>();

        fields.Add(new ModelField { Name = "A" });
        columns.Add(new Column { Text = "A", DataIndex = "A" });
        

        if (X.IsAjaxRequest)
        {
            Store1.RemoveFields();
            fields.ForEach(p => Store1.AddField(p));
        }
        else
        {
            Store1.Model[0].Fields.AddRange(fields);
        }

        Store1.RebuildMeta();

        GridPanel1.ColumnModel.Columns.AddRange(columns);

        if (X.IsAjaxRequest)
        {
            GridPanel1.Reconfigure();
        }
    }

    private void BindData()
    {
        Store1.DataSource = new List<object>()
        {
            new { A = 10 }
        };
        Store1.DataBind();
    }

    protected void OnClick(object sender, DirectEventArgs e)
    {
        Reconfigure();
        BindData();  
    }

    protected void OnCommand(object sender, DirectEventArgs e)
    {
        X.Msg.Alert("A", "A").Show();
    }

    [DirectMethod]
    public void DmCommand()
    {
        X.Msg.Alert("B", "B").Show();
    }
</script>

<asp:Content ID="Content2" ContentPlaceHolderID="BodyContent" runat="server">
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="Grid"
            Width="600"
            Height="350">
            <Store>
                <ext:Store 
                    ID="Store1" 
                    runat="server" 
                    IgnoreExtraFields="false">
                    <Model>
                        <ext:Model ID="Model1" runat="server" />
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:ImageCommandColumn ID="columnImage" runat="server">
                        <Commands>
                            <ext:ImageCommand CommandName="A" Icon="Key" />
                        </Commands>
                        <DirectEvents>
                            <Command OnEvent="OnCommand" />
                        </DirectEvents>
                    </ext:ImageCommandColumn>
                    <ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server">
                        <Commands>
                            <ext:ImageCommand CommandName="B" Icon="Add" />
                        </Commands>
                        <Listeners>
                            <Command Handler="#{DirectMethods}.DmCommand({eventMask: { showMask: true }});" />
                        </Listeners>
                    </ext:ImageCommandColumn>
                    <ext:ImageCommandColumn ID="ImageCommandColumn2" runat="server">
                        <Commands>
                            <ext:ImageCommand CommandName="B" Icon="Add" />
                        </Commands>
                        <Listeners>
                            <Command Handler="#{DirectMethods}.DmCommand({ eventMask: { showMask: true }});" />
                        </Listeners>
                    </ext:ImageCommandColumn>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
            </SelectionModel>      
            <Buttons>
                <ext:Button ID="Button2" 
                    runat="server" 
                    Text="Reconfigure">
                    <DirectEvents>
                        <Click OnEvent="OnClick" />
                    </DirectEvents>
                </ext:Button>
            </Buttons>      
        </ext:GridPanel>   
</asp:Content>
    Last edited by Daniil; Mar 06, 2014 at 4:22 AM. Reason: [OPEN] [#445]
  2. #2
    Mar 06, 2014, 4:21 AM
    Hi @Yury,

    Thank you for the report!

    There are two different problems.

    1. A GridPanel's Reconfigure call produces wrong (?) ids for columns. The "columnImage" is initially rendered with 
    id: "BodyContent_columnImage"
    but after a Reconfigure call it becomes:
    id: "columnImage"
    It is why a DirectEvent cannot find a control on server.

    Here is a simplified test case.

    - Click the Reconfigure button
    - Click the ImageCommand

    Master Page
    <%@ Master Language="C#" %>
 
<!DOCTYPE html>
 
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />
 
    <form runat="server">
        <asp:ContentPlaceHolder ID="BodyContent" runat="server" />
    </form>
</body>
</html>
    Content Page
    <%@ Page Language="C#" MasterPageFile="~/Site1.Master" %>

<%@ 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[] { "test", "test" },
                new object[] { "test", "test" },
                new object[] { "test", "test" }
            };
        }
    }

    protected void OnCommand(object sender, DirectEventArgs e)
    {
        X.Msg.Alert("OnCommand", "Hello from Server!").Show();
    }

    protected void Reconfigure(object sender, DirectEventArgs e)
    {
        this.GridPanel1.Reconfigure();
    }
</script>

<asp:Content ContentPlaceHolderID="BodyContent" runat="server">
    <ext:GridPanel ID="GridPanel1" runat="server">
        <Store>
            <ext:Store runat="server">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="test" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column runat="server" Text="Test" DataIndex="test" />

                <ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server">
                    <Commands>
                        <ext:ImageCommand CommandName="test" Text="Click Me" Icon="Accept" />
                    </Commands>
                    <DirectEvents>
                        <Command OnEvent="OnCommand" />
                    </DirectEvents>
                </ext:ImageCommandColumn>
            </Columns>
        </ColumnModel>
        <Buttons>
            <ext:Button runat="server" Text="Reconfigure" OnDirectClick="Reconfigure" />
        </Buttons>
    </ext:GridPanel>
</asp:Content>
    Created an Issue.
    https://github.com/extnet/Ext.NET/issues/445

    A workaround for now is setting IDMode="Explicit" for the ImageCommandColumn.

    2. A GridPanel's Reconfigure call might produce an invalid script with "\r\n" things.

    To keep the things clear (one issue per thread), I started another thread.
    http://forums.ext.net/showthread.php?28521
    Last edited by Daniil; Mar 06, 2014 at 4:26 AM.

Similar Threads

  1. 'processed' is null or not an object error on grid reconfigure
    By Pislburry in forum 2.x Help
    Replies: 2
    Last Post: Oct 04, 2013, 11:39 AM
  2. [CLOSED] How to reconfigure TreePanel using JavaScript
    By Svr77 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 30, 2013, 4:25 PM
  3. [CLOSED] Print a grid panel javascript error
    By otouri in forum 2.x Legacy Premium Help
    Replies: 19
    Last Post: Nov 01, 2012, 6:30 PM
  4. [CLOSED] GridPanel created in Javascript. Reconfigure.
    By supera in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 27, 2012, 2:01 PM
  5. [CLOSED] Hidden Change and Grid Filters are not working after Grid Reconfigure
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 15
    Last Post: Oct 16, 2011, 1:12 PM

Posting Permissions