[CLOSED] keep the same ColumnModel during a function call

[ddslogistics]

Hello,

menuItem calls a function in my C # code with DirectMethod.
The problem is that I lost some of my GridPanel column because they are loaded dynamically.
So I end up with a ColumnModel.Columns.count to 19 in the Load ()
and only 14 in my function.

How could I do to have the same model as in the load and my function?
and I would like to recover the order of columns displayed on the screen.

Maybe it's two problems are linked by one single solution?

Part of the structure of GridPanel

<ext:GridPanel ID="GridPanel1"
<Bin>
    <ext:MenuItem ID="MenuItem10" runat="server" Text="Save States">
          <Listeners>
                 <Click  Handler="SaveStatesCall();return false;" />
          </Listeners>
    </ext:MenuItem>
</Bin>
 <ColumnModel ID="GPSearchColumnModel" runat="server">
                    <Columns>
                        <ext:Column ColumnID="ID>
                        <ext:Column ColumnID="Name>
                        <ext:Column ColumnID="Number>
                   </Columns>
                </ColumnModel>

<Listeners>
     <BeforeRender Fn="onBeforeRender" />
</Listeners>

Code call method in aspx.cs

<script type="text/javascript">
  var SaveStatesCall = function () { Consult.SaveStates(); };
    </script>

Code behind

 [DirectMethod(ShowMask = true, Namespace = "Consult")]
        public void SaveStates()
        {
            //this function for keep order of the GridPanel
            SaveStatesTotal(GridPanelSearch);
        }

I hope this post is well written and clear enough

Thank you in advance

[Daniil]

Hi,

How do you add columns dynamically?

If on server during DirectEvent/DirectMethod, then you should recreate them during each request to have a possibility to access them during another requests via the Columns collection. They are not recreated automatically.

If client side, then a server does know nothing about these columns. They are not submitted from client automatically.

In both cases a possible solution is sending a required data from client as an extra parameter of a DirectEvent/DirectMethod.

and I would like to recover the order of columns displayed on the screen.

Please provide more details.

[ddslogistics]

Hi Daniil,

We add columns in this way.

  Column Rank = new Column();
             Rank.Header = "Rank";
             Rank.DataIndex = "Ranking";
             Rank.Width = 35;
             Rank.Align = Alignment.Right;
             GridPanelSearch.ColumnModel.Columns.Insert(2, Rank);

I have already try send the GridPanel or ColumnModel.Columns or Store but there are too many argument.

<script type="text/javascript">
  var SaveStatesCall = function (grid) { Consult.SaveStates(grid); };
    </script>

[DirectMethod(ShowMask = true, Namespace = "Consult")]
       public void SaveStates(GridPanel myGridPanel)
       {
           //this function for keep order of the GridPanel
           SaveStatesTotal(myGridPanel);
       }

So I don't know what parameter to send.

and I would like to recover the order of columns displayed on the screen.

The client can move the order columns.

for exemple : the GridPanel unmodified have this order : 1 - 2 - 3 -4
when client move the columns, he can have this order : 1- 3 - 2 - 4

i know the fonction

Stateful

but i don't want keep on cookies, i will save the order and width in DataBase.
So how to send the columns moved by the client to the server?

I hope that answers your questions and be a more accurate.
Thank you in advance.

[Daniil]

Hope the following example answers your questions.

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    class ColumnOrderItem
    {
        public string header { get; set; }
        public string dataIndex { get; set; }
        public int width { get; set; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" },
            };
            store.DataBind();
        }
    }

    protected void GetOrder(object sender, DirectEventArgs e)
    {
        List<ColumnOrderItem> order = JSON.Deserialize<List<ColumnOrderItem>>(e.ExtraParams["order"]);

        X.Msg.Alert("Order", JSON.Serialize(order)).Show();
    }
</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>

    <script type="text/javascript">
        var getOrder = function () {
            var grid = GridPanel1,
                cm = grid.getColumnModel(),
                order = [];

            Ext.each(cm.config, function (c) {
                order.push({
                    header    : c.header,
                    dataIndex : c.dataIndex,
                    width     : c.width
                });
            });

            return order;
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Button runat="server" Text="Get columns order">
        <DirectEvents>
            <Click OnEvent="GetOrder">
                <ExtraParams>
                    <ext:Parameter 
                        Name="order" 
                        Value="getOrder()" 
                        Mode="Raw" 
                        Encode="true" />
                </ExtraParams>
            </Click>
        </DirectEvents>
    </ext:Button>

    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test1" />
                            <ext:RecordField Name="test2" />
                            <ext:RecordField Name="test3" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test1" DataIndex="test1" />
                <ext:Column Header="Test2" DataIndex="test2" />
                <ext:Column Header="Test3" DataIndex="test3" />
            </Columns>
        </ColumnModel>
        <DirectEvents>
            <ColumnMove OnEvent="GetOrder">
                <ExtraParams>
                    <ext:Parameter 
                        Name="order" 
                        Value="getOrder()" 
                        Mode="Raw" 
                        Encode="true" />
                </ExtraParams>
            </ColumnMove>
        </DirectEvents>
    </ext:GridPanel>
</body>
</html>

See also
http://docs.sencha.com/ext-js/3-4/#!...ent-columnmove
http://docs.sencha.com/ext-js/3-4/#!...t-columnresize

[ddslogistics]

This is exactly what I wanted to know.

Thanks for your help.

Please, mark as solved.