This is a migrated thread and some comments may be shown as answers.

[Solved] Client Export for Ajax Grid + Pagination

3 Answers 104 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Suresh asked on 06 Mar 2010, 12:28 AM

Hi,
   I have few questions, Anyone can help me? Thanks in advance

1) Pagination
       i'm having 25 records in my grid and 10 records are displayed per page. So first 2 page got 10 records and last page got 5 records. after going to last page, if i click sorting, the pagination is still on the last page and number of records shown also 5 only but the data got sorted. am i doing anything wrong?

2) Export to PDF in client side
if the grid is not ajaxifiedm i'm able to export the grid to PDF in client side. If the grid is ajaxified, then how can i export to pdf in client side?

Telerik version used :2008.2.1001.35

ASPX Code:
<body>

    <script type="text/javascript" language="javascript">
        function ExportGrid()
        {
            var radGrid = $find('<%= RadGrid1.ClientID %>');

            radGrid.get_masterTableView().exportToPdf();
        }
        function RequestStart(ajaxManager,eventArgs)
        {

        var evtTarget=eventArgs.EventTarget;
        //alert(evtTarget.indexOf("Button1"));
         if(evtTarget.indexOf("Button1")!=-1)
            {
                eventArgs.EnableAjax=false
            }
        }
    </script>

    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
        <asp:Button ID="Button1" runat="server" Text="Export" OnClientClick="ExportGrid();return false;" />
        <telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"
            AllowPaging="True" AllowSorting="True" GridLines="None" EnableViewState="true" PagerStyle-Position="TopAndBottom">
            <MasterTableView>
                <RowIndicatorColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </RowIndicatorColumn>
                <ExpandCollapseColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </ExpandCollapseColumn>
            </MasterTableView>
            <FilterMenu EnableTheming="True">
                <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
            </FilterMenu>
        </telerik:RadGrid>
        <telerik:RadAjaxManager ID="ajaxman" runat="server"
            onajaxsettingcreating="ajaxman_AjaxSettingCreating">
        <ClientEvents OnRequestStart="RequestStart" />
            <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                 <telerik:AjaxUpdatedControl ControlID="Button1"/>
                </UpdatedControls>
            </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
    </div>
    </form>
</body>

Code Behind:

protected DataTable GenerateDataTable()
    {
        DataTable myDataTable = new DataTable();
        myDataTable.Columns.Add("ID", typeof(int));
        myDataTable.Columns.Add("Name", typeof(string));

        for (int rows = 0; rows < 25; rows++)
            myDataTable.Rows.Add(rows, "Row " + rows);

        return myDataTable;
    }

    protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        RadGrid1.DataSource = GenerateDataTable();
    }

3 Answers, 1 is accepted

answered on 09 Mar 2010, 08:56 AM

Hi,

From my findings, when you perform the client side export the eventTarget is the RadGrid and not the export button, so here is a work around to achieve the required result:

JS:

                    <script type="text/javascript" language="javascript">         
                   var exportFlag;         
                    function ExportGrid() {                  
                        var radGrid = $find('<%= RadGrid1.ClientID %>');         
                        exportFlag = true;         
                        radGrid.get_masterTableView().exportToExcel();         
                        return false;         
                    }         
                    function RequestStart(ajaxManager, eventArgs) {         
                         var evtTarget = eventArgs.EventTarget;         
                         if (exportFlag == true)         
                             if (evtTarget.indexOf("RadGrid1") != -1) {         
                                 eventArgs.EnableAjax = false         
                                 exportFlag = false;         
                         }         
                    }         
                </script>         

Hope this helps.

Thanks,

Princy