[CLOSED] Re ordering of Grid and Tree columns.

[Prasoon]

Hi Team,

I have requirement, as per that user can re ordering Grid and Tree columns (same need to be save in database for future processing), how to get the index of the columns after rearranging, i tried ColumnMove listener but before and after parameter are not showing correct values.
Please help.

thanks and regards,
Prasoon

[Daniil]

Hi @Prasoon,

i tried ColumnMove listener but before and after parameter are not showing correct values.

Please provide a test case.

[Prasoon]

Please find the sample code

<ext:XScript ID="XScript2" runat="server">
        <script type="text/javascript">            
function callMe(o,r,e,a,d,n,m)
            {
                debugger;
           var oldCOl = e;
            var newCol = a; 
                  #{DirectMethods}.StoreRebind(oldCOl , newCol);
            } 

        </script>
        
    </ext:XScript>

  <ext:TreePanel 
               ID ="testTree"
                    runat="server" 
                    Region="East"                    
                    Width="600"
                    Title="Tree"
                    AutoScroll="true"                    
                    Margins="5 5 5 0"
                    Stateful="true" >
               <Fields>
                        <ext:ModelField Name="task"  />
                        <ext:ModelField Name="user" />
                        <ext:ModelField Name="change" />
                        <ext:ModelField Name="FillRate_Funded" />
                        <ext:ModelField Name="FillRate_Funded_H" />
                        <ext:ModelField Name="FillRate_UnFunded" />
                        <ext:ModelField Name="FillRate_UnFunded_H" />
                   </Fields>
                <ColumnModel>
                        <Columns>
                            <ext:TreeColumn
                                runat="server"
                                Text="Task"
                                Flex="1"
                                Sortable="true"
                               
                                DataIndex="task">
                            </ext:TreeColumn>
                            <ext:Column
                                runat="server"
                                Text="Assigned To"
                                CellId="1"
                                Sortable="true"
                                DataIndex="user">
                            </ext:Column>
                            <ext:Column
                                runat="server"
                                Text="change"
                               CellId="2"
                                Sortable="true"
                                DataIndex="change">
                                <Renderer Fn="RenderTreeHealth"></Renderer>
                            </ext:Column>
                             <ext:Column
                                runat="server"
                                Text="MultiColor"                                
                                Sortable="true"
                                  CellId="3"
                                DataIndex="FillRate_Funded">
                                <Renderer Fn="colorFillFundedUnfundedRate"></Renderer>
                            </ext:Column>
                            </Columns>
                    <Listeners >                        
  <ColumnMove Fn="callMe"></ColumnMove>                                                 
                        
                    </Listeners>
                    </ColumnModel>
               <Listeners>
                     <BeforeLoad Fn="nodeLoad" Handler="#{testTree}.body.mask('Loading.....', 'x-mask-loading');" />
               </Listeners>
                 <Root>
                        <ext:Node NodeID="0" Text="Root" />
                    </Root>
                    
                    <View>
                        <ext:TreeView runat="server">
                            <Plugins>
                                <ext:TreeViewDragDrop runat="server" DragGroup="tree2grid" DropGroup="grid2tree" />
                            </Plugins>
                            <Listeners>
                                <BeforeDrop Fn="beforerecorddrop" />
                                
                            </Listeners>
                        </ext:TreeView>
                    </View>              
                </ext:TreePanel>

[Daniil]

Thank you for the test case. Though, when I run it it throws a JavaScript error: RenderTreeHealth is not defined.

Please provide a standalone runnable test case.

[Prasoon]

Please comment RenderTreeHealth and then try.

thanks and regards,
Prasoon

[Daniil]

I see, at least, three more things in the code snippet that will produce similar errors.

Please post a standalone runnable example.

[Prasoon]

Hi Team,

please find few details, may be this will help



Exploring the given example (https://examples2.ext.net/#/TreePane...nced/TreeGrid/) to reorder the column sequence of tree grid. Requirement is how to set the column sequence from code behind? E.g.

Before reorder
Tree | Column1|Column2|Column3
Now user changes column sequence –

Tree | Column3|Column1|Column2


After re-login – user shall be able to see below format.

Tree | Column3|Column1|Column2

PFB standalone example

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>TreeGrid - Ext.NET Examples</title>

    <link href="/resources/css/examples.css" rel="stylesheet" />

    <script>
        var formatHours = function (v) {
            if (v < 1) {
                return Math.round(v * 60) + " mins";
            } else if (Math.floor(v) !== v) {
                var min = v - Math.floor(v);
                return Math.floor(v) + "h " + Math.round(min * 60) + "m";
            } else {
                return v + " hour" + (v === 1 ? "" : "s");
            }
        };

        var handler = function (grid, rowIndex, colIndex, actionItem, event, record, row) {
            Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : ''), record.get('task'));
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <h1>TreeGrid Example
        </h1>
        <p>
            This example is an advanced tree example. It illustrates:
        </p>
        <ul class="feature-list">
            <li>Multiple headers
            </li>
            <li>Header hiding, showing, reordering and resizing
            </li>
            <li>useArrows configuration
            </li>
            <li>Keyboard Navigation
            </li>
            <li>Discontiguous selection by holding the CTRL key
            </li>
            <li>singleExpand has been set to true
            </li>
        </ul>

        <br />

        <ext:TreePanel
            runat="server"
            Title="Core Team Projects"
            Width="500"
            Height="300"
            Collapsible="true"
            UseArrows="true"
            RootVisible="false"
            MultiSelect="true"
            SingleExpand="true"
            FolderSort="true">
            <Fields>
                <ext:ModelField Name="task" />
                <ext:ModelField Name="user" />
                <ext:ModelField Name="duration" />
                <ext:ModelField Name="done" />
            </Fields>
            <ColumnModel>
                <Columns>
                    <ext:TreeColumn
                        runat="server"
                        Text="Task"
                        Flex="2"
                        Sortable="true"
                        DataIndex="task" />
                    <ext:TemplateColumn
                        runat="server"
                        Text="Duration"
                        Flex="1"
                        Sortable="true"
                        DataIndex="duration"
                        Align="Center">
                        <Template runat="server">
                            <Html>
                                {duration:this.formatHours}
                            </Html>
                            <Functions>
                                <ext:JFunction Name="formatHours" Fn="formatHours" />
                            </Functions>
                        </Template>
                    </ext:TemplateColumn>
                    <ext:Column
                        runat="server"
                        Text="Assigned To"
                        Flex="1"
                        Sortable="true"
                        DataIndex="user" />
                    <ext:Column
                        runat="server"
                        Text="Status"
                        Flex="1"
                        Sortable="true"
                        DataIndex="done" />
                </Columns>
            </ColumnModel>

            <Root>
                <ext:Node Text="Tasks">
                    <Children>
                        <ext:Node Icon="Folder" Expanded="true">
                            <CustomAttributes>
                                <ext:ConfigItem Name="task" Value="Project: Shopping" Mode="Value" />
                                <ext:ConfigItem Name="duration" Value="13.25" />
                                <ext:ConfigItem Name="user" Value="Clark Lewis" Mode="Value" />
                                <ext:ConfigItem Name="done" Value="Not Done" Mode="Value" />
                            </CustomAttributes>
                            <Children>
                                <ext:Node Icon="Folder">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="task" Value="Housewares" Mode="Value" />
                                        <ext:ConfigItem Name="duration" Value="1.25" />
                                        <ext:ConfigItem Name="user" Value="Clark Lewis" Mode="Value" />
                                        <ext:ConfigItem Name="done" Value="New" Mode="Value" />
                                    </CustomAttributes>
                                    <Children>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Kitchen supplies" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.25" />
                                                <ext:ConfigItem Name="user" Value="Clark Lewis" Mode="Value" />
                                                <ext:ConfigItem Name="done" Value="TODO" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Groceries" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.4" />
                                                <ext:ConfigItem Name="user" Value="Clark Lewis" Mode="Value" />
                                                <ext:ConfigItem Name="done" Value="true" Mode="Raw" />
                                                <ext:ConfigItem Name="done" Value="TODO" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Cleaning supplies" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.4" />
                                                <ext:ConfigItem Name="user" Value="Clark Lewis" Mode="Value" />
                                                <ext:ConfigItem Name="done" Value="TODO" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Office supplies" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0.2" />
                                                <ext:ConfigItem Name="user" Value="Clark Lewis" Mode="Value" />
                                                <ext:ConfigItem Name="done" Value="TODO" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>
                                    </Children>
                                </ext:Node>
                                <ext:Node Icon="Folder" Expanded="true">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="task" Value="Remodeling" Mode="Value" />
                                        <ext:ConfigItem Name="duration" Value="12" />
                                        <ext:ConfigItem Name="user" Value="Clark Lewis" Mode="Value" />
                                        <ext:ConfigItem Name="done" Value="TODO" Mode="Value" />
                                    </CustomAttributes>
                                    <Children>
                                        <ext:Node Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Retile kitchen" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="6.5" />
                                                <ext:ConfigItem Name="user" Value="Clark Lewis" Mode="Value" />
                                                <ext:ConfigItem Name="done" Value="TODO" Mode="Value" />
                                            </CustomAttributes>
                                        </ext:Node>

                                    </Children>
                                </ext:Node>
                            </Children>
                        </ext:Node>

                    </Children>
                </ext:Node>
            </Root>
        </ext:TreePanel>
    </form>
</body>
</html>

thanks
Prasoon

[Daniil]

Hi @Prasoon,

If leave the Columns' definition in markup, you can manage Columns order in code behind like in the code snippet bellow. It swaps the last two columns.

protected void Page_Load(object sender, EventArgs e)
{
    if (!X.IsAjaxRequest)
    {
        var column2 = this.TreePanel1.ColumnModel.Columns[2];
        var column3 = this.TreePanel1.ColumnModel.Columns[3];

        this.TreePanel1.ColumnModel.Columns.Remove(column2);
        this.TreePanel1.ColumnModel.Columns.Remove(column3);
            
        this.TreePanel1.ColumnModel.Columns.Add(column3);
        this.TreePanel1.ColumnModel.Columns.Add(column2);
    }
}

Though, the much better solution would creating all the Columns in code behind and populating the Columns collection in a required order.

[Prasoon]

Hi Daniil,

Thanks for your help.

Please mark it as CLOSED.

Thanks and regards,
Prasoon