How to export only visible colm. in GridPanel

[anilkumar]

Hi,

I have a grid panel in which user can hide and show some Columns. Now i have to add export functionality for visible columns only.

please help,
Thanks,

[shashi]

[r_honey]

Hi shashi, you should follow Forum Rules when posting. The Coolite team is doing a great job with their toolkit, and a even better one resolving problems on the forums. They should be able to understand what people are talking about, otherwise it may cause problems.

To Coolite moderators, the following line:

" iska jawab nahi dega koi apne aap dhundo aur mehnat karo i know u can do it."

is in Hindi, when translated to English, it means:

No one will answer this. Work Hard & Search on your own. I know u can do it.

The message is not inflammous, still you can edit it if you feel like.

[r_honey]

Hi Anil, I was working on a similar problem, and so was watching this thread. Now, that I have a working solution for me, I thought you people would be interested to have a look at it.

The following is adapted version of Example Explorer's "Export Data Ajax" example which shows you how to export back from a GridPanel. The markup is as follows:

<script type="text/javascript">
    function setFields(grid, hiddenFormat, hiddenColConfig, format) {
        hiddenFormat.setValue(format);

        // Calculate hidden columns.
        var hidden = '<columns>';
        var i;
        var visible;

        for (i = 0; i < grid.colModel.columns.length; i++) {
            hidden = hidden + '<column ';
            hidden = hidden + 'dataField="' + grid.colModel.columns[i].dataIndex + '"';
            visible = grid.colModel.columns[i].hidden == undefined ? true : !grid.colModel.columns[i].hidden;
            hidden = hidden + ' visible="' + visible.toString() + '"/>';
            hidden = hidden + ' index="' + i.toString() + '"/>';
        }
        
        hidden = hidden + '</columns>';
        hiddenColConfig.setValue(hidden);
    }
</script>


<ext:Store runat="server" ID="store1">
    <Reader>
        <ext:JsonReader>
            <Fields>
            </Fields>
        </ext:JsonReader>
    </Reader>
    <Listeners>
        <LoadException Handler="Ext.Msg.alert('Members - Load failed', e.message || e )" />
    </Listeners>
</ext:Store>

<ext:Hidden ID="FormatType" runat="server" />
<ext:Hidden ID="ColConfig" runat="server" />

<ext:GridPanel runat="server" ID="gridPanel1" StoreID="store1"
    Title="Members" BodyBorder="true" Border="true" Header="true"
    Height="400px" TrackMouseOver="true" Icon="Table">
    
    <ColumnModel runat="server">
        <Columns>
            <ext:RowNumbererColumn />
        </Columns>
    </ColumnModel>
    
    <SelectionModel>
        <ext:RowSelectionModel runat="server" SingleSelect="false"></ext:RowSelectionModel>
    </SelectionModel>
    
    <LoadMask ShowMask="true" />
    
    <TopBar>
        <ext:Toolbar runat="server">
            <Items>
                <ext:ToolbarFill runat="server" />
                <ext:Button runat="server" ID="btnExcel" Text="To Excel" Icon="PageExcel" AutoPostBack="true">
                    <Listeners>
                        <Click Handler="setFields(#{gridPanel1}, #{FormatType}, #{ColConfig}, 'Excel');" />
                    </Listeners>
                </ext:Button>
                
                <ext:Button runat="server" ID="btnCSV" Text="To CSV" Icon="PageAttach" AutoPostBack="true">
                    <Listeners>
                        <Click Handler="setFields(#{gridPanel1}, #{FormatType}, #{ColConfig}, 'CSV');" />
                    </Listeners>
                </ext:Button>
                
                <ext:Button runat="server" ID="btnXml" Text="To XML" Icon="PageCode" AutoPostBack="true">
                    <Listeners>
                        <Click Handler="setFields(#{gridPanel1}, #{FormatType}, #{ColConfig}, 'XML');" />
                    </Listeners>
                </ext:Button>
            </Items>
        </ext:Toolbar>
    </TopBar>

    <BottomBar>
        <ext:PagingToolBar runat="server" ID="pager1" PageSize="50" StoreID="store1">
            <Items>
                <ext:Label runat="server" ForID="txtPageSize" Html="&amp;nbsp;&amp;nbsp;Page Size&amp;nbsp;&amp;nbsp;" />
                <ext:NumberField runat="server" ID="txtPageSize" AllowBlank="false" AllowDecimals="false" AllowNegative="false"
                    FieldLabel="Page Size" MinValue="1" MaxValue="10000" Width="40">
                    

                </ext:NumberField>
                <ext:Button runat="server" Text="Apply">
                    <Listeners>
                        <Click Handler="#{pager1}.pageSize = parseInt(#{txtPageSize}.getValue()); #{pager1}.doLoad(0);" />
                    </Listeners>
                </ext:Button>
            </Items>
        </ext:PagingToolBar>
    </BottomBar>
    
</ext:GridPanel>

I could not provide the code-behind here as that contains some proprietary classes, that I cannot share.

The basic idea is as follows. The original example submits the grid data, and exports it in the Store's SubmitData event.

I have changed it a bit. The Submit event posts back the grid data which is needless and bandwidth intensive. Instead in the Export buttons' Click event, I have assigned a javascript handler, which iterates through all the columns of the grid, and stores their visibility information as xml in a hidden field.

On the server side, I parse this xml in the code-behind to get the names of visible columns, and use this information to generate the data that is to be exported. Instead of the Store's submit event, I do this in Button's Click event. Use

this.ColConfig.Value

which gives you the xml describing the state of columns in the grid.

The above markup together with the javascript function should be enough you need to accompolish your scenario.

[anilkumar]

Hi r_honey,

Thank you very much for your help. This is really helped me a lot. My problem is solved now.


Thanks Again

[[WP]joju]

just a question regarding this topic,, what would be more time consuming and resource intensive? submitting the grid data or submitting data regarding the visible columns + querying needed data from DB?

because i think after you've passed the visibility information from the client side then you would then query the needed information from a database somewhere in the server side