Hiding columns and filters, exporting, then showing them again

[Luke]

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?

[Shinu]

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

[Luke]

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.

[Shinu]

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.

[Luke]

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);
  }


};

[Kostadin]

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

[Luke]

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 :)

[Kostadin]

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

[swagatika]

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? 

[Daniel]

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

 

 

[Vivek]

Hi  How  can  we  hide  export  options  when  no  records  is  dispalayed  after applying  filter

[Neha]

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