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

Hiding columns and filters, exporting, then showing them again

11 Answers 594 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Luke
Top achievements
Rank 2
Luke asked on 08 Apr 2013, 11:07 PM
Hello, I am trying to use clientside events to hide the edit and delete columns as well as the filter row when an export is being performed on the radgrid, then show those items again after the export.  I've managed to hide them before the export and the export looks fine other than a short empty row still being where the filter row was for pdf and word (hideFilterItem does not seem to hide it from export; excel is fine though since I'm using ExcelML).  

The part I'm having difficulty with is getting them to show up again.  I've tried attaching a few client side events (such as OnTableCreated) to this function, but everything I've tried either causes errors or does nothing:

UnhideGridEditAndDeleteColumnsAndFilterRow = function (sender, eventArgs) {
 
 // I'm using js in a separate file so I can't use radcodeblock to get ClientID
    var gridName = sender.EventTarget.toString();
 
    gridName = gridName.substring(0, gridName.indexOf("$ctl00"));
 
    var masterTableView = $find(gridName).get_masterTableView();
 
    if (masterTableView.getColumnByUniqueName("EditCommandColumn") != null && masterTableView.getColumnByUniqueName("DeleteCommandColumn") != null) {
      masterTableView.showFilterItem();
      masterTableView.showColumn(masterTableView.getColumnByUniqueName("EditCommandColumn").get_element().cellIndex);
      masterTableView.showColumn(masterTableView.getColumnByUniqueName("DeleteCommandColumn").get_element().cellIndex);
    }
 
 
  };


Is there a proper way to do this that I haven't found?

11 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 09 Apr 2013, 04:58 AM
Hi,

If you want to hide editcolumn, deletcolumn on export, you can set  ExportOnlyData as true which ensures that only data is exported.
aspx:
<ExportSettings ExportOnlyData="true"></ExportSettings>

Thanks,
Shinu
0
Luke
Top achievements
Rank 2
answered on 09 Apr 2013, 03:25 PM
Thank you for your reply.  I do have this setting in place:

<ExportSettings  
  HideStructureColumns="true"
  Excel-Format="ExcelML"
  ExportOnlyData="true">
</ExportSettings>

But if I take out the javascript I'm using to manually remove the edit/delete columns and the filter I still get this (pdf):

Screenshot of exported pdf

I did previously get this working using server side code, but unfortunately this needs to be a client side solution.
0
Shinu
Top achievements
Rank 2
answered on 10 Apr 2013, 05:22 AM
Hi,

One suggestion is that you can manually hide the column before exporting as shown below.
C#:
protected void Button2_Click(object sender, EventArgs e)
{
    RadGrid1.MasterTableView.GetColumn("DeleteColumn").Visible = false;
        RadGrid1.MasterTableView.ExportToPdf(); 
        RadGrid1.MasterTableView.Rebind();
 }
Thanks,
Shinu.
0
Luke
Top achievements
Rank 2
answered on 10 Apr 2013, 04:22 PM
I've been able to get the formatting right using server side code within the grid ItemCommand handler:

If e.CommandName = RadGrid.ExportToPdfCommandName Or e.CommandName = RadGrid.ExportToWordCommandName Then
 
  NotesEditableGrid.MasterTableView.Columns.FindByUniqueName("EditCommandColumn").Visible = False
  NotesEditableGrid.MasterTableView.Columns.FindByUniqueName("DeleteCommandColumn").Visible = False
  NotesEditableGrid.AllowFilteringByColumn = False
 
End If

But unfortunately I'm required to use a client side solution, which is the cause of my trouble.  I'm able to fix the formatting client side for the most part, but the columns and filter remain hidden after the export and I haven't found a way to reset them.  I'm aware of the showColumn() and showFilterItem() javascript functions, but I haven't found an appropriate place to apply them without getting errors.  I tried manually calling the export in the javascript right after hiding the columns and then showing the columns again, but that also caused errors that I could not resolve.

Here is the markup for the grid in case that helps:

<telerik:RadAjaxPanel
  ID="RadAjaxPanel3"
  runat="server"
  ClientEvents-OnRequestStart="AERadAjaxJSManager.PanelRequestStarted"
  LoadingPanelID="RadAjaxLoadingPanel1">
 
  <telerik:RadGrid
    ID="NotesEditableGrid"
    SkinID="DataEntryWithFilter"
    DataSourceID="sqlVendingContractorNotes"
    runat="server">
 
    <ExportSettings  
      HideStructureColumns="true"
      Excel-Format="ExcelML"
      ExportOnlyData="true">
    </ExportSettings>
 
    <MasterTableView
      Width="100%"
      datakeynames="Vending_Contractor_Note_ID">
 
      <CommandItemSettings
        AddNewRecordText="Add New Note" />
       
      <EditFormSettings
        CaptionFormatString="Edit Note"
        InsertCaption="Add New Note"
        EditFormType="Template"
        PopUpSettings-Width="400px">
        <FormTemplate>
          <!--   Begin Edit Item Table Template   -->
          <table id="notesEditForm"
            cellspacing="1"
            cellpadding="1"
            width="100%">
            <tr>
              <td>
 
                <des:LocalizableLabel
                  ID="noteTypeLabel"
                  runat="server"
                  Text="Type">
                </des:LocalizableLabel>
 
              </td>
              <td>
 
                <aec:TelerikDropDown
                  ID="noteTypeDdl"
                  runat="server"
                  SelectedValue='<%# Bind("Vending_Contractor_Note_Type_Desc") %>'
                  DataSourceID="sqlLuNoteTypes"
                  DataTextField="Vending_Contractor_Note_Type_Desc"
                  DataValueField="Vending_Contractor_Note_Type_Desc"
                  DefiningLabelID="noteTypeLabel"
                  Purpose="Required">
                </aec:TelerikDropDown>
 
              </td>
            </tr>
            <tr>
              <td>
 
                <des:LocalizableLabel
                  ID="vcNoteLabel"
                  runat="server"
                  Text="Note*">
                </des:LocalizableLabel>
 
              </td>
              <td>
                       
                <aec:TelerikTextBox
                  ID="vcNote"
                  runat="server"
                  Text='<%# Bind("Note") %>'
                  DefiningLabelID="vcNoteLabel"
                  TextMode="MultiLine"
                  Width="325px"
                  Height="120px">
                </aec:TelerikTextBox>
                       
                <asp:RequiredFieldValidator
                  ID="noteNarrValidator"
                  runat="server"
                  ControlToValidate="vcNote"
                  ErrorMessage="Note is required."
                  Display="None ">
                </asp:RequiredFieldValidator>
 
              </td>
            </tr>                       
          </table>
          <AERadGrid:EditFormSaveCancelButtons
            ID="notesEditFormButtons"
            runat="Server">
          </AERadGrid:EditFormSaveCancelButtons>
 
        <!--   End Edit Item Table Template   -->
        </FormTemplate>
 
      </EditFormSettings>
 
      <Columns>
        <%-- Logic for Edit record icon --%>
        <telerik:GridEditCommandColumn
          HeaderTooltip="Edit Note"
          ButtonType="ImageButton"
          UniqueName="EditCommandColumn"
          Reorderable="false"
          Resizable="false"
          HeaderText="Edit"
          HeaderStyle-Width="70px"
 
          HeaderStyle-HorizontalAlign="Center"
 
          ItemStyle-HorizontalAlign="Center"
          ItemStyle-VerticalAlign="Top"
          ItemStyle-CssClass="MyImageButton" >
        </telerik:GridEditCommandColumn>
 
        <telerik:GridBoundColumn
          UniqueName="Vending_Contractor_Note_Type_Desc"
          DataField="Vending_Contractor_Note_Type_Desc"
          HeaderText="Type"
          HeaderStyle-Width="225px"/>
 
        <telerik:GridBoundColumn
          UniqueName="Note"
          HeaderText="Note"
          DataField="Note"
          ColumnEditorID="NarrEdit">
           
        </telerik:GridBoundColumn>
           
 
        <%-- Logic for delete record icon --%>
        <telerik:GridButtonColumn
          ConfirmText="Delete this Note?"
          HeaderTooltip="Delete Note"
          Text="Delete"
          HeaderText="Delete"
          CommandName="Delete"
          UniqueName="DeleteCommandColumn"
          ConfirmTitle="Delete"
          ConfirmDialogType="RadWindow"
          Reorderable="false"
          Resizable="false"
          ButtonType="ImageButton"
 
          HeaderStyle-Width="70px"
          HeaderStyle-HorizontalAlign="Center"
 
          ItemStyle-HorizontalAlign="Center"
          ItemStyle-CssClass="DeleteConfirmPopup">
        </telerik:GridButtonColumn>
 
      </Columns>
 
    </MasterTableView>
 
    <ClientSettings>
        <ClientEvents OnPopUpShowing="AERadAjaxJSManager.RadGridCenterPopUpToGrid" />
    </ClientSettings>
 
  </telerik:RadGrid>
 
</telerik:RadAjaxPanel>


I was handling the column hiding and what not in AERadAjaxJSManager.PanelRequestStarted:

// Handler for the RadAjaxPanel's ClientEvents-OnRequestStart event.
_panelRequestStarted = function (ajaxPanel, eventArgs) {
 
  var gridName = eventArgs.EventTarget.toString();
 
  if (gridName.indexOf("$ctl00") > -1)
    gridName = gridName.substring(0, gridName.indexOf("$ctl00"));
 
  var master = $find(gridName).get_masterTableView();
 
  // If we hid the filter and edit/delete columns previously for export, make sure they're always put back
   unhideGridEditAndDeleteColumnsAndFilterRow(master);
 
  // Disable Ajax and make a regular postback if this event does not need an Ajax request to be made.
  if (!_needsAjaxRequest(eventArgs.EventTarget, eventArgs.EventArgument)) {
    eventArgs.set_enableAjax(false);
 
    // Format grid for export (remove edit and delete columns, remove filter rows) if this is an export request
    if (_isExportRequest(eventArgs.EventTarget)) {
 
      master.hideFilterItem();
      master.hideColumn(master.getColumnByUniqueName("EditCommandColumn").get_element().cellIndex);
      master.hideColumn(master.getColumnByUniqueName("DeleteCommandColumn").get_element().cellIndex);
 
      /* I tried doing a manual export right here but it caused an error */
 
      //_unhideGridEditAndDeleteColumnsAndFilterRow(master);
 
    }
 
  }
};
 
// this is meant for unhiding the Edit and Delete columns as well as the filter row of a radgrid after an export has been performed
_unhideGridEditAndDeleteColumnsAndFilterRow = function (sender) {
 
  var gridName = sender.EventTarget.toString();
 
  gridName = gridName.substring(0, gridName.indexOf("$ctl00"));
 
  var masterTableView = $find(gridName).get_masterTableView();
 
  if (masterTableView.getColumnByUniqueName("EditCommandColumn") != null && masterTableView.getColumnByUniqueName("DeleteCommandColumn") != null) {
    masterTableView.showFilterItem();
    masterTableView.showColumn(masterTableView.getColumnByUniqueName("EditCommandColumn").get_element().cellIndex);
    masterTableView.showColumn(masterTableView.getColumnByUniqueName("DeleteCommandColumn").get_element().cellIndex);
  }
 
 
};

0
Kostadin
Telerik team
answered on 11 Apr 2013, 03:30 PM
Hello Luke,

You could call exportToExcel() or exportToPdf() methods from your JavaScript function. Right before you call one of it you could hide both columns(edit and delete) and the filter items and after the export you could accordingly show them. For instance please refer to the following code snippet.
<script type="text/javascript">
            function exportGrid(fileType) {
                var masterTableView = $find('<%= RadGrid1.ClientID%>').get_masterTableView();
                var editColIndex = masterTableView.getColumnByUniqueName("EditColumn").get_element().cellIndex;
                var deleteColIndex = masterTableView.getColumnByUniqueName("DeleteColumn").get_element().cellIndex;
 
                masterTableView.hideColumn(editColIndex);
                masterTableView.hideColumn(deleteColIndex);
                masterTableView.hideFilterItem()
 
                if (is Excel) {
                    masterTableView.exportToExcel();
                }
                else if (is Pdf) {
                    masterTableView.exportToPdf();
                }
 
                masterTableView.showColumn(editColIndex);
                masterTableView.showColumn(deleteColIndex);
                masterTableView.showFilterItem()
            }
        </script>

I hope this information proves helpful.

Kind regards,
Kostadin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Luke
Top achievements
Rank 2
answered on 11 Apr 2013, 04:23 PM
I tried that approach:

if (_isExportRequest(eventArgs.EventTarget)) {
 
  master.hideFilterItem();
  master.hideColumn(master.getColumnByUniqueName("EditCommandColumn").get_element().cellIndex);
  master.hideColumn(master.getColumnByUniqueName("DeleteCommandColumn").get_element().cellIndex);
 
  if (eventArgs.EventTarget.toLowerCase().indexOf("exporttoexcel") > -1)
    master.exportToExcel();
 
  if (eventArgs.EventTarget.toLowerCase().indexOf("exporttopdf") > -1)
    master.exportToPdf();
 
  _unhideGridEditAndDeleteColumnsAndFilterRow(master);
 
}


But the export causes the error "Unable to get property 'UniqueName' of undefined or null reference (commenting out the export lines prevents the error).

Here's a screenshot.

I'll keep fiddling with it and let you know if I figure this out.  If you happen to know what would cause this error your help would be much appreciated :)
0
Kostadin
Telerik team
answered on 16 Apr 2013, 01:21 PM
Hello Luke,

I am afraid without you code declaration I will not be able to pinpoint the reason for that behavior. For your convenience I prepared a small sample and attached it to this forum post. Please give it a try and let me know whether this approach proves helpful.

Greetings,
Kostadin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
swagatika
Top achievements
Rank 1
answered on 27 Dec 2014, 05:21 AM
Hi   
I ve added <ExportSettings ExportOnlyData="true"></ExportSettings> in source .But still the edit and delete column shows in export to pdf but not in export to excel.I want to hide command column in pdf also.Any body can help? 
0
Daniel
Telerik team
answered on 31 Dec 2014, 09:17 AM
Hello Swagatika,

You can find the columns by name on the click event of the button (for external buttons) or on ItemCommand (for built-in export buttons).
protected void ExportToPdf_Click(object sender, ImageClickEventArgs e)
{
    RadGrid1.MasterTableView.GetColumn("AutoGeneratedEditColumn").Visible = false;
    RadGrid1.MasterTableView.GetColumn("AutoGeneratedDeleteColumn").Visible = false;
    RadGrid1.MasterTableView.ExportToPdf();
}

As to the command item, please try the following setup:
<ExportSettings IgnorePaging="true" ExportOnlyData="true" ...

Regards,
Daniel
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Vivek
Top achievements
Rank 1
answered on 31 Jan 2017, 07:07 AM
Hi  How  can  we  hide  export  options  when  no  records  is  dispalayed  after applying  filter
0
Neha
Top achievements
Rank 1
answered on 19 May 2017, 10:38 AM

Hi 

Where do we need to do these settings ?

As I have a kendo grid and I am using PDF method to export to pdf.

Please let me know where we need to do these settings.

 

Thanks 

Neha 

Tags
Grid
Asked by
Luke
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 2
Luke
Top achievements
Rank 2
Kostadin
Telerik team
swagatika
Top achievements
Rank 1
Daniel
Telerik team
Vivek
Top achievements
Rank 1
Neha
Top achievements
Rank 1
Share this question
or