Hiding columns and filters, exporting, then showing them again

10 posts, 0 answers
  1. Luke
    Luke avatar
    9 posts
    Member since:
    Oct 2012

    Posted 08 Apr 2013 Link to this post

    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?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Apr 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Luke
    Luke avatar
    9 posts
    Member since:
    Oct 2012

    Posted 09 Apr 2013 Link to this post

    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.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Apr 2013 Link to this post

    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.
  6. Luke
    Luke avatar
    9 posts
    Member since:
    Oct 2012

    Posted 10 Apr 2013 Link to this post

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

  7. Kostadin
    Admin
    Kostadin avatar
    1709 posts

    Posted 11 Apr 2013 Link to this post

    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.
  8. Luke
    Luke avatar
    9 posts
    Member since:
    Oct 2012

    Posted 11 Apr 2013 Link to this post

    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 :)
  9. Kostadin
    Admin
    Kostadin avatar
    1709 posts

    Posted 16 Apr 2013 Link to this post

    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.
  10. swagatika
    swagatika avatar
    3 posts
    Member since:
    Sep 2011

    Posted 26 Dec 2014 in reply to Shinu Link to this post

    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? 
  11. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 31 Dec 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017